动效开发
技术能力
- Javascript
- Css
- SVG
- Canvas
我们需要把重心放在CSS3动画上面，因为当红小生就是CSS3结合JavaScript
CSS3
transition过度动画
如果没有transition元素，元素之间的状态变化过程就会显得生硬而突兀
animation动画
动画基本框架
(animation:动画名称 动画时长 动画运动速度 延迟时间 执行次数 往返动画)
div{
animation:name 1s linear 1s infinite;
}
@keyframes name {
from{
//CODE
}
to {
//CODE
}
}
学习它之前需要掌握两个基本知识点
- 关键帧
- animation属性
关键帧
@keyframes用来定义动画的具体内容
- 叫什么名字？
- 动画开始，中间状态，结束 做哪些动作
- 每个状态出现在动画过程的哪个时间点
animation属性
- 指定元素用什么动画？（animation-name）
- 动画的持续时间是多少？（animation-duration）
- 浏览器用什么样的时间轴函数来执行该动画？（animation-timing-function）
- 是否需要延时执行该动画？(animation-delay)
- 动画循环执行的次数是多少？（animation-iteration-count）
- 动画执行的方向是什么？（animation-direction）
- 动画填充模式是什么？（animation-fill-mode）
- none 不做任何改变
- backwards 等待状态的时候显示动画第一帧的样式
- forwards 结束状态的时候显示动画的最后一帧的样式
- both forwards+backwards
- 动画执行状态是运行还是暂停？（animation-play-state）
3D
很多时候，仅仅将元素进行二维层面的变换并不能完美表现.3D相对于2D坐标系多了Z轴
- 透视的概念理解
perspective属性 - 空间变换体系
transform-style - Z 轴位移
translateZ
what is the perspective？
n. 观点；远景；透视图
超越平面的限制在于transform-style: preserve-3d这个属性设置,默认为flat。这个属性的设置旨在告诉子元素需要遵循怎样的空间体系规则。这个属性不能继承，因此只要有子元素需要设置空间体系规则，就得在父元素声明这个属性
动画的分类
- 补间动画
- 逐帧动画
补间动画
人为设定动画的关键状态（也就是关键帧），而关键帧之间的过渡过程则由计算机处理渲染的动画处理形式。
逐帧动画
原理即将每帧不同的图像连续播放，从而产生动画效果
- 不同的图像
- 连续播放
举例
- GIF
- Jacascript控制动画播放
- Canvas
将动画帧合并成雪碧图，放到 background-image 中，通过 JavaScript 改变 background-position 的值来实现动画的播放。
使用 JavaScript 实现逐帧动画，兼容性佳，且交互灵活
