下面是《React Native开发实战》中第四章复杂交互的部分笔记。

当今应用程序的标准：

  1. 所需的功能；
  2. 快捷的加载速度；
  3. 不错的感知性能；
  4. 用户界面还必须精致、流程；
  5. 包含元素动画、拖放等复杂的交互。

完整的动画库包含过渡动画、插值运算、时间轴管理、链式动画等特性。CSS中的动画分为两类：过渡（transition）和关键帧动画（keyframe animation）。

  1. CSS过渡是在两个不同状态之间进行插值实现动画效果，它包含一个开始状态和一个结束状态；
  2. CSS关键帧动画可进行更复杂的控制，使用关键帧的形式在开始和结束状态之间设置中间步骤。

CSS中的transition和animation动画是浏览器标准机制的一部分，可通过插值方式从一种CSS样式平滑过渡到另一种。

CSS过渡

CSS过渡提供了一种在CSS属性之间实现动画（更准确的说，是插值）的方式，通过transition属性来控制CSS过渡效果，在一段时间内，对选择器中包含的属性进行插值运算，从而实现动画效果。transition属性最多可接受4个特性：

  1. 需要进行动画处理的样式属性名称（如color或width）。如果省略该参数，所有可实现动画效果的属性都会被进行过渡处理；
  2. 动画的持续时间；
  3. 可选的时间方法用于控制动画的加速曲线（如ease-in和ease-out）；
  4. 可选的延迟时间（在动画开始之前）。

关键帧动画

基于过渡效果的动画只能控制两点之间的动画效果：开始状态和结束状态。所有中间状态都是由浏览器进行插值计算得到的。使用keyframe属性可以精确的控制动画序列中的中间状态，而不是让浏览器自动完成所有处理。

在一个单独的CSS块中通过@keyframe规则和名称来定义你的动画步骤，然后通过animation属性来引用预先定义的关键帧。animation属性接收关键帧的名称、动画持续时间和其他可选的配置（如重复次数）。

编程启动CSS过渡和动画

使用CSS选择器中的伪类可以实现最基本的交互场景，也可以使用JavaScript来更灵活的控制CSS过渡和关键帧动画的触发时机。这通常通过交换class的方式来实现：针对相同的元素创建两个独立的class，包含不同的属性值。HTML元素使用其中的一个class作为初始值，通过JavaScript用新的class类替代或覆盖需要动画的属性，从而触发CSS的动画效果。

推荐

十年踪迹的博客中有两篇动画相关的文章写的非常好，强烈推荐关于动画，你需要知道的和用65行代码实现JavaScript动画序列播放。