web 动效四大才子主要指下面这 4 个:
CSS3 动画
- Web animation
- SVG SMIL
Canvas 等硬核绘制
我们一个一个简单了解下.
一, CSS3 动画
在 CSS 中指定关键帧实现动画效果, 例如一个常用的淡出效果:
- .fadeIn {
- animation: fadeIn .2s both;
- }
- @keyframes fadeIn {
- from { opacity: 0; }
- to { opacity: 1; }
- }
基本用法想必大家见得多用得也多, 不展开, 不过可以提一提一些不常用的点:
CSS3 动画是可以随时暂停的, 真暂停, 纹丝不动的那种, 使用这段 CSS 声明即可:
animation-play-state: paused;
CSS3 动画的 animation-timing-function 属性值除了支持 cubic-bezier() 功能符, 还支持 steps() 功能符, 可以实现很多小而美的逐帧动画效果. 例如 Twitter 的 Like 的效果:
把所有序列帧图片合在一张图片上, 然后逐帧显示对应画面, 常作为背景图, 然后控制 background-position 实现效果.
demo
对于复杂动画, 我们可以对动画进行分解, 通过标签嵌套, 分别应用在祖先元素和后代元素上, 例如下图这个抛物线动画效果 https://www.zhangxinxu.com/wordpress/?p=7934 :
二, Web animation
指 Web animation API https://www.zhangxinxu.com/wordpress/?p=7438 , 简言之就是把 CSS3 实现的 animation 动画变成由 JS 代码实现. 语法如下:
var myAnimation = element.animate(keyframes, options);
其中 keyframes 对应 CSS3 中 @keyframes 中的声明块, options 对应 animation-* 属性及属性值. myAnimation 为动画的 Animation 对象, 包含多种方法. 例如我们实现一个透明度不断变化的动画, 可以这样:
- element.animate([
- { opacity: 0 },
- { opacity: 1, offset: 0.4 },
- { opacity: 0 }
- ], {
- duration: 3000,
- delay: 0,
- fill: 'forwards',
- easing: 'steps(8, end)',
- iterations: Infinity
- });
效果如下图:
Web animation API 特别使用用在动画参数是动态变化的场景, 目前还有一点的兼容性问题, 可以试试下面的 polyfill:
三, SVG SMIL
SVG SMIL https://www.zhangxinxu.com/wordpress/?p=4333 指 SVG 同步多媒体集成语言, 就是直接通过 xml 标签, 就可以在 Web 中呈现各类动画效果. 举个例子, 下面代码:
- <svg width="320" height="320">
- <g>
- <text font-family="microsoft yahei" font-size="120" y="160" x="160"> 马 </text>
- <animateTransform attributeName="transform" begin="0s" dur="10s" type="rotate" from="0 160 160" to="360 160 160" repeatCount="indefinite"/>
- </g>
- </svg>
效果 https://www.zhangxinxu.com/study/201408/horse.svg 如下截屏 GIF:
SMIL 由下面 5 类元素构成:
直接定位, 可延时.
基础过渡效果.
颜色动画, 比较鸡肋, 使用上面元素代替.
transform 变换动画.
按照特定路径运动.
甚至支持添加点击行为触发动画执行:
- <svg id="svg" width="320" height="200">
- <circle id="circle" cx="100" cy="100" r="50"></circle>
- <text font-family="microsoft yahei" font-size="120" y="160" x="160"> 马
- <animate attributeName="x" to="60" begin="circle.click" dur="3s" />
- </text>
- </svg>
若有兴趣了解可以访问这里 https://www.zhangxinxu.com/wordpress/?p=4333 .
四, Canvas 等硬核绘制
以 JS 为引擎的刷新与绘制. 这类动画效果通过定时器不断改变图形元素等位置 / 透明度 / 变换等视觉特性来实现. 包括使用 JS 改变 DOM, 使用 JS 改变 SVG 属性值, 以及使用 JS 对 Canvas 刷新绘制.
使用 JS 更底层方法实现动画效果需要有下面这些知识:
一定的 JS 基本功
复杂动效往往都会有较多的循环遍历和数据处理.
熟悉相关技术领域 API
如何画一个圆, 如何改变位置等.
知道一些动画算法
A 到 B 如何运动, 可以借助 Tween.JS https://github.com/zhangxinxu/Tween .
掌握常见的曲线函数
图形到本质是数学, 运动的本质也是数学. 这里有篇关于三角函数不错的文章.
了解一些上层框架
Snap.svg, greensock, spritejs.3D 领域: threeJS,pixi 等.
来源: https://juejin.im/post/5bc58bd9e51d450e721108a4