最近在看Canvas的一些动画实例当中，时常看到lerp()这个函数，一直以来并不知道这个函数起什么作用，有什么特性。今天花了一些时间，Google了一下，才知道这个函数是线性插值。那么线性插值是个什么鬼？他在一些程序中又起啥作用？这就是这篇文章要探讨和学习的。

在传统（手绘）一个高级动画或者动画艺术家都喜欢绘制关键帧来定义一个动画。现场传递给助理，一般是实习生或者初级艺术家在此基础上做一些其他性的工作，具体的说，他们就是在关键帧动画之间添加一些中间片段让动画看起来更流畅，更自然。还记得在小学的时候，老师告诉你电脑是笨蛋吗？电脑需要被告知一系列的确切步骤，他们才知道需要做什么。今天我们来看看这一序列的步骤或算法，帮助计算机绘制动画关键帧之间必要的中间画。

CSS动画性能非常好。虽然是简单的几个动画元素，如果你的代码没有让动画表现出其意义或者说使用页面变得更为复杂，网站的用户可能很快就会发现，并且有可能让用户觉得恶心。反而得不到相应的好评。在这篇文章中，我将介绍浏览器开发者工具的一些有用的功能，这些功能将能帮助你检查出你的CSS动画在渲染引擎下会发生些什么。这样，当你的动画看起来有点卡（帧率图有点波涛汹涌），你会找到地应的方法知道为什么为会这样以及如何解决它。

今天聊的内容是淘宝虚拟互动实验室的@渚薰大神 在2017年06月在北京GMTC大会上分享的一个主题。未能亲临听到相关的精彩分享，但还算是有幸的，在内部听到@渚薰大神 的分享。个人对Web动画这方面的课程非常的感兴趣，而且现在和团队一直在致力于手淘互动动效相关的研究。经历了从Gif、视频到CSS Animation的零至一的过程，并且致力于JavaScript驱动的动效开发，以及现在致力于研究的数据化驱动的动效。这样的一个过程是幸福的，而且也是具有挑战力的。我想很多喜欢动画的同学也对这样的一个课程会感兴趣，所以接下来，我们根据@渚薰大神分享的PPT的思路来聊聊渐进式动画解决方案。

JavaScript提供了动画原生API，被称为Web Animations API。在这篇文章中我们称之为WAAPI。MDN有详细的文档，而且@Dan Wilson写了一个系列的文章来介绍WAAPI。在这篇文章中，我们将比较WAAPI和CSS Animation之间的差异。

WAAPI 让我们能够构建动画并控制动画的播放。WAAPI 向开发者开放了浏览器的动画引擎，开发者可以通过 Javascript 接口来操作该引擎。该 API 是基于 CSS 动画和 CSS 过渡实现的，并且考量了未来可能会增加的动画效果。它是 Web 平台支持的实现动画的最高效的方式之一，在该方式下浏览器能够进行内部优化，因而不再需要所谓的黑科技、强制性的技巧和 requestAnimationFrame 方法。通过 WAAPI，我们可以很大程度上将交互动画从样式转移到 JS 上，将行为与表现分离。我们不再需要依赖很多的 DOM 技巧来控制动画的播放，比如直接赋值 CSS 属性或者切换类名。并且与简单、声明式的 CSS 不同，JS 允许我们动态地改变样式属性或播放选项。对需要构建自定义动画库和开发动画接口的开发者来说，WAAPI 可能是最酷的工具了。让我们来看看它都可以做什么。

Web Animation API非常的棒。除了能很好的支持平常动画之外。我发现还可以使用Promise、rAF和CSS Transition来重新创建它们，结果类似人体工程学。

现在的营销活动，用一张简单的图片去吸引消费者已经远远不够，必须要有能给消费者带来视觉冲击的东西，或者在动画过程中提供更好的引导部分。手淘的前端团队经历了从Gif、视频到CSS Animation的从0-1的过程，并致力于研究的数据化驱动的动效。大漠将为我们带来在手淘互动动效上的探索分享。

这是 JavaScript 框架 Vue.js 五篇教程的第五部分。在这个系列的最后一部分，我们将学习动画（如果你了解我，你知道这一章迟早会来）。这个系列教程并不是一个完整的用户手册，而是通过基础知识让你快速了解 Vuejs 以及它的用途。内置的 <transition> 和 <transition-group> 组件同时支持 CSS 和 JS 钩子。如果你熟悉 React ， transition 组件的概念对你并不陌生，因为在生命周期钩子中，它与 ReactCSSTransitionGroup 类似，但也有显著的差异 ，这让书呆子的我很兴奋。

CSS3的动画相关的基础的属性基本都涉猎过了，个人认为，其中最复杂的是d:path()路径变形动画，超过3D，而位移、轨迹、旋转、缩放、斜切什么的，相对简单一些，但作为非动画设计师而言，灵活的掌握这些基本的动画加以无穷无尽的变换，就已经能做出很多华丽丽的效果了，这篇呢，源于做一个练习时，AI的连续旋转复制功能，试着做了几个动效，简单、省时、高效，最主要的是用到CSS3的transform:rotate()旋转属性，辅以位移和缩放。