React Native Animate学习笔记

对于一个APP提高用户的活跃度或者提升APP的留存率一直也是公司兼顾的一个方面，尤其是业务使用频率较低类的APP。解决方案除了丰富APP的内容或者业务，扣APP的细节之外，就剩下提高APP的可玩性，那么流畅、有意义的动画是很有效的，而且还提高了用户体验。React Native提供了两个互补的动画系统：用于全局的布局动画LayoutAnimation，和用于创建更精细的交互控制的动画Animated

Animated

Animated库可以使开发者很容易的实现各种动画和交互方式(但是我觉得好像不太简单😂😂😂，感觉代码量有点多)，具备极高的性能。Animated仅封装了四个可以动画化的组件：View、Text、Image和ScrollView(react-native 0.43才加入的，低版本的RN项目需要注意哦！)，不过你也可以使用Animated.createAnimatedComponent()来封装你自己的组件。

1. 动画类型

RN中动画类型分为三种，每一种动画类型提供了特定的函数曲线，用于控制动画值从初始化到最终值的变化过程。

1.1 static timing(value: AnimatedValue | AnimatedValueXY, config: TimingAnimationConfig)
动画值会根据参数easing给定的函数做动态的变化，直到动画结束值。

value: 动画开始的值
config参数：
toValue: 动画结束的值
duration: 动画的持续时间(毫秒)。默认值为500.
easing: Easing function to define curve。默认值为Easing.inOut(Easing.ease)。相关函数见Easing函数
delay: 开始动画前的延迟时间（毫秒）。默认为0.
useNativeDriver: 使用原生动画驱动。默认不启用(false)。

Animated.timing(
          this.state.animateValue,
          {
              toValue: 1,
              duration: 2500,
              easing: Easing.Linear,
          }
      ).start()

1.2 static spring(value: AnimatedValue | AnimatedValueXY, config: SpringAnimationConfig)
动画值根据参数(例如friction+ tension)做一个弹性变化，直到动画结束值。

value: 动画开始的值
config参数(注意你不能同时定义bounciness/speed和 tension/friction这两组，只能指定其中一组，demo中使用的是friction+ tension)：
toValue: 动画结束的值
friction: 摩擦系数，默认7
tension: 张力系数，默认40
speed: 速度，默认12
bounciness: 反弹力，默认8.
useNativeDriver: 使用原生动画驱动。默认不启用(false)。

Animated.spring(
      this.state.springAnimateWidth,
      {
        toValue: 150,
        tension: this.state.tensionSliderValue, 
        friction: this.state.frictionSliderValue, 
      }
    ).start();

1.3 static decay(value: AnimatedValue | AnimatedValueXY, config: DecayAnimationConfig)
动画值以一个初始速度和一个衰减系数变化，使用中有问题，查询资料暂时未解决

value: 动画开始的信息
config参数：
toValue: 动画结束的信息
velocity: 初始速度。必填。
deceleration: 衰减系数。默认值0.997。
useNativeDriver: 使用原生动画驱动。默认不启用(false)。

2. 插值函数(interpolate())

我感觉这个函数的作用更像是映射的意思，interpolate()函数可以使多个动画效果使用同一对动画开始值和结束值，interpolate()可以把动画值映射成任何你想要的值。

  constructor() {
    super()
    this.state = {
      animateValue: new Animated.Value(0),
    }
  }

  componentDidMount() {
      Animated.timing(
          this.state.animateValue,
          {
              toValue: 1,
              duration: 2500,
              easing: Easing.Linear,
          }
      ).start()
  }

  render() {
    return (
      <Animated.View style={{
        backgroundColor: "red",
        width: this.state.animateValue.interpolate({
          //动画值[0, 1]映射成[0, 150]
          inputRange: [0, 1],
          outputRange: [0, 150]
        }),
        height: this.state.animateValue.interpolate({
          //动画值[0, 1]映射成[0, 40]
          inputRange: [0, 1],
          outputRange: [0, 40]
        }),
        justifyContent: "center",
        alignItems: "center"
      }}>
      <Text style={{
        textAlign: "center"
      }}>linear</Text>
      </Animated.View>
    );
  }

3. 组合动画

就是动画组的概念

Animated.delay() 在给定延迟后开始动画。
Animated.parallel() 同时启动多个动画。
Animated.sequence() 按顺序启动动画，等待每一个动画完成后再开始下一个动画。
Animated.stagger() 按照给定的延时间隔，顺序并行的启动动画。

LayoutAnimation

更多代码细节见React-ReactNativeLesson/RNAnimate

最后编辑于：2018.07.06 14:43:43