React Native 动画 ---Animated

关于Animated动画，使用的时候组件不能直接写<Text></Text>

要写成 

<Animated.Text></Animated.Text>

先实现一个简单的动画：

首先导入动画组件：

import {
StyleSheet,
Text,
View,
Animated,
Easing,
} from 'react-native';

看一下要实现的效果：



在组件加载的时候，让text的字体从小变大。

首先在state中定义一个初始字体大小,

然后在componentDidMount中，执行动画方法，让字体变大：

Animated.timing(

            this.state.fadeAnim,  //初始值

            {

                toValue: 22,            //结束时字体的大小

                duration: 2000,        //动画时间

                easing: Easing.linear,  // 缓动函数(可省略)

            },

        ).start();

看一下代码：

export default class Swiper extends Component {

constructor(props) {
super(props);
this.state = {
fadeAnim: new Animated.Value(15),  //设置初始值
}
}

render() {
return (
<View style={styles.container}>
<Animated.Text style={{fontSize: this.state.fadeAnim}}>
Welcome my react-native !</Animated.Text>
</View>
);
}

componentDidMount() {
Animated.timing(
this.state.fadeAnim,  //初始值
{
toValue: 22,            //结束值
duration: 2000,        //动画时间
easing: Easing.linear,
},
).start();               //开始
}
}

const styles = StyleSheet.create({
container: {
flex: 1
},

});

稍微复杂点的动画：

/**
* Created by Lzy on 2017/7/17.
*/
import React from 'react';
import {
View,
Animated,
StyleSheet,
Easing,
} from 'react-native';

export default class Home extends React.Component {
constructor(props) {
super(props);
this.state = {
spin: new Animated.Value(0),
animatedValue: new Animated.Value(0),
}
}

componentDidMount() {
this._spin();
this._twoAnimate();
}

_spin() {
this.state.spin.setValue(0);
Animated.timing(
this.state.spin,
{
toValue: 1,
duration: 4000,
easing: Easing.linear
}
).start(() => this._spin());
}

_twoAnimate() {
this.state.animatedValue.setValue(0);
Animated.timing(
this.state.animatedValue, {
toValue: 1,
duration: 2000,
easing: Easing.linear
}
).start(() => this._twoAnimate());
}

render() {
const spin = this.state.spin.interpolate({
inputRange: [0, 1],
outputRange: ['0deg', '360deg']
});

const rmarginLeft = this.state.animatedValue.interpolate({
inputRange: [0, 1],
outputRange: [0, 300]
});
const ropacity = this.state.animatedValue.interpolate({
inputRange: [0, 0.5, 1],
outputRange: [0, 1, 0],
});
const rmoveMargin = this.state.animatedValue.interpolate({
inputRange: [0, 0.5, 1],
outputRange: [0, 300, 0]
});
const rtextSize = this.state.animatedValue.interpolate({
inputRange: [0, 0.5, 1],
outputRange: [16, 32, 16]
});
const rrotateX = this.state.animatedValue.interpolate({
inputRange: [0, 0.5, 1],
outputRange: ['0deg', '180deg', '0deg']
});

return (
<View style={{flex: 1, marginTop: 44}}>
<Animated.Image
style={{
transform: [{rotate: spin}]
}}
source={require('./img/a.jpg')}/>

<Animated.View style={{
backgroundColor: 'green',
marginVertical: 10,
marginLeft: rmarginLeft,
width: 30,
height: 30
}}/>
<Animated.View style={{
backgroundColor: 'black',
marginVertical: 10,
opacity: ropacity,
width: 30,
height: 30
}}/>
<Animated.View style={{
backgroundColor: 'red',
marginVertical: 10,
transform: [{rotateX: rrotateX}],
width: 30,
height: 30
}}/>
<Animated.View style={{
backgroundColor: 'blue',
marginVertical: 10,
transform: [{translateX: rmoveMargin}],
width: 30,
height: 30
}}/>

<Animated.Text
style={{fontSize: rtextSize}}
onPress={() => {
alert('zuhe')
}}>组合动画</Animated.Text>
</View>)
}

}

const styles = StyleSheet.create({
text: {
marginVertical: 15
},
container: {
width: 375,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'green',
//  height:50
},
})