给小程序使用动画效果

使用自身提供的动画api

Taro.createAnimation

使用方式

1. 在componentDidMount周期里定义动画

  componentDidMount() {
    let animation = Taro.createAnimation({
      duration: 400,
      timingFunction: 'linear',
      delay: 100,
    });
    // 红包动画
    animation
      .translate(-50, 0)
      .step()
      .rotate(360)
      .scale(2)
      .step({ duration: 200 })
      .scale(1)
      .translate(0, 0)
      .step({ duration: 1000 });
    this.setState({
      animation: animation,
    });
  }
  // step表示分段执行

2. 在render中执行动画

  // render中把动画赋给组件或元素
  render(){
    return(
      <View
        className="invite"
        animation={animation}>
        <Image src={inviteUrl} className="invite-img" />
      </View>
    )
  
  }