冷门API，JS控制css动画——前端动画的一种方式

我也是最近才知道已经可以用 JS 来控制 CSS 动画的

参考API

该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来完成。