一、LayoutAnimation
主要用于视图位置、透明度等state改变之前调用，让其变化过程带上动画效果，不那么生硬。适用于全局变化。常规用法就不说了，主要看下细节点。如下是一个典型的LayoutAnimation动画
LayoutAnimation.configureNext({
duration:800,
create:{
type:LayoutAnimation.Types.spring,
property:LayoutAnimation.Properties.opacity,
},
update:{
type:LayoutAnimation.Types.linear,
},
delete: {
type:LayoutAnimation.Types.linear,
property:LayoutAnimation.Properties.opacity,
},
});
参数意义：
@type:：决定动画进度，例如弹簧spring，线性linear，easeInEaseOut,easeIn,easeOut,keyboard等
@property：opacity或scaleXY，只在create和delete之下时生效，决定视图出现\消失的样式，opacity为改变透明度出现\消失，scaleXY则为正中心一个点，然后放大至原型出现。在create和delete中此属性为必需，update中无效，不必写。
@create: 适用于给从无到有刚刚创建出来视图添加动画，例如点击按钮，在列表后添加一张图片，当property为opacity时，图片呈现完全透明在逐渐出现动画效果。
@delete：适用于视图消失时的动画效果，例如点击按钮，删除列表最后一张图片，当property为scaleXY时，图片呈现中点不变逐渐等比例缩小至消失动画效果。
一般情况下LayoutAnimation不必使用上面的自定义动画过程，直接使用系统已经写好的那几个动画就可以了，如LayoutAnimation.easeInEaseOut()、LayoutAnimation.spring()
在iOS中，源码动画最终调用的是UIView的animateWithDuration方法产生动画效果。
该API适用时需添加
if (Platform.OS == 'android') {//android平台需要开启允许LayoutAnimation ios默认开启
UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true);
}
二、Animated
相比LayoutAnimation，适用于更细微的变化过程动画，可适配性更高。如下简单使用
export default class Test extends Component {
state = {
bounceValue: new Animated.Value(0),
};
render() {
return (
<Animated.Image source={require('./1.png')} style={{
transform: [{scale: this.state.bounceValue}]}}/>)
}
componentDidMount() {
Animated.timing(this.state.bounceValue,{
toValue:3,
duration:3000,
// useNativeDriver: true 这里先注释掉，标记为注释@1
}).start()
}
}
所有Animated的js源码都在AnimatedImplementation.js中，本文RN版本为0.43，以下所有源码都只提取了关键部分
先从动画的入口函数Animated.timing说起，该函数定义在第2060行
var timing = function (value: AnimatedValue | AnimatedValueXY,config: TimingAnimationConfig,): CompositeAnimation {
// 一些列转化，最终执行的是这个方法
singleValue.animate(new TimingAnimation(singleConfig), callback);
};
这里的singleValue是传入的this.state.bounceValue，为AnimatedValue类型。singleConfig就是我们调用Animated.timing方法传入的第二个参数对象。接下来去了AnimatedValue这个类的animate方法
animate(animation: Animation, callback: ?EndCallback): void {
var handle = null;
var previousAnimation = this._animation;
this._animation && this._animation.stop();
this._animation = animation;
animation.start(
this._value,
(value) => {this._updateValue(value, true)},
(result) => {
callback && callback(result);
},
previousAnimation,this
);
}
这个方法也没做啥实事，只是调用了传入参数animation的start方法，这个参数就是上面传过来的new TimingAnimation(singleConfig)对象。这个对象的start方法如下
start(fromValue: number,onUpdate: (value: number) => void,onEnd: ?EndCallback,previousAnimation: ?Animation,animatedValue: AnimatedValue): void {
// 简化后
this._onUpdate = onUpdate;
this._startTime = Date.now();
if (this._useNativeDriver) {
this.__startNativeAnimation(animatedValue);
} else {
this._animationFrame = requestAnimationFrame(this.onUpdate.bind(this));
}
}
这里出现了分支，当注释@1打开时，_useNativeDriver属性会为YES，动画的执行方式将交由原生端，不再走下面的js端。本文只讨论js端Animated动画实现。
记录下动画开始的时间，然后调用requestAnimationFrame执行onUpdate方法，requestAnimationFrame是跟原生端的定时器通信，让原生端定时器触发回调事件onUpdate
onUpdate(): void {
var now = Date.now();
if (now >= this._startTime + this._duration) {. // 动画时间结束调用
if (this._duration === 0) {
this._onUpdate(this._toValue);
} else {
this._onUpdate(
this._fromValue + this._easing(1) * (this._toValue - this._fromValue)
);
}
this.__debouncedOnEnd({finished: true});
return;
}
// 在这里更新传入的this.state.bounceValue的值
this._onUpdate(this._fromValue +this._easing((now - this._startTime) / this._duration) * (this._toValue - this._fromValue));
if (this.__active) {
// 不断注册原生端定时器事件，循环
this._animationFrame = requestAnimationFrame(this.onUpdate.bind(this));
}
}
这个方法内部会不断注册原生端定时器事件，回调自身循环更新this.state.bounceValue的值，直到动画时间结束退出。这里要注意，每一帧都会调用this._onUpdate方法。_onUpdate是start方法的第二个参数，由上一个方法传递过来的，最终执行的是AnimatedValue的_updateValue方法
_updateValue(value: number, flush: bool): void {
this._value = value;
if (flush) {
_flush(this);
}
for (var key in this._listeners) { // AnimatedValue的值的变化过程是可监控的，类似于KVO
this._listeners[key]({value: this.__getValue()});
}
}
方法传递到_flush,再到AnimatedProps的update方法，最终回调到AnimatedComponent的_attachProps方法中注册的回调callback。
var callback = () => {
if (this._component.setNativeProps) {
if (!this._propsAnimated.__isNative) {
this._component.setNativeProps(this._propsAnimated.__getAnimatedValue());
} else {
throw new Error('Attempting to run JS driven animation on animated '
+ 'node that has been moved to "native" earlier by starting an '
+ 'animation with `useNativeDriver: true`');
}
} else {
this.forceUpdate();
}
};
AnimatedComponent就是我们使用的Animated.Image，this._component为Image。这里会判断下我们使用的组件是否能够设置setNativeProps，只有那些能够设置该属性的组件，如Image、Text、Image、ScrollView才能使用Animated动画，动画的呈现原因是利用定时器不断改变组件的setNativeProps值，可避免触发全局的render事件，性能很高。
