動畫
準備工作
本文基于react-native 0.47版本，提供兩個動畫系統：
-
Animated: 細粒度的交互動畫 -
LayoutAnimation: 動畫在全局布局上
Animated
Animated API
1. 動畫值
- Value
- AnimatedValueXY
我們可以操作的動畫值有兩種，一種是簡單值，一種是二維矢量值。
初始化一個動畫值： new Animated.Value(0) 或 new Animated.ValueXY(0, 0)
2. 動畫設置函數
- decay //衰減的。以一個初始速度開始，逐漸變慢到結束
- timing //用Easing方法操作動畫值
- spring //彈簧的
- delay (特殊的timing) //延遲執行
每個方法以不同的動畫曲線控制動畫值從初始值到最終值。
上面的方法返回的對象可以start()或者stop()來控制動畫開始或者結束。
3. 動畫值生成函數
- add
- divide
- multiply
- modulo
- diffClamp
可以對兩個動畫值進行加、除、乘、模等運算，生成一個新動畫值。
動畫值的interpolate方法可以傳入range映射輸出（插值運算，更多關于插值需要看Interpolation.js文件）
4. 控制多個動畫設置函數
- sequence //按順序執行，執行完一個再執行下一個
- parallel //一組動畫同時執行
- stagger //按順序執行，一個動畫開始后下一個動畫在指定延遲執行
- loop
上面方法控制的是"動畫設置函數"（timing等）的開始和結束的方式。
- event
手勢（panning、scrolling等）或者其他 events 可以直接使用Animated.event方法映射動畫值。
- createAnimatedComponent
只有可動畫的組件才能動畫，createAnimatedComponent 方法可以讓組件可動畫，Animated 直接提供了下面4個可動畫的組件，就是使用的這個方法包裝的：
- Animated.Image
- Animated.Text
- Animated.View
- Animated.ScrollView
一個基于Animated的創建過程：
- 初始化一個動畫值（new Animated.Value(0)）
- 把這個動畫值綁定到一個可動畫組件的style屬性上（style={{opacity: animValue}}）
- 設置這個動畫值的變化方法（Animated.timing等方法）
- 開始動畫（Animated.timing().start()）
一個簡單的動畫
使用上面的創建過程，實現一個簡單的動畫，動畫效果如下：
代碼如下：
class Simple extends Component {
constructor(props) {
super(props)
this.state = {
/*
1. 初始化動畫值
* */
fadeAnim: new Animated.Value(0)
}
}
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Animated.Text style={{
/*
2. 將動畫值綁定到style的屬性
* */
opacity: this.state.fadeAnim
}}>
Simple Animated Used Animated.timing
</Animated.Text>
<Button title="touch me"
onPress={() => {
/*
3. 處理動畫值，并啟動動畫
* */
Animated.timing(
this.state.fadeAnim,
{
duration: 1000,
toValue: 1
}
).start()
}} />
</View>
)
}
}
一個稍微復雜的動畫
要知道，一個動畫值只能由一個變化的原因，就是不能被多個動畫設置函數（timing等）操控。但是一個動畫值可以綁定多個style屬性。
我們做一個動畫，控制一個View的opacity、translateX 和 scale，這三個屬性都綁定一個動畫值。
動畫效果如下：
代碼如下：
class SingleValueToMultiProps extends Component {
constructor(props) {
super(props)
this.state = {
/*
初始化動畫值
* */
animValue: new Animated.Value(1),
currentValue: 1, //標志位
}
}
render() {
return (
<View style={{ flex: 1, alignItems: 'center' }}>
<Animated.View style={{
width: '50%',
height: '50%',
backgroundColor: 'skyblue',
/*
將動畫值綁定到style的屬性
* */
opacity: this.state.animValue, //透明度動畫
transform: [ //位置動畫（可以思考一下：下面的元素順序不同會有不同效果）
{
translateX: this.state.animValue.interpolate({
inputRange: [0, 1],
outputRange: [300, 0] //線性插值，0對應-100，1對應0
})
},
{
scale: this.state.animValue, //大小動畫
},
]
}} />
<Button title="touch me"
onPress={() => {
/*
處理動畫值，并啟動動畫
* */
this.state.currentValue = this.state.currentValue == 1 ? 0 : 1
Animated.timing(this.state.animValue, {
toValue: this.state.currentValue,
duration: 1500,
}).start()
}} />
</View>
)
}
}
控制多個動畫
我們拿Animated.stagger()舉例，控制一個動畫開始后0.25秒開始下一個動畫。
const animations = [
Animated.timing(
this.state.skyAnimValue,
{
toValue: 1,
}),
Animated.timing(
this.state.redAnimValue,
{
toValue: 1,
}),
Animated.timing(
this.state.greenAnimValue,
{
toValue: 1,
})
]
Animated.stagger(250, animations).start()
注意：sequence、parallel、stagger、loop 方法控制的是"動畫設置函數"的開始和結束的方式，所以傳入的是一組對動畫值操作后的對象，即timing等方法調用后的對象。
events 事件控制動畫
使用events事件控制動畫，實際上就是替換了上面的“動畫設置函數”，動畫值不再由“動畫設置函數”來控制，而是由events來控制。
比如scrolling的event，可以用滾動的偏移量來設置動畫值：
onScroll={Animated.event([{ nativeEvent: { contentOffset: { y: this.state.offsetYAnim } } }])}
比如panning的event，可以用手勢在頁面的位置設置動畫值：
onPanResponderMove: Animated.event([{ nativeEvent: { pageX: this.state.animValue } }])
LayoutAnimation
在下一次渲染時，自動讓views動畫到新狀態。
一般在setState之前調用LayoutAnimation.configureNext(config)方法。
LayoutAnimation API
- configureNext //配置動畫在下一次渲染時發生
其中config組成如下：
type Config = {
duration: number,
create?: Anim, //創建views時的動畫配置
update?: Anim, //更新views時的動畫配置
delete?: Anim, //刪除views時的動畫配置
}
其中create、update、delete的組成如下：
type Anim = {
duration?: number,
delay?: number, //延遲
springDamping?: number, //彈簧阻尼系數（配合type=spring時使用）
initialVelocity?: number, //初始速度
type?: $Enum<typeof TypesEnum>,
property?: $Enum<typeof PropertiesEnum>,
}
Types //動畫曲線類型
- spring //彈簧
- linear //線性
- easeInEaseOut //緩入緩出
- easeIn //緩入
- easeOut //緩出
Properties //動畫的屬性
- opacity //透明度
- scaleXY //縮放
create
Presets
上面兩個方法都能生成 configureNext 所需的 config，可以快捷的生成所需的 config。
- easeInEaseOut
- linear
- spring
上面的三個方法是由 configureNext.bind(null, Presets.xxx) 生成的，可以直接調用。
代碼如下：
LayoutAnimation.configureNext({
duration: 1000,
create: {
type: LayoutAnimation.Types.linear,
property: LayoutAnimation.Properties.opacity,
},
update: {
type: LayoutAnimation.Types.linear,
property: LayoutAnimation.Properties.scaleXY,
}
})
this.setState({
size: this.state.bigTag ? 60 : 100,
bigTag: !this.state.bigTag,
})
效果如下：
