如果我想控制一个简单的动画,可以将其设置为header
变量,然后执行header.play()
以下操作:
let header= element.animate({
transform: ['scale(1)', 'scale(1.5)']
}, {
duration: 1000,
fill: 'both'
});
header.play();
但是当我链接它以便使用一起发生不同的动画时composite
,由于它有多个定义,所以将不起作用:
element.animate({
transform: ['scale(1)', 'scale(1.5)']
}, {
duration: 1000,
fill: 'both'
});
element.animate({
transform: ['rotate(0deg)', 'rotate(180deg)']
}, {
duration: 1500,
fill: 'both',
composite: 'add'
});
我将如何控制这些共同使用的play()
,pause()
?
您可以使用DOM事件(甚至可以保证)链接两个单独的动画:
const firstPart = element.animate({
transform: ['scale(1)', 'scale(1.5)']
}, {
duration: 1000,
fill: 'both'
});
firstPart.finished.then(() => {
const secondPart = element.animate({
transform: ['rotate(0deg)', 'rotate(180deg)']
}, {
duration: 1500,
fill: 'both'
});
return secondPart.finished;
});
或者,您可以创建具有多个关键帧的单个动画:
element.animate([
{ offset: 0, transform: 'scale(1)' },
{ offset: .6, transform: 'scale(1.5) rotate(0deg)' }
{ offset: 1, transform: 'scale(1.5) rotate(180deg)' }
], {
duration: 2500,
fill: 'both',
composite: 'add'
});
如果需要,关键帧解决方案还可以同时为两个属性设置动画。但是,单独设置两个transform
s的动画有点复杂。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句