javascript - mo.js 多个项目的动画

Question

我需要你的帮助。要将动画应用到具有单个“my-button”类的多个元素？现在这仅适用于单个按钮。

在 querySelectorAll 上替换 querySelector 无法解决问题，脚本变得无法工作

谢谢。

var el = document.querySelector('.my-button'),
	elSpan = el.querySelector('span'),
	// mo.js timeline obj
	timeline = new mojs.Timeline(),
	scaleCurve = mojs.easing.path('M0,100 L25,99.9999983 C26.2328835,75.0708847 19.7847843,0 100,0'),

	// tweens for the animation:

	// burst animation
	tween1 = new mojs.Burst({
		parent: el,
		duration: 1500,
		shape : 'circle',
		fill : [ '#e67e22', '#DE8AA0', '#8AAEDE', '#8ADEAD', '#DEC58A', '#8AD1DE' ],
		x: '50%',
		y: '50%',
		opacity: 0.8,
		childOptions: { radius: {20:0} },
		radius: {40:120},
		angle: {0: 180},
		count: 8,
		isSwirl: true,
		isRunLess: true,
		easing: mojs.easing.bezier(0.1, 1, 0.3, 1)
	}),
	// ring animation
	tween2 = new mojs.Transit({
		parent: el,
		duration: 750,
		type: 'circle',
		radius: {0: 50},
		fill: 'transparent',
		stroke: '#2ecc71',
		strokeWidth: {15:0},
		opacity: 0.6,
		x: '50%',     
		y: '50%',
		isRunLess: true,
		easing: mojs.easing.bezier(0, 1, 0.5, 1)
	}),
	// icon scale animation
	tween3 = new mojs.Tween({
		duration : 900,
		onUpdate: function(progress) {
			if(progress > 0.3) {
				var scaleProgress = scaleCurve(progress);
				elSpan.style.WebkitTransform = elSpan.style.transform = 'scale3d(' + scaleProgress + ',' + scaleProgress + ',1)';
				elSpan.style.WebkitTransform = elSpan.style.color = '#2ecc71';
			} else {
				elSpan.style.WebkitTransform = elSpan.style.transform = 'scale3d(0,0,1)';
				elSpan.style.WebkitTransform = elSpan.style.color = 'rgba(0,0,0,0.3)';
			}
		}
	});

// add tweens to timeline:
timeline.add(tween1, tween2, tween3);

// when clicking the button start the timeline/animation:
el.addEventListener('mousedown', function() {
	timeline.start();
});

.wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	text-align: center;
	height: 200px;
}

.my-button {
	background: transparent;
	border: none;
	outline: none;
	margin: 0;
	padding: 0;
	position: relative;
	text-align:center;
}
svg {
    top: 0;
    left: 0;
}
.send-icon {
	position: relative;
	font-size: 40px;
	color: rgba(0,0,0,0.3);
}

<link href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" rel="stylesheet"/>
<script src="http://netgon.net/mo.min.js"></script>
<div class="wrapper">
	<button class="my-button">
		<span class="send-icon fa fa-paper-plane"></span>
	</button>
</div>

Codepen

Answer 1

Working CodePen Here!

“父元素”el 必须是单个元素，因此实现这一点会很棘手，并且会创建复杂而困惑的代码。

因此我创建了一种不同的方法，该方法将创建一次动画，并在单击按钮时使用 tune() 设置动画位置，这将提高性能，因为动画对象中只有一个DOM。

而不是为每个父级/按钮创建三个动画。我用“my-button”类监听所有按钮，相应地设置动画的顶部和左侧值

$( ".my-button" ).on( "click", function() {
  aniPos = findCenter($(this));
  myAnimation1.tune({ top: aniPos.y, left: aniPos.x });
  myAnimation2.tune({ top: aniPos.y, left: aniPos.x });
  myTimeline.replay();

anipos 是用一个简单的函数计算的，该函数将返回一个具有 .x 和 .y 值的对象

function findCenter ($this) {
  var offset = $this.offset();
  var width = $this.width();
  var height = $this.height();
   IDs = {
    x: offset.left + (width / 2),
    y: offset.top + (height / 2)
  };
  console.log(offset);
  return IDs;
}

我还添加了一种方法来自动为单击的按钮设置动画。

 elSpan = this.querySelector('span');
 new mojs.Tween({
    duration : 900,
    onUpdate: function(progress) {
        if(progress > 0.3) {
            var scaleProgress = scaleCurve(progress);
            elSpan.style.WebkitTransform = elSpan.style.transform = 'scale3d(' + scaleProgress + ',' + scaleProgress + ',1)';
            elSpan.style.WebkitTransform = elSpan.style.color = '#2ecc71';
        } else {
            elSpan.style.WebkitTransform = elSpan.style.transform = 'scale3d(0,0,1)';
            elSpan.style.WebkitTransform = elSpan.style.color = 'rgba(0,0,0,0.3)';
        }
    }
}).play();

});

请注意，我的示例需要 JQuery 才能工作。

我使用了您提供的确切动画，但您可以更改它们，只要您不更改 X、Y、top 和左侧属性