PWA(Progressive Web Animation),这里要强调的此P非彼P(Progressive Web Apps),今天我们谈谈渐进式动画。我们分以下方式引入话题。
- 1.认识动画
- 2.操作动画
- 3.管理动画
- 4.制作动画
认识动画
动画是指由许多帧静止的画面，以一定的速度（比如每秒24张）连续播放时，肉眼因视觉残象产生错觉，而误以为画面活动的作品。为了得到活动的画面，第个画面之间都会有细微的改变。
看图说话：
图形A状态（一个正方形）经过时间的变换到了图形B的状态（一个圆形）。从正方形变成圆形这样的一个过程就是一个动画效果（动效）。当然为了制作这样的一个动画，会添加控制动画的一些手段，比如控制持续时间、延迟时间、缓动函数、动画次数和方向之类的等。当然根据不同的制作动画的方式，这些控制动画的参数或者说手段吧，其方法不一样。这里暂且不深入的介绍。这里我们引入一个概念插值。
所谓插值动画就是在初始状态到终止状态的过程中，通过插值计算的方法插入在关键帧之间，将状态较为平滑的过度。继续看图说话：
上图就在说明怎么进行插值计算的。下面就是一个通过在关键帧之间进行插值计算的图：
怎么操作动画
目前前端操作动画的技术有以下几种：
1.CSS Animation
2.SVG Animation
3.JavaScript-Driven Animation
对于这种制作动画的方式不做过多的评介。但随着CSS技术的发展，使用纯CSS就可以很好的实现Animation。在CSS中主要是使用@keyframes和animation-*属性来控制动画。CSS Animation虽然实现一个动效较为容易，成本也较低，但对于一些复杂的动画场景，他就变得非常的鸡肋。除此之外,SVG Animation也越来越多在实际场景中使用。关于SVG动画资源点这个：SVG动画
JavaScript驱动动画。最简单的就是W3C规范提供的Web Animation API。其原理非常类似于CSS Animation，具有@keyframes的概念，也具有类似于animation-*属性样的方法，用于控制动画。同时还提供了对应的Timeline的概念，而Timeline又是动画中一个至关重要的一个概念。
除了上述制作动画之外，我们还可以采用Canvas和WebGL。现在活动页面比较酷炫的大多采用canvas和webGL。
如何管理动画
制作出来动画，我们可以将整体的动画细分出来，那么怎么管理动画变得就很重要了。我们可以把整个动画当作一个舞台剧（一个故事），故事中有很多个片段（也就是我们的动画分场景），而串起整个动画是由时间轴来控制，常常称之为Timeline。
这里提出两种形式的动画：
- 流式动画
- 交互式动画
所谓流式动画：就是像电影那样按既定顺序一直播放，不会停，也不会发生改变的动画。你在电视上看到的所有动画片都可以说是流式动画。流式动画最显著的特点就是你无法对流式动画施加影响，比如你无法期待单击流式动画中的某个器物（动画元素）而指望因此而发生什么事情。其中纯css的动画基本上属于流式的范畴。
所谓交互式动画：就是通过命令或者事件驱动的动画表现。
对于javascript来说，通过JS驱动的方式来控制动画,相对容易一些，主要是管理动画的时间就OK了。只要我们记录好动画开始时间，持续时间，结束时间。以及什么时间点怎么开启相关动画。
如何制作动画
先说说我司开发过程，可能大部分公司都是这样的，设计稿PSD出了，然后设计师会口头给你说动画的描述，你就开始联想，好像是这个样子，然后就是前端开发了，接着就是无数次的调时间，调效果，最后花了好多时间都在纠结这个时间点，这个效果。可能这是最痛苦的事了。
最近看到一个分享关于动画相关的制作，这也是airbnb采用的一个制作方式，就是我们使用After Effects CC 制作动画，然后利用bodymovin将动画转出来。bodymovin有相关的动画监听事件，我们可以通过监听执行相关操作。具体参考bodymovin
