React 使用 JS 动画

上一篇博客讲了React官方提供的TransitionGroup动画库，它实现的原理是典型的CC3方式，现在再来了解一下如何使用脚本的方式来实现动画。要使用脚本的方式实现动，我们可以采用react-motion这个动画库，它是一个很优秀的动画库，并且采用的是脚本的方式来实现动画。(motion是运动的意思)

react-motion : https://github.com/chenglou/react-motion

1.安装react-motion动画库

yarn add react-motion
//ro  
npm install react-motion

2.计数器案例

该案例实现由数字 0 加到 1

1.从react-motion库中导入 spring 和 Motion

spring : 指定如何为目标值设置动画，例如，spring(10, {stiffness: 120, damping: 17})表示“动 画到数值10，弹簧刚度为120，阻尼为17”

Motion : 它是一个专门提供动画数据的组件，它接收一个函数作为子组件, 例如：

< motion >
   { value  => (   ) } 
</ Motion >

2.Motion组件属性：

defaultStyle ： 设置动画开始前默认数值

style ： 设置动画要到数值

import React, {Component} from 'react';
import {spring ,Motion} from 'react-motion';

export default class Main extends Component {
   
    render() {
        return (
            <div style={styles.content}>
                {
  /*由0 过渡到 1 ; stiffness是阻尼*/}
                <Motion defaultStyle={
  {x: 0}} style={
  {x: spring(1,{stiffness: 20})}}>
                    {
                        value =>
                            <div>
                                {value.x}
                            </div>
                    }
                </Motion>
            </div>