Skip to content

Latest commit

 

History

History
66 lines (50 loc) · 2.45 KB

16.CSS Animation vs Web Animations.md

File metadata and controls

66 lines (50 loc) · 2.45 KB

016.CSS Animations vs Web Animations API.md

CSS 动画和 WEB Animation API 优劣

  • 开发体系中类似的前端模板代替 html，css --> sass,scss,stylus,less 以及 css in js

WAAPI(Web Animation API)语法与 JQuery 类似，W3C 提供 web-animations/web-animation-js polyfill

var element = document.querySelector('.animate-me')
var animation = element.animate(keyframes, 1000 || options)
// 第一个参数是一个对象数组，每个对象表示动画中的一帧
var keyframes =[
{opacity: 0},
{opacity: 1}
];
// 第二个参数是duration，表示动画时间，支持第二个参数中传入配置项制定欢动方式或循环次数等；
var options = {
	interations: Infinity, // 动画重复次数，默认1
	interationStart: 0, // 制定动画开始节点， 默认0
	delay: 0, // 动画延迟开始毫秒， 默认0
	endDelay: 0, // 动画结束后延迟秒数， 默认0
	direction: 'alternate', // 动画方向，此参数表示交替
	duration: 700, // 动画持续时间
	fill: 'forward', // 是否在动画结束时回到元素开始动画前的状态
	easing: 'ease-out' // 缓懂方式 默认线性
}

  • 语法对应 css 中的 keyframe： 0% { opacity: 0; } 100% { opacity: 1; }

  • 在 dom 调用 animate 函数后返回 animation 对象，通过 element.getAnimation 方法获取 dom 上的 animation 对象，对动画进行操作，可以借助 promise 和 event

myAnimation.onfinish = function() {
	element.remove();
}
// promise
myAnimation.finished.then(() => {
	element.remove();
	})

WAAPI 优雅简洁

  • 在语法上更贴合 JS，对于复杂的动画逻辑，需要控制性强的接口，单借助 keyframe 只能使用字符串

低耦合

  • css 动画控制动画或过渡开始结束只能通过对应的 dom 事件来监听，通过ele.addEventListener('事件名', () => {}) 后面的回调函数操作，所以动画需要结合 CSS 和 JS 共同完成，使用 WAAPI 有 promise 和 event 两种方式和监听 dom 事件想对应，代码可维护性和完整性增强

兼容性和流畅度

  • WAAPI 常用方法兼容大部分现代浏览器，也可以使用 polyfill,流畅度和 CSS 一般，但是提供了性能优化方案

summary

  • CSS 动画能做到的 WAAPI 同样可以实现，但是浏览器支持问题，还是需要配合 polyfill 使用，CSS 动画同样存在兼容性问题，现在新 PAI 接受度不够，所以

现有的规范和实现看起来更像是一项伟大的起点~