react native动画

·一：动画组件：
Animated.Image
Animated.Text
Animated.View

二：动画函数：
1：Animated.timing() – 推动一个值按照一个过渡曲线而随时间变化。Easing
模块定义了很多缓冲曲线函数。
2：Animated.decay() – 推动一个值以一个初始的速度和一个衰减系数逐渐变为0。
3：Animated.spring() – 产生一个基于 Rebound 和 Origami 实现的Spring动画。它会在 toValue
值更新的同时跟踪当前的速度状态，以确保动画连贯。

三：使用步骤
1：初始化动画属性值 Animated.value() Animated.valueXY()
2：将动画属性值关联到动画组件的属性上
3：选择执行动画的函数 timing decay spring

第一种普通动画：
效果图：

code:

 componentDidMount() {    this.startAnimated();  }  startAnimated = () => {    this.state.bounceValue.setValue(2);//每次循环的起始值    Animated.timing(this.state.bounceValue, {      toValue: 5,      duration: 4000,      easing: Easing.back(),    }).start(() => this.startAnimated());//循环执行  }  render() {    return (      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>        <Animated.View          style={{            width: 50,            height: 50,            backgroundColor: 'red',            transform: [{ scale: this.state.bounceValue }]          }}        />      </View>    );  }

第二种手势动画：
效果图：

给动画添加手势并监听

将动画属性关联到动画组件上

监听打印的log
第三种：全局动画LayoutAnimation：
这个动画的作用于是全局的，使用起来非常简单。

let CustomLayoutAnimation = {    duration: 800,//动画持续时间    create: {//创建本页面时使用的动画        type: LayoutAnimation.Types.easeInEaseOut  ,        property: LayoutAnimation.Properties.scaleXY,    },    update: {//更新本页面时开启的动画        type: LayoutAnimation.Types.easeInEaseOut,    },    delete: {//删除上一个页面时使用的动画        type:LayoutAnimation.Types.easeInEaseOut,        // springDamping: 0.6,        property: LayoutAnimation.Properties.scaleXY,    },};

其中create和delete都要有这个property否则会报错。

Type：spring linear easeInEaseOut easeIn easeOut keyboard
property：opacity scaleXY

使用时：

 constructor(props) {        super(props);   if (Platform.OS === 'android') {      UIManager.setLayoutAnimationEnabledExperimental(true)        }    }   componentDidMount() {     LayoutAnimation.configureNext(CustomLayoutAnimation);    }    componentWillUpdate(){       LayoutAnimation.configureNext(CustomLayoutAnimation);    }

效果图：

一个好用的动画库：https://github.com/oblador/react-native-animatable