文章来源于网络收集而来,版权归原创者所有,如有侵权请及时联系!
回调函数/事件函数
update
动画开始播放后,每帧都会触发此回调。
Type | Parameters | Info |
Function | animation | 返回当前动画对象 |
var updates = 0;
anime({
targets: '.update-demo .el',
translateX: 270,
delay: 1000,
direction: 'alternate',
loop: 3,
easing: 'easeInOutCirc',
update: function(anim) {
updates++;
progressLogEl.value = 'progress : '+Math.round(anim.progress)+'%';
updateLogEl.value = 'updates : '+updates;
}
});
begin/complete事件
当动画开始播放时,begin()
回调被触发一次。
动画完成后,会触发一次complete()
回调。
如果动画的持续时间为0,则begin()
和complete()
都会被调用。
Type | Parameters | Info |
Function | animation | 返回当前动画对象 |
anime({
targets: '.begin-complete-demo .el',
translateX: 240,
delay: 1000,
easing: 'easeInOutCirc',
update: function(anim) {
progressLogEl.value = 'progress : ' + Math.round(anim.progress) + '%';
beginLogEl.value = 'began : ' + anim.began;
completeLogEl.value = 'completed : ' + anim.completed;
},
begin: function(anim) {
beginLogEl.value = 'began : ' + anim.began;
},
complete: function(anim) {
completeLogEl.value = 'completed : ' + anim.completed;
}
});
loopBegin / loopComplete事件
每次循环开始时都会触发一次loopBegin()
回调。
每次循环结束时,就会触发一次loopComplete()
回调函数。
Type | Parameters | Info |
Function | animation | 返回当前动画对象 |
var loopBegan = 0;
var loopCompleted = 0;
anime({
targets: '.loopBegin-loopComplete-demo .el',
translateX: 240,
loop: true,
direction: 'alternate',
easing: 'easeInOutCirc',
loopBegin: function(anim) {
loopBegan++;
beginLogEl.value = 'loop began : ' + loopBegan;
},
loopComplete: function(anim) {
loopCompleted++;
completeLogEl.value = 'loop completed : ' + loopCompleted;
}
});
change事件
在动画的delay和endDelay之间的每个帧上触发此回调。
Type | Parameters | Info |
Function | animation | 返回当前动画对象 |
var changes = 0;
anime({
targets: '.change-demo .el',
translateX: 270,
delay: 1000,
endDelay: 1000,
direction: 'alternate',
loop: true,
easing: 'easeInOutCirc',
update: function(anim) {
progressLogEl.value = 'progress : '+Math.round(anim.progress)+'%';
},
change: function() {
changes++;
changeLogEl.value = 'changes : ' + changes;
}
});
changeBegin / changeComplete事件
每次动画改变开始时都会触发changeBegin()
回调
每次动画改变结束时都会触发changeComplete()
回调
动画方向将影响触发changeBegin()
和changeComplete()
的顺序
Type | Parameters | Info |
Function | animation | 返回当前动画对象 |
var changeBegan = 0;
var changeCompleted = 0;
anime({
targets: '.changeBegin-chnageComplete-demo .el',
translateX: 240,
delay: 1000,
endDelay: 1000,
loop: true,
direction: 'alternate',
easing: 'easeInOutCirc',
update: function(anim) {
progressLogEl.value = 'progress : '+Math.round(anim.progress)+'%';
},
changeBegin: function(anim) {
changeBegan++;
beginLogEl.value = 'change began : ' + changeBegan;
},
changeComplete: function(anim) {
changeCompleted++;
completeLogEl.value = 'change completed : ' + changeCompleted;
}
});
promise
动画完成后,每个动画实例都会返回一个完成的promise。
animation.finished.then(function() {
// Do things...
});
Promises are not suported in IE < 11.
var progressLogEl = document.querySelector('.promise-demo .progress-log');
var promiseEl = document.querySelector('.promise-demo .el');
var finishedLogEl = document.querySelector('.promise-demo .finished-log');
var demoPromiseResetTimeout;
function logFinished() {
anime.set(finishedLogEl, {value: 'Promise resolved'});
anime.set(promiseEl, {backgroundColor: '#18FF92'});
}
var animation = anime.timeline({
targets: promiseEl,
delay: 400,
duration: 500,
endDelay: 400,
easing: 'easeInOutSine',
update: function(anim) {
progressLogEl.value = 'progress : '+Math.round(anim.progress)+'%';
}
}).add({
translateX: 250
}).add({
scale: 2
}).add({
translateX: 0
});
animation.finished.then(logFinished);
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论