我也是最近才知道已经可以用 JS 来控制 CSS 动画的
该API为实验性技术,可能出现严重的兼容性问题,请勿使用在正式项目中
简单的来讲就是js可以提供Animation接口来获取DOM元素中的动画对象,可以做一些简单的控制
又或者是创建一个Animation对象,绑定到DOM元素上,让他执行。
1.创建动画
var animation = new Animation(effect, timeline);
具体参数是
effect 可选
将KeyframeEffect (en-US)对象分配给动画。(在将来,其他类型的效果,如 SequenceEffects 或 GroupEffects 是可能被实现的,但现在,唯一的效果是 KeyframeEffect。)
timeline 可选
指定与动画关联的时间轴。(目前唯一可用的时间轴类型是DocumentTimeline (en-US),但在将来我会有与手势或滚动相关联的时间轴。)默认为Document.timeline。这也可以设置为 null。
举个使用的例子就是这样的:
const backAnimationEffect = new KeyframeEffect(
element, // element to animate
[{
position: "fixed",
width: animationW + "px",
height: animationH + "px",
top: animationTop + 'px',
left: animationLeft + 'px',
flexDirection: "column",
easing: 'cubic-bezier(.61, -0.2, .51, 1.4)',
}, // keyframe
{
position: "fixed",
left: '0px',
width: w + "px",
top: top + "px",
left: uni.upx2px(24) + 'px',
height: h + "px",
easing: 'cubic-bezier(.61, -0.2, .51, 1.4)',
flexDirection: "row",
}, // keyframe
], {
duration: 710,
fill: "both"
} // keyframe options
);
backAnimation = new Animation(
backAnimationEffect,
document.timeline
);
首先创建KeyframeEffect 这个是主要的,第一个参数为Dom元素,第二个便是我们CSS的关键帧动画的写法了,主要这个元素便拥有了我们动态创建的动画,backAnimation
提供了控制他的方法
拥有了 backAnimation ,我们可以直接对其进行各种操作,如:
pause
- 暂停动画play
- 播放动画cancel
- 取消动画状态reverse
- 反向执行动画到开始状态finish
- 直接跳到动画结束阶段
我们可以借助这个,完成一些交互性强而css很难完成的动画,靠js来完成。