react-native—

一、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 (
            )
    }
    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事件，性能很高。

react-native——动画

你可能感兴趣的:(react-native——动画)