漸變動(dòng)畫(huà)
漸變動(dòng)畫(huà)是改變透明度實(shí)現(xiàn)的動(dòng)畫(huà)效果，從透明到不透明的效果
constructor(props) {
super(props);
this.fadeInAnimated = new Animated.Value(0); // 漸隱動(dòng)畫(huà)初始值，默認(rèn)為0软啼，透明
}
<Animated.View style={[styles.downViewStyle, {opacity: this.fadeInAnimated}]}>
</Animated.View>
點(diǎn)擊按鈕冗锁，開(kāi)始動(dòng)畫(huà)
Animated.timing(this.fadeInAnimated, {
toValue: 1, // 1為不透明
duration: 500,
easing: Easing.linear
}).start();
旋轉(zhuǎn)動(dòng)畫(huà)
this.spinValue = new Animated.Value(0);
// 利用 interpolate 方法將數(shù)值 0~1 映射到了 0deg~360deg
const spin = this.spinValue.interpolate({
inputRange: [0, 1], // [0,0.5,1]改成這樣會(huì)有不同的效果
outputRange: ['0deg', '360deg'] // ['0deg', '360deg','0deg']改成這樣會(huì)有不同的效果日杈，
});
<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'}}
/>
點(diǎn)擊按鈕開(kāi)始動(dòng)畫(huà)
springAnimal(){
this.spinValue.setValue(0);
Animated.timing(
this.spinValue,
{
toValue: 1, // 此處的1 已經(jīng)被上面的spin映射過(guò)了庞萍， [0, 1] 》 ['0deg', '360deg']
duration: 4000,
easing: Easing.linear
}
).start();
}
從左到右，再?gòu)挠业阶髣?dòng)畫(huà)
其實(shí)就是改變marginLeft的值忘闻，
同理：也可以改變marginTop等的值來(lái)實(shí)現(xiàn)不同的效果
在同理：也可以實(shí)現(xiàn)opacity（透明度不斷地透明-不透明-透明）钝计、margins（組件的上下左右移動(dòng)）、text sizes （字體的不斷變化）和 rotation（3D效果） 等的效果
this.animatedValue = new Animated.Value(0);
const movingMargin = this.animatedValue.interpolate({
inputRange: [0, 0.3, 1], // 0-0.3 0.3-1
outputRange: [0, 300, 0] // 0-300 300-0 速度會(huì)不一樣
});
<Animated.View
style={{
marginLeft: movingMargin,
marginTop: 10,
height: 30,
width: 40,
backgroundColor: 'orange'
}}
/>
點(diǎn)擊調(diào)用動(dòng)畫(huà)
this.animatedValue.setValue(0);
Animated.timing(
this.animatedValue,
{
toValue: 1,
duration: 2000,
easing: Easing.linear
}
).start();
字體的變大變小
const textSize = this.animatedValue.interpolate({
inputRange: [0, 0.5, 1],
outputRange: [18, 32, 18]
});
<Animated.Text
style={{
fontSize: textSize,
marginTop: 10,
color: 'green'}} >
Animated Text!
</Animated.Text>
調(diào)用
this.animatedValue.setValue(0);
Animated.timing(
this.animatedValue,
{
toValue: 1,
duration: 2000,
easing: Easing.linear
}
).start();
QQ20170912-153831.gif
彈性動(dòng)畫(huà)
this.springValue = new Animated.Value(0.5);
<View style={styles.container}>
<Animated.Image
style={{ left: 50, top: 50, width: 227, height: 200, transform: [{scale: this.springValue}] }}
source={{uri: 'https://s3.amazonaws.com/media-p.slid.es/uploads/alexanderfarennikov/images/1198519/reactjs.png'}}/>
</View>
點(diǎn)擊調(diào)用
/*
* 值的范圍是0-1
* 默認(rèn)值越大齐佳，彈性越小私恬，0.9到1之間的值小，彈性小
* 默認(rèn)值越小炼吴，彈性越大本鸣，0.1到1之間的值大，彈性大
* 例如：默認(rèn)值0.5硅蹦，彈性到0.5荣德，然后放大闷煤，大概會(huì)放大到1.3的樣子，然后彈性慢慢減小涮瞻，到達(dá)1
* */
this.springValue.setValue(0.5);
Animated.spring(
this.springValue,
{
toValue: 1,
friction: 1
}
).start()
默認(rèn)值0.1.gif
默認(rèn)值0.5.gif
默認(rèn)值0.9.gif
LayoutAnimation view 改變位置動(dòng)畫(huà)
this.state = {
marginTop: 50
};
<View style={styles.container}>
<TouchableOpacity onPress = {()=>{
// 這個(gè)只是這個(gè)布局改變了才會(huì)有動(dòng)畫(huà)效果
//其實(shí)代碼里只是調(diào)用了這一行LayoutAnimation.spring();,布局修改的時(shí)候就顯得不那么生硬了
// 這樣寫(xiě)也是可以的鲤拿，整個(gè)頁(yè)面的布局改變都會(huì)有動(dòng)畫(huà)效果
// componentWillUpdate() {
// LayoutAnimation.spring();
// }
LayoutAnimation.spring();
this.setState({marginTop:this.state.marginTop + 100})
}}
style={{ width:120,
height:40,
alignItems:'center',
marginTop:this.state.marginTop,
justifyContent:'center',
backgroundColor:'#00ffff',
borderRadius:20}}>
<Text>Text DOWN</Text>
</TouchableOpacity>
</View>
QQ20170912-164155.gif
多個(gè)動(dòng)畫(huà)效果順序播放
Animated.sequence([
Animated.timing(
this.springValue,
{
toValue: 1,
friction: 1
}
),
Animated.timing(
this.springValue,
{
toValue: 0.5,
friction: 1
}
)
]).start(()=>{this.loadAnimation()});
多個(gè)動(dòng)畫(huà)效果同時(shí)播放
Animated.parallel([
Animated.timing(
this.springValue,
{
toValue: 1,
friction: 1
}
),
Animated.timing(
this.springValue,
{
toValue: 0.5,
friction: 1
}
)
]).start(()=>{this.loadAnimation()});
