js 创建keyframe_关键帧(keyframes) - Anime.js 中文文档

动画关键帧

动画关键帧是使用keyframes属性中的数组定义的。

如果关键帧内没有指定duration(持续时间)，则每个关键帧的持续时间将等于动画总持续时间除以关键帧数。

Type

Example

Array

[

{value: 100, easing: 'easeOutExpo'},

{value: 200, delay: 500},

{value: 300, duration: 1000}

]

anime({

targets: '.animation-keyframes-demo .el',

keyframes: [

{translateY: -40},

{translateX: 250},

{translateY: 40},

{translateX: 0},

{translateY: 0}

],

duration: 4000,

easing: 'easeOutElastic(1, .8)',

loop: true

});

属性关键帧

与动画关键帧类似，属性关键帧是使用属性对象的Array定义的。 属性关键帧允许重叠动画，因为每个属性都有自己的关键帧数组。

如果关键帧内没有指定duration(持续时间)，则每个关键帧的持续时间将等于动画总持续时间除以关键帧数。

Type

Example

Array

[

{value: 100, easing: 'easeOutExpo'},

{value: 200, delay: 500},

{value: 300, duration: 1000}

]

anime({

targets: '.property-keyframes-demo .el',

translateX: [

{ value: 250, duration: 1000, delay: 500 },

{ value: 0, duration: 1000, delay: 500 }

],

translateY: [

{ value: -40, duration: 500 },

{ value: 40, duration: 500, delay: 1000 },

{ value: 0, duration: 500, delay: 1000 }

],

scaleX: [

{ value: 4, duration: 100, delay: 500, easing: 'easeOutExpo' },

{ value: 1, duration: 900 },

{ value: 4, duration: 100, delay: 500, easing: 'easeOutExpo' },

{ value: 1, duration: 900 }

],

scaleY: [

{ value: [1.75, 1], duration: 500 },

{ value: 2, duration: 50, delay: 1000, easing: 'easeOutExpo' },

{ value: 1, duration: 450 },

{ value: 1.75, duration: 50, delay: 1000, easing: 'easeOutExpo' },

{ value: 1, duration: 450 }

],

easing: 'easeOutElastic(1, .8)',

loop: true

});