本文主要是介绍java动效_Web 动效四大才子简述，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
本文做者：张鑫旭
原创声明：本文为阅文前端团队 YFE 成员出品，请尊重原创，转载请联系公众号 ( id: yuewen_YFE ) 获取受权，并注明做者、出处和连接。javascript
Web 动效四大才子主要指下面这 4 个：css
CSS3 动画
Web animation
SVG SMIL
Canvas 等硬核绘制
咱们一个一个简单了解下。html
1、CSS3 动画
在 CSS 中指定关键帧实现动画效果，例如一个经常使用的淡出效果：前端
.fadeIn {
animation: fadeIn .2s both;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
复制代码
基本用法想必你们见得多用得也多，不展开，不过能够提一提一些不经常使用的点：java
CSS3 动画是能够随时暂停的，真暂停，纹丝不动的那种，使用这段CSS声明便可：css3 animation-play-state: paused;
复制代码
CSS3 动画的 animation-timing-function 属性值除了支持 cubic-bezier() 功能符，还支持 steps() 功能符，能够实现不少小而美的逐帧动画效果。例如 twitter 的 Like 的效果：git
把全部序列帧图片合在一张图片上，而后逐帧显示对应画面，常做为背景图，而后控制 background-position 实现效果。github
对于复杂动画，咱们能够对动画进行分解，经过标签嵌套，分别应用在祖先元素和后代元素上，例以下图这个抛物线动画效果：算法
2、Web animation
指 Web animation API，简言之就是把 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：web-animations-js
3、SVG SMIL
SVG SMIL 指 SVG 同步多媒体集成语言，就是直接经过 XML 标签，就能够在 web 中呈现各种动画效果。举个例子，下面代码：
马
复制代码
效果以下截屏 GIF：
SMIL 由下面 5 类元素构成：
直接定位，可延时。
基础过渡效果。
颜色动画，比较鸡肋，使用上面元素代替。
transform 变换动画。
按照特定路径运动。
甚至支持添加点击行为触发动画执行：
马
复制代码
如有兴趣了解能够访问这里。
4、Canvas 等硬核绘制
以 JS 为引擎的刷新与绘制。这类动画效果经过定时器不断改变图形元素等位置／透明度／变换等视觉特性来实现。 包括使用 JS 改变 DOM，使用 JS 改变 SVG 属性值，以及使用 JS 对 Canvas 刷新绘制。
使用 JS 更底层方法实现动画效果须要有下面这些知识：
必定的 JS 基本功
复杂动效每每都会有较多的循环遍历和数据处理。
熟悉相关技术领域API
如何画一个圆，如何改变位置等。
知道一些动画算法
A 到 B 如何运动，能够借助 Tween.js。
掌握常见的曲线函数
图形到本质是数学，运动的本质也是数学。这里有篇关于三角函数不错的文章。
了解一些上层框架
Snap.svg, greensock, spritejs。3D 领域：threeJS，pixi 等。
查看更多分享，请关注阅文集团前端团队公众号:
这篇关于java动效_Web 动效四大才子简述的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
