时间戳

首页 > 解决方案 > JqueryUI Explode - 颜色来自哪里？

jquery - JqueryUI Explode - 颜色来自哪里？

问题描述

我正在制作动画，我想在某个点弹出一个气球。我在 jQueryUi 中发现了 Explode，并认为我会试一试。我让它爆炸了，但碎片似乎没有颜色。我找不到他们应该从哪里得到颜色。在示例中，颜色似乎与元素相同，但这对我来说并没有发生。那是因为它是 SVG 中的一个元素吗？

我提到的例子：

https://www.tutorialspoint.com/jquery/effect-explode.htm

https://api.jqueryui.com/explode-effect/

当它停止时，你可以看到它在携带乌龟的气球上大约 20 秒发生。

$(document).ready(function() {
	$( "#ballon" ).delay(20000).toggle( "explode" );
}); //end document.ready
html {
	box-sizing:border-box;
}
*,
*:before,
*:after { /* allow all elements to inherit box-sizing */
  box-sizing: inherit;
}
html, body { 
	margin:0; 
	padding:0; 
	overflow:hidden; 
	width: 100vw;
	height: 100vh;
}


.BalloonContainer {
    position: absolute;
    overflow: hidden;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}

.flying img {
	max-width: 150px;
	position: absolute;
	top: 20px;
	transform: translateX(-30vw);
	animation: moveBird 2s linear 22s 1 forwards;
}

@-webkit-keyframes moveBird {
  0% {
    transform: translateX(-30vw) rotate(3deg);
    
  }
  50% {
	transform: rotate(-3deg);
  }
  100% {
    transform: translateX(45vw) rotate(3deg);
    
  }
}

.initialBalloon {
  position: absolute;
  /* moves initial position before animating */
  transform: translateX(100vw);
  top: 150px;
  animation: moveFirst 2s linear .2s 1;
  
  width: 150px;
}

.firstBalloon {
  position: absolute;
  transform: translateX(-30vw);
  top: 150px;
  animation: move 5s linear 5s infinite;
  width: 150px;
}

.secondBalloon {
  position: absolute;
  transform: translateX(-30vw);
  top: 200px;
  animation: move 8s linear 0s infinite;
  width: 150px;
}

.thirdBalloon {
  top: 250px;
  transform: translateX(-30vw);
  position: absolute;
  animation: move 11s linear 1s infinite;
  width: 150px;
}
.turtle {
  position: absolute;
  top: 50px;
  transform: translateX(-50vw); 
  
  animation: moveTurtle 5s linear 1s 1 none, 
  moveTurtleStop 11s linear 6s 1 forwards, 
  moveTurtleRotate 5s linear 17s infinite;  
  width: 250px;
}



@-webkit-keyframes moveTurtle {
  0% {
    transform: translateX(-50vw) rotate(10deg);
    
  }
  50% {
	transform: rotate(-5deg);
  }
  100% {
    transform: translateX(100vw) rotate(10deg);
    
  }
}

 @-webkit-keyframes moveTurtleRotate {
  0% {
    transform: translateX(50vw) rotate(10deg);    
  }
  50% {
	transform: translateX(50vw) rotate(-5deg);
  }
  100% {
    transform: translateX(50vw) rotate(10deg);    
  }
} 

@-webkit-keyframes moveTurtleStop {
  0% {
    transform: translateX(-50vw) rotate(10deg);
    
  }
  50% {
	transform: rotate(-5deg);
  }
  100% {
    transform: translateX(50vw) rotate(10deg);
    
  }
}

@-webkit-keyframes move {
  0% {
    transform: translateX(-30vw) rotate(10deg);
    
  }
  50% {
	transform: rotate(-5deg);
  }
  100% {
    transform: translateX(100vw) rotate(10deg);
    
  }
}

@-webkit-keyframes moveFirst {
  0% {
    transform: translateX(50vw) rotate(10deg);
  }
  50% {
	transform: translateX(75vw) transform: rotate(-5deg);
  }
  100% {
    transform: translateX(100vw) rotate(10deg);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<div class="BalloonContainer">
		<div class="flying">
			<img src="https://williamcunningham.me/happy_birthday_2019/img/flyNew.gif" alt="">
		</div>
		<div class="initialBalloon swingimage">
			<svg id="Balloon_1" data-name="Balloon_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.82 125.26"><defs><style>.cls-1 {fill: #171618;}.cls-2 {fill: #efefef;}</style></defs><title>ballon</title><path id="ballon_1p" class="cls-1" d="M15.34,1.26s-18,9-15,26,19,28,19,28a22.69,22.69,0,0,0,4,1c1,0-2,2-1,3h5s2,0-1-3c0,0,18-6,22-28S30.34-3.74,15.34,1.26Z" /><path id="highlight_1" class="cls-2" d="M18.34,6.26s-15,6-13,20h6S8.34,14.26,18.34,6.26Z" />
	    		<polygon id="string_1" class="cls-1" points="22.34 125.26 24.41 57.26 25.57 57.26 26.34 125.26 22.34 125.26" /></svg>
		</div>
		<div class="firstBalloon swingimage">
			<svg id="Balloon_2" data-name="Balloon_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.82 125.26"><defs><style>.cls-1 {fill: #171618;}.cls-2 {fill: #efefef;}</style></defs><title>ballon</title><path id="ballon_2p" class="cls-1" d="M15.34,1.26s-18,9-15,26,19,28,19,28a22.69,22.69,0,0,0,4,1c1,0-2,2-1,3h5s2,0-1-3c0,0,18-6,22-28S30.34-3.74,15.34,1.26Z" /><path id="highlight_2" class="cls-2" d="M18.34,6.26s-15,6-13,20h6S8.34,14.26,18.34,6.26Z" />
	    		<polygon id="string_2" class="cls-1" points="22.34 125.26 24.41 57.26 25.57 57.26 26.34 125.26 22.34 125.26" /></svg>
		</div>
		<div class="secondBalloon swingimage">
			<svg id="Balloon_3" data-name="Balloon_3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.82 125.26"><defs><style>.cls-1 {fill: #171618;}.cls-2 {fill: #efefef;}</style></defs><title>ballon</title><path id="ballon_3p" class="cls-1" d="M15.34,1.26s-18,9-15,26,19,28,19,28a22.69,22.69,0,0,0,4,1c1,0-2,2-1,3h5s2,0-1-3c0,0,18-6,22-28S30.34-3.74,15.34,1.26Z" /><path id="highlight_3" class="cls-2" d="M18.34,6.26s-15,6-13,20h6S8.34,14.26,18.34,6.26Z" />
	    		<polygon id="string_3" class="cls-1" points="22.34 125.26 24.41 57.26 25.57 57.26 26.34 125.26 22.34 125.26" /></svg>
		</div>
		<div class="thirdBalloon swingimage">
			<svg id="Balloon_4" data-name="Balloon_4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.82 125.26"><defs><style>.cls-1 {fill: #171618;}.cls-2 {fill: #efefef;}</style></defs><title>ballon</title><path id="ballon_4p" class="cls-1" d="M15.34,1.26s-18,9-15,26,19,28,19,28a22.69,22.69,0,0,0,4,1c1,0-2,2-1,3h5s2,0-1-3c0,0,18-6,22-28S30.34-3.74,15.34,1.26Z" /><path id="highlight_4" class="cls-2" d="M18.34,6.26s-15,6-13,20h6S8.34,14.26,18.34,6.26Z" />
	    		<polygon id="string_4" class="cls-1" points="22.34 125.26 24.41 57.26 25.57 57.26 26.34 125.26 22.34 125.26" /></svg>
		</div>
		<div class="turtle swingimage">
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110.09 179.26"><defs><style>.cls-1{fill:#171618;}.cls-2{fill:#efefef;}</style></defs><title>fullTurtle</title><g id="balloonTotal"><path id="ballon" class="cls-1" d="M34.13,1.26s-18,9-15,26,19,28,19,28a22.69,22.69,0,0,0,4,1c1,0-2,2-1,3h5s2,0-1-3c0,0,18-6,22-28S49.13-3.74,34.13,1.26Z"/><path id="highlight" class="cls-2" d="M37.13,6.26s-15,6-13,20h6S27.13,14.26,37.13,6.26Z"/><polygon id="string" class="cls-1" points="41.13 125.26 43.2 57.26 44.37 57.26 45.13 125.26 41.13 125.26"/></g><g id="turtle"><path id="body" class="cls-1" d="M37.13,122.26s-18-1-33,20c0,0-5,1-4,4s8,8,6,11-7,9-4,12,15-6,15-6,18,12,41,1c0,0,2,0,2,4s-1,11,2,11,10-12,10-12,4-4,1-7c0,0-2-2-1-3s7-6,11-1,4,7,10,7,14-3,14-3,5-2,2-6a39.88,39.88,0,0,0-7-7s-2-3-7-2-10,3-8,1,2-3-1-3c-1,0-18-16-29-18S45.13,122.26,37.13,122.26Z"/><path id="highlight-2" data-name="highlight" class="cls-2" d="M5.13,145.26s26,36,76,0C81.13,145.26,34.13,188.26,5.13,145.26Z"/><circle id="eye" class="cls-2" cx="97.63" cy="152.76" r="4.5"/><circle id="eyeball" class="cls-1" cx="99.13" cy="152.26" r="1"/></g></svg>	
		</div>
	</div>

标签： jqueryjquery-ui

解决方案

我怀疑这与使用 an<svg><path>与 a <div>or<img>元素有关。

如果我们将其分解为更精简的版本，我们可以看到会发生什么：

$(function() {
  $("#ballon, #highlight").delay(30 * 1000).toggle("explode", {
    pieces: 16
  }, 500);

  $(".flying img").delay(32 * 1000).toggle("explode", {
    pieces: 42
  }, 2000);
});
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  /* allow all elements to inherit box-sizing */
  box-sizing: inherit;
}

html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}

.BalloonContainer {
  position: absolute;
  overflow: hidden;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

.flying img {
  max-width: 150px;
  position: absolute;
  top: 20px;
  transform: translateX(-30vw);
  animation: moveBird 2s linear 22s 1 forwards;
}

@-webkit-keyframes moveBird {
  0% {
    transform: translateX(-30vw) rotate(3deg);
  }
  50% {
    transform: rotate(-3deg);
  }
  100% {
    transform: translateX(45vw) rotate(3deg);
  }
}

.initialBalloon {
  position: absolute;
  /* moves initial position before animating */
  transform: translateX(100vw);
  top: 150px;
  animation: moveFirst 2s linear .2s 1;
  width: 150px;
}

.firstBalloon {
  position: absolute;
  transform: translateX(-30vw);
  top: 150px;
  animation: move 5s linear 5s infinite;
  width: 150px;
}

.secondBalloon {
  position: absolute;
  transform: translateX(-30vw);
  top: 200px;
  animation: move 8s linear 0s infinite;
  width: 150px;
}

.thirdBalloon {
  top: 250px;
  transform: translateX(-30vw);
  position: absolute;
  animation: move 11s linear 1s infinite;
  width: 150px;
}

.turtle {
  position: absolute;
  top: 50px;
  transform: translateX(-50vw);
  animation: moveTurtle 5s linear 1s 1 none, moveTurtleStop 11s linear 6s 1 forwards, moveTurtleRotate 5s linear 17s infinite;
  width: 250px;
}

@-webkit-keyframes moveTurtle {
  0% {
    transform: translateX(-50vw) rotate(10deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  100% {
    transform: translateX(100vw) rotate(10deg);
  }
}

@-webkit-keyframes moveTurtleRotate {
  0% {
    transform: translateX(50vw) rotate(10deg);
  }
  50% {
    transform: translateX(50vw) rotate(-5deg);
  }
  100% {
    transform: translateX(50vw) rotate(10deg);
  }
}

@-webkit-keyframes moveTurtleStop {
  0% {
    transform: translateX(-50vw) rotate(10deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  100% {
    transform: translateX(50vw) rotate(10deg);
  }
}

@-webkit-keyframes move {
  0% {
    transform: translateX(-30vw) rotate(10deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  100% {
    transform: translateX(100vw) rotate(10deg);
  }
}

@-webkit-keyframes moveFirst {
  0% {
    transform: translateX(50vw) rotate(10deg);
  }
  50% {
    transform: translateX(75vw) transform: rotate(-5deg);
  }
  100% {
    transform: translateX(100vw) rotate(10deg);
  }
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>

<div class="BalloonContainer">
  <div class="flying">
    <img src="https://williamcunningham.me/happy_birthday_2019/img/flyNew.gif" alt="">
  </div>
  <!--
  <div class="initialBalloon swingimage">
    <svg id="Balloon_1" data-name="Balloon_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.82 125.26"><defs><style>.cls-1 {fill: #171618;}.cls-2 {fill: #efefef;}</style></defs><title>ballon</title><path id="ballon_1p" class="cls-1" d="M15.34,1.26s-18,9-15,26,19,28,19,28a22.69,22.69,0,0,0,4,1c1,0-2,2-1,3h5s2,0-1-3c0,0,18-6,22-28S30.34-3.74,15.34,1.26Z" /><path id="highlight_1" class="cls-2" d="M18.34,6.26s-15,6-13,20h6S8.34,14.26,18.34,6.26Z" />
	    		<polygon id="string_1" class="cls-1" points="22.34 125.26 24.41 57.26 25.57 57.26 26.34 125.26 22.34 125.26" /></svg>
  </div>
  <div class="firstBalloon swingimage">
    <svg id="Balloon_2" data-name="Balloon_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.82 125.26"><defs><style>.cls-1 {fill: #171618;}.cls-2 {fill: #efefef;}</style></defs><title>ballon</title><path id="ballon_2p" class="cls-1" d="M15.34,1.26s-18,9-15,26,19,28,19,28a22.69,22.69,0,0,0,4,1c1,0-2,2-1,3h5s2,0-1-3c0,0,18-6,22-28S30.34-3.74,15.34,1.26Z" /><path id="highlight_2" class="cls-2" d="M18.34,6.26s-15,6-13,20h6S8.34,14.26,18.34,6.26Z" />
	    		<polygon id="string_2" class="cls-1" points="22.34 125.26 24.41 57.26 25.57 57.26 26.34 125.26 22.34 125.26" /></svg>
  </div>
  <div class="secondBalloon swingimage">
    <svg id="Balloon_3" data-name="Balloon_3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.82 125.26"><defs><style>.cls-1 {fill: #171618;}.cls-2 {fill: #efefef;}</style></defs><title>ballon</title><path id="ballon_3p" class="cls-1" d="M15.34,1.26s-18,9-15,26,19,28,19,28a22.69,22.69,0,0,0,4,1c1,0-2,2-1,3h5s2,0-1-3c0,0,18-6,22-28S30.34-3.74,15.34,1.26Z" /><path id="highlight_3" class="cls-2" d="M18.34,6.26s-15,6-13,20h6S8.34,14.26,18.34,6.26Z" />
	    		<polygon id="string_3" class="cls-1" points="22.34 125.26 24.41 57.26 25.57 57.26 26.34 125.26 22.34 125.26" /></svg>
  </div>
  <div class="thirdBalloon swingimage">
    <svg id="Balloon_4" data-name="Balloon_4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.82 125.26"><defs><style>.cls-1 {fill: #171618;}.cls-2 {fill: #efefef;}</style></defs><title>ballon</title><path id="ballon_4p" class="cls-1" d="M15.34,1.26s-18,9-15,26,19,28,19,28a22.69,22.69,0,0,0,4,1c1,0-2,2-1,3h5s2,0-1-3c0,0,18-6,22-28S30.34-3.74,15.34,1.26Z" /><path id="highlight_4" class="cls-2" d="M18.34,6.26s-15,6-13,20h6S8.34,14.26,18.34,6.26Z" />
	    		<polygon id="string_4" class="cls-1" points="22.34 125.26 24.41 57.26 25.57 57.26 26.34 125.26 22.34 125.26" /></svg>
  </div>
  -->
  <div class="turtle swingimage">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110.09 179.26"><defs><style>.cls-1{fill:#171618;}.cls-2{fill:#efefef;}</style></defs><title>fullTurtle</title><g id="balloonTotal"><path id="ballon" class="cls-1" d="M34.13,1.26s-18,9-15,26,19,28,19,28a22.69,22.69,0,0,0,4,1c1,0-2,2-1,3h5s2,0-1-3c0,0,18-6,22-28S49.13-3.74,34.13,1.26Z"/><path id="highlight" class="cls-2" d="M37.13,6.26s-15,6-13,20h6S27.13,14.26,37.13,6.26Z"/><polygon id="string" class="cls-1" points="41.13 125.26 43.2 57.26 44.37 57.26 45.13 125.26 41.13 125.26"/></g><g id="turtle"><path id="body" class="cls-1" d="M37.13,122.26s-18-1-33,20c0,0-5,1-4,4s8,8,6,11-7,9-4,12,15-6,15-6,18,12,41,1c0,0,2,0,2,4s-1,11,2,11,10-12,10-12,4-4,1-7c0,0-2-2-1-3s7-6,11-1,4,7,10,7,14-3,14-3,5-2,2-6a39.88,39.88,0,0,0-7-7s-2-3-7-2-10,3-8,1,2-3-1-3c-1,0-18-16-29-18S45.13,122.26,37.13,122.26Z"/><path id="highlight-2" data-name="highlight" class="cls-2" d="M5.13,145.26s26,36,76,0C81.13,145.26,34.13,188.26,5.13,145.26Z"/><circle id="eye" class="cls-2" cx="97.63" cy="152.76" r="4.5"/><circle id="eyeball" class="cls-1" cx="99.13" cy="152.26" r="1"/></g></svg>
  </div>
</div>

由于此方法需要一个 HTML 元素，我怀疑它在转换 SVG 对象时遇到了对象问题。我正在尝试使用 SVG 研究这个 jQuery 功能，但到目前为止还没有找到很多细节。

希望这有助于澄清它。您还可以在后面隐藏另一个 SVG，以帮助动画弹出或不使用 SVG。不确定什么更好。

希望有帮助。

推荐阅读