动画的历史
动画的出现最早可以追溯到五千年：以下是在伊朗沙赫尔伊苏赫塔发现的画作，这是艺术家试图通过动画来表现图形运动的最早例子之一。
这是五张山羊走向一棵树、爬上它、吃掉树叶然后又下来的照片。
通过现代动画技术将五张图拼接起来循环播放，一个山羊吃草的动画就实现了。
计算机动画原理
计算机图形学
:
计算机视觉的基础，主要关注数字合成与操作视觉的图形内容，涵盖点、线、面、体、场的数学构造方法。
计算机动画
:
又称计算机绘图，是通过使用计算机制作动画的技术。它是计算机图形学和动画的子领域，，主要包含2D、3D动画。
无论动画多么简单，始终需要定义两个基本状态，即【开始状态】和【结束状态】。没有它们，我们将无法定义插值状态，从而填补了两者之间的空白
动画的一些术语
:
【帧】
：连续变换的多张画面，其中的每一幅画面都是一帧。
【帧率】
：用于度量一定时间段内的帧数，通常的测量单位是FPS (frameper second)
【帧率与人眼】
：一般每秒10-12帧人 会认为画面是连贯的，这个现象称为视觉暂留。对于一些电脑动画和游戏来说低于30FPS会感受到明显卡顿，目前主流的屏幕、显卡输出为60FPS,效果会明显更流畅。
【补间动画(关键帧动画)】
:
传统动画，主画师绘制关键帧，交给清稿部门，清稿部门的补间动画师补充关键帧进行交付。
类比到这里，补间动画师由浏览器来担任，如keyframe, transition
【逐帧动画(Frame By Frame)】
：
从词语来说意味着全片每一 帧逐帧都是纯手绘。
如steps实现雪碧图
在2维计算机动画中，运动物体常被称为
精灵
。一个精灵是一个有位置的图像。每个帧之间的精灵的位置稍有改变，使得精灵看起来像在动
前端动画分类
CSS动画
CSS的形体变换-Transform API
只能转换由盒模型定位的元素。根据经验，如果元素具有display: block,则由盒模型定位元素。
<transform-function> = <matrix()> | <translate()> | <translateX()> | translateY()> | <scale()> | <scaleX()>| <scaleY()> |<rotate()> | <skew()> | <skewX()> | <skewY()> | <matrix3d()> | <translate3d()> |<translateZ()> | <scale3d()> <scaleZ()> | <rotate3d()> | <rotateX()> | <rotateY()> | <rotateZ()>| <perspective()>
Translate (移动)
该变换由二维向量构成。它的坐标定义了元素在每个方向，上移动了多少
transform: translate(200px);
scale (缩放)
transform: scale(0.5)
rotate (旋转)
transform: rotate(30deg)
skew (倾斜)
transform: skew(20deg, 10deg)
参数表示倾斜角度，单位deg
一个参数时:表示水平方向的倾斜角度;
两个参数时：第一个参 数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度。
CSS实现补间动画(Transition API、Keyframe)
Transition API（过渡动画)
dom加载完成或class发生变化时触发。
div {
transition: <property> <duration> <timing-function> <delay> ;
transition-property
指定哪个或哪些CSS属性用于过渡。
transition-duration
指定过渡的时长。
transition-timing -function
指定一个函数，定义属性值怎么变化。
transition-delay
指定延迟，即属性开始变化时与过渡开始发生时之间的时长。
keyframe实现动画
关键帧@keyframes at-rule 规则通过在动画序列中定义关键帧(或waypoints)的样式来控制CSS动画序列中的中间步骤。
和转换transition相比，关键帧keyframes可以控制动画序列的中间步骤。
@keyframes slidein {
from {
transform: translateX(0%);
transform: translateX(100%);
CSS动画总结
优点：简单、高效声明式的不依赖于主线程，部分采用硬件加速(GPU)，简单的控制keyframe animation播放和暂停。
缺点：不能动态修改或定义动画内容，不同的动画无法实现同步，多个动画彼此无法堆叠。
适用场景：简单的h5活动/宣传页。
推荐库：animation.css、shake.css等 。
开始你的第一个动画
CSS之详解2D转换
SVG实现动画
svg是基于XML的矢量图形描述语言，它可以与CSS和JS较好的配合，实现svg动画通常有三种方式: SMIL、JS、CSS
Synchronized Multimedia Integration Language (同步多媒体集成语言)
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="100">
<title>SVG SMIL Animate with Path</title>
<rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" />
<circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1">
<animateMotion
path="M 0 0 H 300 Z"
dur="3s" repeatCount="indefinite" />
</circle>
结论:兼容性不理想，这里不过多讨论，当然有polyfill的方案
使用JS来操作SVG动画
这个自不必多说，网上已经有很多现成的类库。
老牌的Snap.svg以及anime.js,都能让我们快速制作SVG动画。
当然，除了这些类库，HTML本身也有原生的Web Animation实现。
使用Web Animation也能让我们方便快捷地制作动画。
文字溶解动画
Path实现写字动画
【JS笔画的原理】
SVG 使用stroke-dashoffset和stroke-dashoffset实现笔画效果
stroke-dashoffset、stroke-dasharray配合使用实现笔画效果。
stroke-dasharray : <length> | <percentage> ( 需要填充的路径)
stroke-dashoffset: <length> | <percentage> (dash模式开始位置的偏移量)
path路径- d属性(路径描述)
*大写字母跟随的是绝对坐标x,y,小写为相对坐标dx,dy
M/m绘制起始点。
L/I绘制一条线段。
C/c为绘制贝塞尔曲线。
Z/z将当前点与起始点用直线连接。
计算path的长度 — path.getTotallength();
计算path上某个点的坐标 — path.getPointAtLength(lengthNumber)
CSS操作svg
这里主要是使用animation, transform, transition来实现动画，它比JS更加简单方便。
JS实现动画
JS可以实现复杂的动画，也可以操作canvas动画API上进行绘制。
如何做选择
CSS优缺点
浏览器会对CSS3动画做一些优化，导致CSS3动画性能上稍有优势(新建一个图层来跑动画)
CSS3动画的代码相对简单
动画控制上不够灵活，CSS3动画只能暂停，不能在动画中寻找一个特定的时间点。
兼容性不佳,部分动画无法实现(视差效果、滚动动画)
CSS很难做到两个以上的状态转化（要么使用关键帧，要么需要多个动画延时触发，再想到要对动画循环播放或暂停倒序等，复杂度极高）
JS优缺点
使用灵活，同样在定义一个动画的keyframe序列时，可以根据不同的条件调节若干参数（JS动画函数）改变动画方式。(CSS会 有非常多的代码冗余)
对比与CSS的keyframe粒度更粗，css本身的时间函数是有限的，这块JS都可做弥补。
JavaScript动画控制能力很强, 可以在动画播放过程中对动画进行控制：开始、暂停、回放、终止、取消都是可以做到的
【JS缺点】
使用到JS运行时，调优方面不如CSS简单，CSS调优方式固定。
对于性能和兼容性较差的浏览器，CSS可以做到优雅降级，而JS需要额外代码兼容。
JS动画代码复杂度高于CSS动画
svg优缺点
【svg优点】
通过矢量元素实现动画，不同的屏幕下均可获得较好的清晰度。
可以实现一些特殊的效果:描字，形变，墨水扩散等。
【svg缺点】
使用方式较为复杂，过多使用可能会带来性能问题。
简单切换CSS/复杂控制JS/特定场景SVG
当您为UI元素采用较小的独立状态时，只是简单的状态切换，不需要中间过程控制，使用CSS。
在需要对动画进行大量控制时，使用JavaScript.
在特定的场景下可以使用SVG,可以使用CSS或JS去操作SVG变化。
字节青训营
本节课的讲师：字节电商前端—蒋翔
如以上有错误的地方，请在评论区中指出！
如果有收获的话，就留个赞鼓励一下吧！😘
- 1780
-
VIP.5 如鱼得水
前端开发工具人 @ 卷起来~~
