概述
目前瘦真，ReactNative的版本是0.43,主要的動(dòng)畫分為兩大類
1伙窃、Animated 更加精確的交互式的動(dòng)畫
2、LayoutAnimation 用來實(shí)現(xiàn)布局切換的動(dòng)畫
今天首先介紹一下Animated
Animated動(dòng)畫的創(chuàng)建原理
一個(gè)最基本的Animated創(chuàng)建過程
1、創(chuàng)建Animated.Value，設(shè)置初始值庐完，比如一個(gè)視圖的opacity屬性，最開始設(shè)置Animated.Value(0),來表示動(dòng)畫的開始時(shí)候徘熔，視圖是全透明的门躯。
2、AnimatedValue綁定到Style的可動(dòng)畫屬性近顷，比如透明度生音，{opacity: this.state.fadeAnim}宁否。
3窒升、使用Animated.timing來創(chuàng)建自動(dòng)的動(dòng)畫,或者使用Animated.event來根據(jù)手勢(shì)，觸摸慕匠，Scroll的動(dòng)態(tài)更新動(dòng)畫的狀態(tài)（本文會(huì)側(cè)重講解Animated.timing）饱须。
4、調(diào)用Animated.timeing.start()開始動(dòng)畫台谊。
根據(jù)上述原理蓉媳，下面我們就創(chuàng)建一個(gè)簡(jiǎn)單的動(dòng)畫（給這個(gè)默認(rèn)的視圖創(chuàng)建fade in動(dòng)畫，效果如下）：
代碼如下：
import React, { Component } from 'react';
import {
AppRegistry,
Text,
View,
StyleSheet,
Animated,
} from 'react-native';
class SimpleAnimatedDemo extends React.Component {
state: { //可以不寫锅铅，我這里寫是為了去除flow的warning
fadeIn: Object,
};
constructor(props) {
super(props);
this.state = {
fadeIn: new Animated.Value(0), //設(shè)置初始值
};
}
componentDidMount() {
Animated.timing(
this.state.fadeIn,//初始值
{toValue: 1}//結(jié)束值
).start();//開始
}
render() {
return (
<View style={styles.container}>
<Animated.Text style={{opacity: this.state.fadeIn}}>//綁定到屬性
Welcome to React Native Animated!
</Animated.Text>
</View>
);
}
}
從代碼可以看出來酪呻，簡(jiǎn)單的動(dòng)畫就是用Animated.Value指定初始值，然后在Animated.timing中設(shè)置結(jié)束值盐须，其他的直接交給React native讓它自動(dòng)創(chuàng)建玩荠，我們只需要調(diào)用start開始動(dòng)畫即可。
運(yùn)行的效果圖是動(dòng)態(tài)圖贼邓，插入不進(jìn)來阶冈，想看效果的直接在手機(jī)上或模擬器上運(yùn)行一下就知道啦~
可動(dòng)畫的視圖一般有View、Text塑径、Image女坑、createAnimatedComponent(自定義)
Animated詳解
方法
static decay(value, config) 阻尼，將一個(gè)值根據(jù)阻尼系數(shù)動(dòng)畫到 0
static timing(value, config 根據(jù)時(shí)間函數(shù)來處理统舀，常見的比如線性匆骗，加速開始減速結(jié)束等等，支持自定義時(shí)間函數(shù)
static spring(value, config) 彈性動(dòng)畫
static add(a, b) 將兩個(gè)Animated.value相加誉简，返回一個(gè)新的
static multiply(a, b) 將兩個(gè)Animated.value相乘绰筛，返回一個(gè)新的
static modulo(a, modulus)，將a對(duì)modulus取余,類似操作符%
static delay(time)延遲一段時(shí)間
static sequence(animations) 依次開始一組動(dòng)畫描融，后一個(gè)在前一個(gè)結(jié)束后才會(huì)開始铝噩，如果其中一個(gè)動(dòng)畫中途停止，則整個(gè)動(dòng)畫組停止
static parallel(animations, config?),同時(shí)開始一組動(dòng)畫，默認(rèn)一個(gè)動(dòng)畫中途停止骏庸，則全都停止毛甲。可以通過設(shè)置stopTogether來重寫這一特性
static stagger(time, animations),一組動(dòng)畫可以同時(shí)執(zhí)行具被，但是會(huì)按照延遲依次開始
static event(argMapping, config?),利用手勢(shì)玻募，Scroll來手動(dòng)控制動(dòng)畫的狀態(tài)
static createAnimatedComponent(Component),自定義的讓某一個(gè)Component支持動(dòng)畫
屬性
Value,類型是AnimatedValue,驅(qū)動(dòng)基本動(dòng)畫
AnimatedValueXY,類型是AnimatedValueXY，驅(qū)動(dòng)二維動(dòng)畫
AnimatedValue類型
一個(gè)AnimatedValue一次可以驅(qū)動(dòng)多個(gè)可動(dòng)畫屬性一姿，但是一個(gè)AnimatedValue一次只能由一個(gè)機(jī)制驅(qū)動(dòng)七咧。比如，一個(gè)Value可以同時(shí)動(dòng)畫View的透明度和位置叮叹，但是一個(gè)Value一次只能采用線性時(shí)間函數(shù)
方法
constructor(value) 構(gòu)造器
setValue(value) 直接設(shè)置值艾栋，會(huì)導(dǎo)致動(dòng)畫終止
setOffset(offset) 設(shè)置當(dāng)前的偏移量
flattenOffset() 將偏移量合并到最初值中，并把偏移量設(shè)為0蛉顽，
addListener(callback) ,removeListener(id),removeAllListeners()蝗砾，增加一個(gè)異步的動(dòng)畫監(jiān)聽者
stopAnimation(callback?) 終止動(dòng)畫，并在動(dòng)畫結(jié)束后執(zhí)行callback
interpolate(config) 插值,在更新可動(dòng)畫屬性前用插值函數(shù)對(duì)當(dāng)前值進(jìn)行變換
animate(animation, callback) 通常在React Native內(nèi)部使用
stopTracking(),track(tracking) 通常在React Native內(nèi)部使用
AnimatedValueXY
它和AnimatedValue類似携冤，用在二維動(dòng)畫悼粮，使用起來和AnimatedValue類似，這里不在介紹曾棕，這里是文檔扣猫。
手勢(shì)驅(qū)動(dòng)
React Native最常用的手勢(shì)就是PanResponser，
由于本文側(cè)重講解動(dòng)畫翘地，所以不會(huì)特別詳細(xì)的介紹PanResponser申尤，想深入了解可以看官方文檔，這里僅僅介紹用到的幾個(gè)屬性和回調(diào)方法
onStartShouldSetPanResponder: (event, gestureState) => {}//是否相應(yīng)pan手勢(shì)
onPanResponderMove: (event, gestureState) => {}//在pan移動(dòng)的時(shí)候進(jìn)行的回調(diào)
onPanResponderRelease: (event, gestureState) => {}//手離開屏幕
onPanResponderTerminate: (event, gestureState) => {}//手勢(shì)中斷
其中子眶，通過event可以獲得觸摸的位置瀑凝，時(shí)間戳等信息。通過gestureState可以獲取移動(dòng)的距離臭杰，速度等
下面寫了一個(gè)拖動(dòng)的動(dòng)畫粤咪，通過手指拖動(dòng)小藍(lán)球，移動(dòng)小籃球.
代碼如下：
// View隨著手拖動(dòng)而移動(dòng)渴杆，手指離開會(huì)到原點(diǎn)
import {
AppRegistry,
Text,
View,
StyleSheet,
Animated,
PanResponder,
} from 'react-native';
class TransAnimatedDemo extends Component {
state: {
trans: AnimatedValueXY, //可以不定義寥枝，只是為了除去警告
}
_panResponder: PanResponder;
constructor(props) {
super(props);
this.state = {
trans: new Animated.ValueXY(),
};
this._panResponder = PanResponder.create({
onStartShouldSetPanResponder: () => true, //響應(yīng)手勢(shì)
onPanResponderMove: Animated.event(
[null, {dx: this.state.trans.x, dy: this.state.trans.y}] // 綁定動(dòng)畫值
),
onPanResponderRelease: () => {//手松開是回調(diào)，回到原始位置
Animated.spring(this.state.trans, {toValue: {x: 0, y: 0}}
).start();
},
onPanResponderTerminate: () => {//手勢(shì)中斷時(shí)回調(diào)磁奖，回到原始位置
Animated.spring(this.state.trans, {toValue: {x: 0, y: 0}}
).start();
},
});
}
render(){
return(
<View>
<Animated.View style={
{
width:100,
height:100,
backgroundColor:'blue',
borderRadius:50,
transform:[
{translateX:this.state.trans.x},
{translateY:this.state.trans.y},
],
}
} {...this._panResponder.panHandlers}>
</Animated.View>
</View>
);
}
}
以上代碼通過回調(diào)PanResponder的各個(gè)函數(shù) 實(shí)現(xiàn)移動(dòng)的動(dòng)畫效果囊拜，具體的運(yùn)行效果，請(qǐng)自行在模擬器或者真機(jī)上運(yùn)行（因?yàn)閯?dòng)態(tài)圖片插不進(jìn)來比搭，請(qǐng)諒解）冠跷。
