RN 动画(Animated)

1、引入Animated，Easing并初始化一个动画值

import {
  Animated,
  Easing
} from 'react-native'
...
constructor () {
  super()
  this.spinValue = new Animated.Value(0)
}

2、创建动画函数

componentDidMount () {
  this.spin()
}
spin () {
  this.spinValue.setValue(0)
  Animated.timing(
    this.spinValue,
    {
      toValue: 1,
      duration: 4000,
      easing: Easing.linear
    }
  ).start(() => this.spin()) // 一轮动画完成后的回调，这里传spin可以形成无限动画
}

更多动画函数：
Animated.spring() ；Animated.decay()
更多组合动画：
以上三个动画函数仅创造基本动画，还有其他函数可以组合这些基本动画，如Animated.parallel()；Animated.sequence()；Animated.stagger()

3、在render里渲染动画

interpolate函数可以映射值，如

render () {
  const spin = this.spinValue.interpolate({
    inputRange: [0, 1],
    outputRange: ['0deg', '360deg']
  })
  return (
    <View style={styles.container}>
      <Animated.Image
        style={{
          width: 227,
          height: 200,
          transform: [{rotate: spin}] }}
          source={{uri: 'https://s3.amazonaws.com/media-p.slid.es/uploads/alexanderfarennikov/images/1198519/reactjs.png'}}
      />
    </View>
  )
}

4、参考

• [译]详解React Native动画 #41