http://www.alloyteam.com/2016/01/reactnative-animated/
http://www.alloyteam.com/2016/01/reactnative-animated/
/**
* Created by Administrator on 2016/12/10.
*/
import React, { Component } from 'react';
import {
StyleSheet,
Text,
Animated,
ScrollView,
Alert,
Easing,
View
} from 'react-native';
class AnimatedDemo extends Component {
// 構造
constructor(props) {
super(props);
this.state = {
scale: new Animated.Value(0),
imgScaleValue: new Animated.Value(0),
imgRotateValue: new Animated.Value(0),
imgTranslateXValue: new Animated.Value(0),
fadeInOpacity: new Animated.Value(0.5),
rotation: new Animated.Value(0),
fontSize: new Animated.Value(0),
animateMaps: [1, 2, 3].map(() => new Animated.Value(0)), // 初始化3個值
};
this.state.scale.addListener((value) => {
console.log("scale",value); //value.value 為0----0.8
});
}
/*單個動畫*/
_onPress1 = ()=> {
this.state.scale.setValue(0); // 設置一個較大的初始值
Animated.spring( // 可選的基本動畫類型: spring, decay, timing
this.state.scale, // 將`bounceValue`值動畫化
{
toValue: 0.8, // 將其值以動畫的形式改到一個較小值
friction: 1, // Bouncier spring
}
).start(); // 開始執(zhí)行動畫
}
/*動畫序列*/
_onPress2 = ()=> {
this.state.imgScaleValue.setValue(0);
this.state.imgTranslateXValue.setValue(0);
this.state.imgRotateValue.setValue(0);
Animated.parallel([ // 首先執(zhí)行decay動畫，結束后同時執(zhí)行spring和twirl動畫
Animated.spring(this.state.imgTranslateXValue, {
toValue: 100 // 返回到起始點開始
}),
Animated.spring( // 可選的基本動畫類型: spring, decay, timing
this.state.imgScaleValue, // 將`bounceValue`值動畫化
{
toValue: 0.8, // 將其值以動畫的形式改到一個較小值
friction: 1, // Bouncier spring
}
),
Animated.spring(this.state.imgRotateValue, { // 同時開始旋轉
toValue: 1
}),
]).start();
}
_onPress3 = ()=> {
/*設置為初始值*/
['fadeInOpacity', 'rotation', 'fontSize'].map(property => {
return this.state[property].setValue(0);
});
/*開啟動畫*/
Animated.parallel(['fadeInOpacity', 'rotation', 'fontSize'].map(property => {
return Animated.timing(this.state[property], {
toValue: 1,
duration: 1000,
easing: Easing.linear
});
})).start();
}
_onPress4 = ()=> {
var timing = Animated.timing;
Animated.sequence([
Animated.stagger(200, this.state.animateMaps.map(left => {
return timing(left, {
toValue: 1,
});
}).concat(
this.state.animateMaps.map(left => {
return timing(left, {
toValue: 0,
});
})
)), // 三個view滾到右邊再還原翩瓜，每個動作間隔200ms
Animated.delay(400), // 延遲400ms，配合sequence使用
timing(this.state.animateMaps[0], {
toValue: 1
}),
timing(this.state.animateMaps[1], {
toValue: -1
}),
timing(this.state.animateMaps[2], {
toValue: 0.5
}),
Animated.delay(400),
Animated.parallel(this.state.animateMaps.map((anim) => timing(anim, {
toValue: 0
}))) // 同時回到原位置
]
).start();
}
render() {
var views = this.state.animateMaps.map(function (value, i) {
return (
<Animated.View
key={i}
style={[styles.content4, {
left: value.interpolate({
inputRange: [0,1],
outputRange: [0,200]
})
}]}>
<Text style={styles.text4}>我是第{i + 1}個View</Text>
</Animated.View>
);
});
return (
<ScrollView>
<Animated.Image // 可選的基本組件類型: Image, Text, View
source={{uri: 'http://avatar.csdn.net/5/B/3/1_cryhelyxx.jpg'}}
style={[styles.img,{
transform: [ // `transform`是一個有序數(shù)組（動畫按順序執(zhí)行）
{scale:this.state.scale}, // 將`bounceValue`賦值給 `scale`
]}
]}
/>
<Text style={styles.text} onPress={this._onPress1}>控制圖片動畫1</Text>
<Animated.Image // 可選的基本組件類型: Image, Text, View
source={{uri: 'http://avatar.csdn.net/5/B/3/1_cryhelyxx.jpg'}}
style={[styles.img,{
transform: [ // `transform`是一個有序數(shù)組（動畫按順序執(zhí)行）
{scale:this.state.imgScaleValue}, // 將`bounceValue`賦值給 `scale`
{translateX: this.state.imgTranslateXValue},
{rotate: this.state.imgRotateValue.interpolate({
inputRange: [0,1],
outputRange: ['0deg', '360deg']
})},
]
}
]}
/>
<Text style={styles.text} onPress={this._onPress2}>控制圖片動畫2</Text>
<Animated.View style={[styles.content, {
opacity: this.state.fadeInOpacity,
transform: [{
rotateZ: this.state.rotation.interpolate({
inputRange: [0,1],
outputRange: ['0deg', '360deg']
})
}]
}]}>
<Animated.Text style={{
color:"red",
fontSize: this.state.fontSize.interpolate({
inputRange: [0,1],
outputRange: [12,26]
})
}}>
我騎著七彩祥云出現(xiàn)了????
</Animated.Text>
</Animated.View>
<Text style={styles.text} onPress={this._onPress3}>動畫3</Text>
{views}
<Text style={styles.text} onPress={this._onPress4}>動畫4</Text>
</ScrollView>
);
}
}
const styles = StyleSheet.create({
text: {
fontSize: 20,
textAlign: 'center',
backgroundColor: "yellow",
padding: 10,
margin: 10,
},
content: {
backgroundColor: 'yellow',
borderWidth: 1,
borderColor: 'blue',
padding: 2,
margin: 20,
borderRadius: 10,
alignItems: 'center',
},
content4: {
borderWidth: 1,
borderColor: 'blue',
alignItems: 'center',
backgroundColor: "green",
},
text4: {
fontSize: 20,
textAlign: 'center',
},
img: {
width: 50,
height: 50,
resizeMode: "center",
},
});
export default AnimatedDemo;
addListener的輸出
Paste_Image.png
