您可以在百度里搜索“深入浅出React和Redux 艾草文学(www.321553.xyz)”查找最新章节！

　　10.3.1 React-Motion的设计原则

　　要了解react-motion，先要了解和CSS3方式不同的两个观点。

　　首先，大部分情况下，友好的API比性能更重要。这并不是说性能不重要，而是在大部分情况下，性能并不会因为采用了脚本方式不用CSS3方式而引起显著的性能下降。这时候，只要性能足够好，一个友好的API会比难以调试的CSS3更让开发者愿意接受，也更利于提高开发效率。

　　其次，不要以时间和速度曲线来定义动画过程，缺点在前面的章节已经介绍过，react-motion提出用另外两个参数来定义动画，一个是刚度（stiffness），另一个是阻尼（damping），当然，为了方便开发者使用，react-motion提供了一组预设的这两个参数的组合。

　　在第6章我们介绍过“以函数为子组件”的模式，在react-motion中就大量使用了这样的模式，react-motion提供的组件，都预期接受一个函数作为子组件。

　　我们来看一个例子，这个例子显示一个倒计时，从100倒数为0，可以看得出来，模式和第6章中我们创造的倒计时组件CountDown如出一辙，代码如下：

　　defaultStyle={{x:100}}

　　style={

　　{x: spring(0, {stiffness: 100, damping: 100})}

　　}>

　　{value => {Math.ceil(value.x)}}

　　Motion组件的defaultStyle属性指定了一个初始值，style属性指定了目标值，然后就通过刚性参数100和阻尼100的节奏，把初始值变为目标值，期间不断调用作为子组件的函数，完成动画的过程。

　　在第6章的CountDown组件中，我们使用的是setInterval，我们已经知道setInterval方法并不是一个很好的选择。在Motion中，利用的是requestAnimationFrame函数来触发子组件函数。

　　很明显，Motion其实并不直接参与动画的绘制，它只是提供参数。具体的绘制过程，由作为子组件的绘制函数来完成，很明显这种“以函数为子组件”的模式带来了很大的灵活度。

　　Motion专注于提供动画的数据，子组件函数专注于绘制过程，这又是一个“每个组件只专注做一件事情”的例子。

　　只是有一点看起来可能有点奇怪，虽然Motion的两个属性都有style字样，但其实完全可能和style无关。在上面的例子中，传递到子组件的函数参数并没有用来当style，而是直接作为内容渲染出来，这一点读者只要接受style在这里代表变化的参数这个概念就好了。 深入浅出React和Redux