animated动画

animated动画

• 列队 sequence([])

• 并行 parallel([])

• 基本使用

this.state = { width:new Animated.Value(num)};

//事件触发
Animated.spring(this.state.width,{toValue:num})

• spring 弹簧动画

  • Option:
    • toValue:num || toValue:{x:num,y:num}复合值动画
    • friction:num 弹动值,越小幅度越大 defaul:7
    • tension:num 摩擦值,越小弹动越平缓 defaul:40

• timing 缓动动画

  • Option:
    • toValue:num || toValue:{x:num,y:num}复合值动画
    • duration:持续时间
    • delay:延迟时间
    • easing:缓动函数 例:Easing.out(Easing.ease)

• decay 速率动画

  • Option:
    • velocity:初始值
    • deceleration:减速速率
  • 最终值为 velocity += velocity* deceleration

• start 函数接收一个回调参数 当动画执行完后调用

image.png