React-Native项目中使用动画-Animated

来源：互联网发布：java编程用笔记本电脑编辑：程序博客网时间：2024/06/05 18:11

动画 Animated

RN中的动画在某种程度上可以理解为“属性动画”，也就是以某种过渡方式改变组件样式属性值（如组件样式的left值），驱动组件以动画的形式发生变化（位移、形变或转动）

可动画化的组件：

View (Animated.View)
Text (Animated.Text)
Image (Animated.Image)
使用createAnimatedComponent自定义

三种动画类型：

spring 基础的单次弹跳物理模型
decay 以一个初始速度开始并且按一定的衰减比逐渐减慢直至停止
timing 时间和变量线性变化

1.关联属性的初始化

关联属性指的是动画过程中对应变化的属性，这个属性的类型是Animated.Value，可以通过new Animated.Value()、new Animated.ValueXY()（处理2D动画）等方法初始化，如下：

class PlaygroundContainer extends Component {    constructor(props) {        super(props);        this.state = {            left1: new Animated.Value(0),            rotation2: new Animated.Value(0),            pan: new Animated.Value({x:0, y:0})        }    }    ...}

2.与组件关联

用spring实现的动画

import loadingImage from '../../assets/0.gif'...class PlaygroundContainer extends Component {    constructor(props) {        super(props);        this.state = {            left1: new Animated.Value(0),        }    }    componentDidMount() {        Animated.spring(this.state.left1, {            toValue: 100,        //属性目标值            friction: 1,        //摩擦力 （越小 振幅越大）            tension: 100,        //拉力         }).start();            //执行动画    }    render(){        return (            ...            <Animated.Image                style={[styles.image,{left: this.state.left1}]}                source={ loadingImage }/>            ...        )    }}

用timing实现的翻转动画效果

import loadingImage from '../../assets/0.gif'...class PlaygroundContainer extends Component {    constructor(props) {        super(props);        this.state = {            rotation2: new Animated.Value(0),        }    }    componentDidMount() {        Animated.timing(this.state.rotation2, {            toValue: 1,        //属性目标值            duration: 3000    //动画执行时间        }).start();    //执行动画    }    render(){        return (            ...            <Animated.Image                style={[styles.image,{                    transform:[                        {                            rotateX: this.state.rotation2.interpolate({                                inputRange:[0,1],                                outputRange:['0deg','360deg']                            })                        }                    ]                }]}                source={ loadingImage }/>            ...        )    }}

这里用到<l style="color:red">插值函数</l>interpolate，它可以接受一个输入区间，然后将其映射到另一个的输出区间，如下：

{    rotateX: this.state.rotation2.interpolate({        inputRange:[0,1],        outputRange:['0deg','360deg']    })}

通过映射，

rotation2的value映射输出00°0.272°0.5180°1360°

用decay实现衰减动画

import loadingImage from '../../assets/0.gif'...class PlaygroundContainer extends Component {    constructor(props) {        super(props);        this.state = {            decayLeft4: new Animated.Value(0),        }    }    componentDidMount() {        Animated.decay(this.state.decayLeft4, {            velocity: 2,// 起始速度，必填参数。            deceleration:0.992     //速度衰减比例，默认为0.997。        }).start();    }    render(){        return (            ...            <Animated.Image                style={[styles.image,{                    left: this.state.decayLeft4                }]}                source={ loadingImage }/>            ...        )    }}

组合画效果

static sequence(animations: Array<CompositeAnimation>) （接受一个动画数组，<b style="color: red">依次</b>执行数组里的动画）

static parallel(animations: Array<CompositeAnimation>, config?: ParallelConfig) （接受一个动画数组，<b style="color: red">同时</b>执行数组里的动画）

  import loadingImage from '../../assets/0.gif'  ...  class PlaygroundContainer extends Component {      constructor(props) {          super(props);          this.state = {              left3: new Animated.Value(0),              rotation3: new Animated.Value(0),              scale3: new Animated.Value(0.5),                }      }      componentDidMount() {          //串行执行          Animated.sequence([                  // 并行执行（滚动，同时旋转）              Animated.parallel([                  Animated.timing(this.state.left3, {                      toValue: 1,                      duration: 3000,                  }),                  Animated.timing(this.state.rotation3, {                      toValue: 1,                      duration: 1000,                  }),              ]),              // 滚动、旋转结束  执行缩放              Animated.timing(this.state.scale3, {                  toValue: 1,                  duration: 500,              })          ]).start()    //执行动画      }      render(){          return (              ...              <Animated.Image                  style={[styles.image,{                      left: this.state.left3.interpolate({                          inputRange:[0,1],                          outputRange:[0, width - 100]                      }),                      transform:[                          {rotateZ: this.state.rotation3.interpolate({                                  inputRange:[0,1],                                  outputRange:['0deg','360deg']})                          },                          {rotateX: this.state.rotation3.interpolate({                                  inputRange:[0,1],                                  outputRange:['0deg','360deg']})                          },                          {scale: this.state.scale3}                      ]                  }]}                  source={ loadingImage }/>              ...          )      }  }

用delay做延时动画

Animated.delay(1000)延时1000ms
把delay动画放进sequence 执行串行的动画数组中

import loadingImage from '../../assets/0.gif'...class PlaygroundContainer extends Component {    constructor(props) {        super(props);        this.state = {            left5: new Animated.Value(0),        }    }    componentDidMount() {        Animated.sequence([            // 1000 ms后执行            Animated.delay(1000),            Animated.timing(this.state.left5, {                toValue: 100,// 起始速度，必填参数。                duration: 1000            })        ]).start()    }    render(){        return (            ...            <Animated.Image                style={[styles.image,{                    left: this.state.left5                }]}                source={ loadingImage }/>            ...        )    }}

0 0