JavaScriptReactNative

动画

动画组件

  • Animated.View
1
2
3
4
5
Animated.timing(this.state.xPosition, {
  toValue: 100,
  easing: Easing.back(),
  duration: 2000
}).start();

组合动画

  • parallel（同时执行）
  • sequence（顺序执行）
  • stagger
  • delay
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Animated.sequence([
  // decay, then spring to start and twirl
  Animated.decay(position, {
    // coast to a stop
    velocity: { x: gestureState.vx, y: gestureState.vy }, // velocity from gesture release
    deceleration: 0.997
  }),
  Animated.parallel([
    // after decay, in parallel:
    Animated.spring(position, {
      toValue: { x: 0, y: 0 } // return to start
    }),
    Animated.timing(twirl, {
      // and twirl
      toValue: 360
    })
  ])
]).start(); // start the sequence group

参考