reactnative 动画效果 animated

本人使用RN比较晚，错误之处也请大牛指出来。

在公司新项目里面加了一点点动画，就是官方是animated和LayoutAnimation ，今天主要就是说animated精确动画，其余的布局动画如LayoutAnimation 我也没有看，关于手势部分也跳过了，希望帮到需要的人。

使用一个动画首先要知道在哪里需要动画，那个位置是动画的效果。例如，他的left改变，opacity改变，color变化，或者是一个rotate变化等等。

第一步：创建一个动画

初始值并给出一个默认透明度

constructor(props){
        super(props)
        this.state={
         opacity: new Animated.Value(1),
         
      }
  }

第二步：以什么方式调用这个效果

在componentdidmount调用timing

 componentDidMount(){
     Animated.timing(this.state.opacity, {
            toValue: 1,
            duration:1000,
        }).start();

第三步：指定到标签上

谁得什么属性变化

<Animated.View style={{opacity:this.state.opacity}}></Animated.View>

ok！以上就是一个简单timing的动画，除了timing 还有spring以及decay，区别就是动画展现方式不同，timing：根据时间函数来处理，一般属性 toValue: , duration:,easing。spring：弹性动画，一般属性toValue: , friction: ,tension: 。decay：衰减动画，velocity: ,  deceleration: ,。三个函数不一样，属性不同。

如果这些不够满足使用情况下，怎么办？例如想改变backgroundcolor，默认的 Animated.Value(1),需要输一个数值，但是颜色（#f00）并不是数值，这时就可以使用interpolate（插值）来解决。

例如从#f00变成#0f0，

先初始化bg，

constructor(props){
        super(props)
        this.state={
          bg:new Animated.Value(0),
      }
  }
在编写调用一个函数

Animated.spring(this.state.bg, {
toValue: 1,friction:2,tensions:30,
}).start();

最后指定标签并interpolate一下

<Animated.View style={{backgroundColor:this.state.bg.interpolate({
                  inputRange:[0,1],outputRange:['#f00','#0f0']})
               }}>
 </Animated.View>

ok! 颜色就会改变了，一个颜色的变化就会出现了。

如果这些还是不够满足使用情况下，怎么办？你可以使用transform来编写动画，

transform:[{skewX:this.state.skewx.interpolate({inputRange: [0, 1],outputRange: ['90deg', '9deg']})}]

注意;作为一个坑，可以自己试试skewX和skewY，skewX没效果，而skewY可以使用。