·一：動畫組件：
Animated.Image
Animated.Text
Animated.View
二：動畫函數(shù)：
1：Animated.timing() -- 推動一個值按照一個過渡曲線而隨時間變化。Easing
模塊定義了很多緩沖曲線函數(shù)浇雹。
2：Animated.decay() -- 推動一個值以一個初始的速度和一個衰減系數(shù)逐漸變?yōu)?举农。
3：Animated.spring() -- 產(chǎn)生一個基于 Rebound 和 Origami 實現(xiàn)的Spring動畫沪羔。它會在 toValue
值更新的同時跟蹤當(dāng)前的速度狀態(tài)，以確保動畫連貫。
三：使用步驟
1：初始化動畫屬性值 Animated.value() Animated.valueXY()
2：將動畫屬性值關(guān)聯(lián)到動畫組件的屬性上
3：選擇執(zhí)行動畫的函數(shù) timing decay spring
第一種普通動畫：
效果圖：
code:
componentDidMount() {
this.startAnimated();
}
startAnimated = () => {
this.state.bounceValue.setValue(2);//每次循環(huán)的起始值
Animated.timing(this.state.bounceValue, {
toValue: 5,
duration: 4000,
easing: Easing.back(),
}).start(() => this.startAnimated());//循環(huán)執(zhí)行
}
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>
);
}
第二種手勢動畫：
效果圖：
給動畫添加手勢并監(jiān)聽
將動畫屬性關(guān)聯(lián)到動畫組件上
監(jiān)聽打印的log
