NineOldAnimations 设计解析
来源:互联网 发布:浩辰cad建筑软件 编辑:程序博客网 时间:2024/05/22 09:38
NineOldAnimations 设计解析
1. 功能介绍
NineOldAndroids是一款支持在低版本( api 11以下 )使用Android属性动画以及3D旋转动画的框架,它提供了一系列如ViewAnimator,ObjectAnimator,ViewPropertyAnimator等API来完成这些动画,解决了Android动画框架在低版本的兼容性问题。在api 11 ( Honeycomb (Android 3.0) )后Android推出了属性动画、X轴翻转等动画效果,但是这些效果却不能运行在api 11以下,NineOldAndroids的出现使得这些动画效果能够兼容低版本系统,保证动画在各个系统版本能够完美运行。
2. 总体设计
以上是NineoldAnimations的整体设计图,Animator通过PropertyValuesHolder来更新对象的目标属性。如果用户没有设置目标属性的Property对象,那么会通过反射的形式调用目标属性的setter方法来更新属性值;否则则通过Property的set方法来设置属性值。这个属性值则通过KeyFrameSet的计算得到,而KeyFrameSet又是通过时间插值器和类型估值器来计算。在动画执行过程中不断地计算当前时刻目标属性的值,然后更新属性值来达到动画效果。
这篇文章更多的是从整体结构方面介绍NineOldAnimations,如果需要从源码上剖析请参考NineOldAnimations源码分析.
2.1 类详细介绍
在进行下一步的分析之前,我们先来了解一下NineOldAndroids中一些核心的类以及它们的作用。
* ValueAnimator : 该类是Animator的子类,实现了动画的整个处理逻辑,也是NineOldAndroids最为核心的类;
* ObjectAnimator : 对象属性动画的操作类,继承自ValueAnimator,通过该类使用动画的形式操作对象的属性;
* TimeInterpolator : 时间插值器,它的作用是根据时间流逝的百分比来计算出当前属性值改变的百分比,系统预置的有LinearInterpolator(线性插值器:匀速动画)、AccelerateDecelerateInterpolator(加速减速插值器:动画两头慢中间快)和DecelerateInterpolator(减速插值器:动画越来越慢)等;
* TypeEvaluator : TypeEvaluator的中文翻译为类型估值算法,它的作用是根据当前属性改变的百分比来计算改变后的属性值,系统预置的有IntEvaluator(针对整型属性)、FloatEvaluator(针对浮点型属性)和ArgbEvaluator(针对Color属性);
* Property : 属性对象,主要是定义了属性的set和get方法;
* PropertyValuesHolder : PropertyValuesHolder是持有目标属性Property、setter和getter方法、以及关键帧集合的类。
* KeyframeSet : 存储一个动画的关键帧集合;
* AnimationProxy : 在API 11以下使用View的属性动画的辅助类。
2.2 基本使用
示例1:
改变一个对象(myObject)的 translationY属性,让其沿着Y轴向上平移一段距离:它的高度,该动画在默认时间内完成,动画的完成时间是可以定义的,想要更灵活的效果我们还可以定义插值器和估值算法,但是一般来说我们不需要自定义,系统已经预置了一些,能够满足常用的动画。
<code class=" hljs avrasm" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; padding: 0.5em; color: rgb(0, 0, 0); border-radius: 0px; display: block; background-image: initial; background-attachment: initial; background-color: transparent !important; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">ObjectAnimator<span class="hljs-preprocessor" style="box-sizing: border-box; color: rgb(136, 0, 0);">.ofFloat</span>(myObject, <span class="hljs-string" style="box-sizing: border-box; color: rgb(136, 0, 0);">"translationY"</span>, -myObject<span class="hljs-preprocessor" style="box-sizing: border-box; color: rgb(136, 0, 0);">.getHeight</span>())<span class="hljs-preprocessor" style="box-sizing: border-box; color: rgb(136, 0, 0);">.start</span>()<span class="hljs-comment" style="box-sizing: border-box; color: rgb(136, 136, 136);">; </span></code>
示例2:
改变一个对象的背景色属性,典型的情形是改变View的背景色,下面的动画可以让背景色在3秒内实现从0xFFFF8080到0xFF8080FF的渐变,并且动画会无限循环而且会有反转的效果。
<code class=" hljs avrasm" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; padding: 0.5em; color: rgb(0, 0, 0); border-radius: 0px; display: block; background-image: initial; background-attachment: initial; background-color: transparent !important; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">ValueAnimator colorAnim = ObjectAnimator<span class="hljs-preprocessor" style="box-sizing: border-box; color: rgb(136, 0, 0);">.ofInt</span>(this, <span class="hljs-string" style="box-sizing: border-box; color: rgb(136, 0, 0);">"backgroundColor"</span>, <span class="hljs-comment" style="box-sizing: border-box; color: rgb(136, 136, 136);">/*Red*/</span><span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 136, 0);">0xFFFF8080</span>, <span class="hljs-comment" style="box-sizing: border-box; color: rgb(136, 136, 136);">/*Blue*/</span><span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 136, 0);">0xFF8080FF</span>)<span class="hljs-comment" style="box-sizing: border-box; color: rgb(136, 136, 136);">; </span>colorAnim<span class="hljs-preprocessor" style="box-sizing: border-box; color: rgb(136, 0, 0);">.setDuration</span>(<span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 136, 0);">3000</span>)<span class="hljs-comment" style="box-sizing: border-box; color: rgb(136, 136, 136);">; </span>colorAnim<span class="hljs-preprocessor" style="box-sizing: border-box; color: rgb(136, 0, 0);">.setEvaluator</span>(new ArgbEvaluator())<span class="hljs-comment" style="box-sizing: border-box; color: rgb(136, 136, 136);">; </span>colorAnim<span class="hljs-preprocessor" style="box-sizing: border-box; color: rgb(136, 0, 0);">.setRepeatCount</span>(ValueAnimator<span class="hljs-preprocessor" style="box-sizing: border-box; color: rgb(136, 0, 0);">.INFINITE</span>)<span class="hljs-comment" style="box-sizing: border-box; color: rgb(136, 136, 136);">; </span>colorAnim<span class="hljs-preprocessor" style="box-sizing: border-box; color: rgb(136, 0, 0);">.setRepeatMode</span>(ValueAnimator<span class="hljs-preprocessor" style="box-sizing: border-box; color: rgb(136, 0, 0);">.REVERSE</span>)<span class="hljs-comment" style="box-sizing: border-box; color: rgb(136, 136, 136);">; </span>colorAnim<span class="hljs-preprocessor" style="box-sizing: border-box; color: rgb(136, 0, 0);">.start</span>()<span class="hljs-comment" style="box-sizing: border-box; color: rgb(136, 136, 136);">; </span></code>
示例3:
动画集合,5秒内对View的旋转、平移、缩放和透明度都进行了改变 。
<code class=" hljs avrasm" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; padding: 0.5em; color: rgb(0, 0, 0); border-radius: 0px; display: block; background-image: initial; background-attachment: initial; background-color: transparent !important; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">AnimatorSet <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">set</span> = new AnimatorSet()<span class="hljs-comment" style="box-sizing: border-box; color: rgb(136, 136, 136);">; </span><span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">set</span><span class="hljs-preprocessor" style="box-sizing: border-box; color: rgb(136, 0, 0);">.playTogether</span>( ObjectAnimator<span class="hljs-preprocessor" style="box-sizing: border-box; color: rgb(136, 0, 0);">.ofFloat</span>(myView, <span class="hljs-string" style="box-sizing: border-box; color: rgb(136, 0, 0);">"rotationX"</span>, <span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 136, 0);">0</span>, <span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 136, 0);">360</span>), ObjectAnimator<span class="hljs-preprocessor" style="box-sizing: border-box; color: rgb(136, 0, 0);">.ofFloat</span>(myView, <span class="hljs-string" style="box-sizing: border-box; color: rgb(136, 0, 0);">"rotationY"</span>, <span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 136, 0);">0</span>, <span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 136, 0);">180</span>), ObjectAnimator<span class="hljs-preprocessor" style="box-sizing: border-box; color: rgb(136, 0, 0);">.ofFloat</span>(myView, <span class="hljs-string" style="box-sizing: border-box; color: rgb(136, 0, 0);">"rotation"</span>, <span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 136, 0);">0</span>, -<span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 136, 0);">90</span>), ObjectAnimator<span class="hljs-preprocessor" style="box-sizing: border-box; color: rgb(136, 0, 0);">.ofFloat</span>(myView, <span class="hljs-string" style="box-sizing: border-box; color: rgb(136, 0, 0);">"translationX"</span>, <span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 136, 0);">0</span>, <span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 136, 0);">90</span>), ObjectAnimator<span class="hljs-preprocessor" style="box-sizing: border-box; color: rgb(136, 0, 0);">.ofFloat</span>(myView, <span class="hljs-string" style="box-sizing: border-box; color: rgb(136, 0, 0);">"translationY"</span>, <span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 136, 0);">0</span>, <span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 136, 0);">90</span>), ObjectAnimator<span class="hljs-preprocessor" style="box-sizing: border-box; color: rgb(136, 0, 0);">.ofFloat</span>(myView, <span class="hljs-string" style="box-sizing: border-box; color: rgb(136, 0, 0);">"scaleX"</span>, <span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 136, 0);">1</span>, <span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 136, 0);">1.5</span>f), ObjectAnimator<span class="hljs-preprocessor" style="box-sizing: border-box; color: rgb(136, 0, 0);">.ofFloat</span>(myView, <span class="hljs-string" style="box-sizing: border-box; color: rgb(136, 0, 0);">"scaleY"</span>, <span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 136, 0);">1</span>, <span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 136, 0);">0.5</span>f), ObjectAnimator<span class="hljs-preprocessor" style="box-sizing: border-box; color: rgb(136, 0, 0);">.ofFloat</span>(myView, <span class="hljs-string" style="box-sizing: border-box; color: rgb(136, 0, 0);">"alpha"</span>, <span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 136, 0);">1</span>, <span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 136, 0);">0.25</span>f, <span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 136, 0);">1</span>) )<span class="hljs-comment" style="box-sizing: border-box; color: rgb(136, 136, 136);">; </span><span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">set</span><span class="hljs-preprocessor" style="box-sizing: border-box; color: rgb(136, 0, 0);">.setDuration</span>(<span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 136, 0);">5</span> * <span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 136, 0);">1000</span>)<span class="hljs-preprocessor" style="box-sizing: border-box; color: rgb(136, 0, 0);">.start</span>()<span class="hljs-comment" style="box-sizing: border-box; color: rgb(136, 136, 136);">; </span></code>
示例4:
下面是个简单的调用方式,其animate方法是nineoldandroids特有的,动画持续时间为2秒,在Y轴上旋转720度,并且平移到(100, 100)的位置。
<code class=" hljs avrasm" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; padding: 0.5em; color: rgb(0, 0, 0); border-radius: 0px; display: block; background-image: initial; background-attachment: initial; background-color: transparent !important; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">Button myButton = (Button)findViewById(R<span class="hljs-preprocessor" style="box-sizing: border-box; color: rgb(136, 0, 0);">.id</span><span class="hljs-preprocessor" style="box-sizing: border-box; color: rgb(136, 0, 0);">.myButton</span>)<span class="hljs-comment" style="box-sizing: border-box; color: rgb(136, 136, 136);">; </span>animate(myButton)<span class="hljs-preprocessor" style="box-sizing: border-box; color: rgb(136, 0, 0);">.setDuration</span>(<span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 136, 0);">2000</span>)<span class="hljs-preprocessor" style="box-sizing: border-box; color: rgb(136, 0, 0);">.rotationYBy</span>(<span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 136, 0);">720</span>)<span class="hljs-preprocessor" style="box-sizing: border-box; color: rgb(136, 0, 0);">.x</span>(<span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 136, 0);">100</span>)<span class="hljs-preprocessor" style="box-sizing: border-box; color: rgb(136, 0, 0);">.y</span>(<span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 136, 0);">100</span>)<span class="hljs-comment" style="box-sizing: border-box; color: rgb(136, 136, 136);">; </span></code>
由于时间关系,上述示例代码引用自任玉刚的博客,本人也整理了一份简单的demo,猛击
Demo地址进入。
3. 流程图
3.1 ValueAnimator流程图
3.2 View的ObjectAnimator流程图
4. 详细设计
4.1 核心原理分析
4.1.1 ValueAnimator.java
ObjectAnimator是ValueAnimator的子类,ObjectAnimator负责的是属性动画,但是真正对于动画进行操作的类实际上是ValueAnimator,它定义了nineoldandroids的执行逻辑,是nineoldandroids的核心之一。
启动动画时,会将Animator自身添加到等待执行的动画队列中(sPendingAnimations),然后通过AnimationHandler发送一个ANIMATION_START的消息来通知nineoldandroids启动动画。
<code class=" hljs cs" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; padding: 0.5em; color: rgb(0, 0, 0); border-radius: 0px; display: block; background-image: initial; background-attachment: initial; background-color: transparent !important; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;"> <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">private</span> <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">void</span> <span class="hljs-title" style="box-sizing: border-box; color: rgb(136, 0, 0); font-weight: bold;">start</span>(boolean playBackwards) { <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">if</span> (Looper.myLooper() == <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">null</span>) { <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">throw</span> <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">new</span> AndroidRuntimeException(<span class="hljs-string" style="box-sizing: border-box; color: rgb(136, 0, 0);">"Animators may only be run on Looper threads"</span>); } <span class="hljs-comment" style="box-sizing: border-box; color: rgb(136, 136, 136);">// ......</span> sPendingAnimations.<span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">get</span>().add(<span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">this</span>); <span class="hljs-comment" style="box-sizing: border-box; color: rgb(136, 136, 136);">// ...... </span> AnimationHandler animationHandler = sAnimationHandler.<span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">get</span>(); <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">if</span> (animationHandler == <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">null</span>) { animationHandler = <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">new</span> AnimationHandler(); sAnimationHandler.<span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">set</span>(animationHandler); } animationHandler.sendEmptyMessage(ANIMATION_START); }</code>
AnimationHandler是ValueAnimator的内部类,它的职责是处理动画的持续执行。
<code class=" hljs java" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; padding: 0.5em; color: rgb(0, 0, 0); border-radius: 0px; display: block; background-image: initial; background-attachment: initial; background-color: transparent !important; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;"> <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">private</span> <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">static</span> <span class="hljs-class" style="box-sizing: border-box;"><span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">class</span> <span class="hljs-title" style="box-sizing: border-box; color: rgb(136, 0, 0); font-weight: bold;">AnimationHandler</span> <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">extends</span> <span class="hljs-title" style="box-sizing: border-box; color: rgb(136, 0, 0); font-weight: bold;">Handler</span> {</span> <span class="hljs-annotation" style="box-sizing: border-box; color: rgb(136, 136, 136);">@Override</span> <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">public</span> <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">void</span> <span class="hljs-title" style="box-sizing: border-box; color: rgb(136, 0, 0); font-weight: bold;">handleMessage</span>(Message msg) { <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">boolean</span> callAgain = <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">true</span>; ArrayList<ValueAnimator> animations = sAnimations.get(); ArrayList<ValueAnimator> delayedAnims = sDelayedAnims.get(); <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">switch</span> (msg.what) { <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">case</span> ANIMATION_START: ArrayList<ValueAnimator> pendingAnimations = sPendingAnimations.get(); <span class="hljs-comment" style="box-sizing: border-box; color: rgb(136, 136, 136);">// 启动在等待队列中的动画,然后进入ANIMATION_FRAME进行循环执行 </span> <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">case</span> ANIMATION_FRAME: <span class="hljs-comment" style="box-sizing: border-box; color: rgb(136, 136, 136);">// 根据启动时间来判断是否启动等待中的动画,如果是已经启动的动画,则根据时间点来计算此刻该动画应该得到的属性值</span> <span class="hljs-comment" style="box-sizing: border-box; color: rgb(136, 136, 136);">//,并且跟新属性,如果此时动画没有执行完成,则又会通过发布一个ANIMATION_FRAME消息,使得在此进入到这个代码段,</span> <span class="hljs-comment" style="box-sizing: border-box; color: rgb(136, 136, 136);">// 这样就相当于循环执行动画,直到动画完成</span> } } }</code>
在前文中已经说过,如果是属性动画,且系统低于API 11时会通过矩阵变换的形式来处理属性动画效果;否则会通过set + 属性名的形式调用目标对象的setter方法来达到更新属性值。这个版本兼容问题会在初始化动画时进行处理,处理这个问题的函数在ObjectAnimator的initAnimation中。
<code class=" hljs java" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; padding: 0.5em; color: rgb(0, 0, 0); border-radius: 0px; display: block; background-image: initial; background-attachment: initial; background-color: transparent !important; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;"> <span class="hljs-annotation" style="box-sizing: border-box; color: rgb(136, 136, 136);">@Override</span> <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">void</span> initAnimation() { <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">if</span> (!mInitialized) { <span class="hljs-comment" style="box-sizing: border-box; color: rgb(136, 136, 136);">// 注意这里,很重要</span> <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">if</span> ((mProperty == <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">null</span>) && AnimatorProxy.NEEDS_PROXY && (mTarget <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">instanceof</span> View) && PROXY_PROPERTIES.containsKey(mPropertyName)) { setProperty(PROXY_PROPERTIES.get(mPropertyName)); } <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">int</span> numValues = mValues.length; <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">for</span> (<span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">int</span> i = <span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 136, 0);">0</span>; i < numValues; ++i) { mValues[i].setupSetterAndGetter(mTarget); } <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">super</span>.initAnimation(); } }</code>
这里进行包装的属性动画主要是View的alpha、缩放、平移、旋转等几个主要动画。如果是其他类型对象,那么会在会通过该对象中的目标属性的setter和getter方法来访问,例如对象类型是一个自定义的MyCustomButton,它有一个属性为myText,用户通过属性动画修改它时就需要定义它的setter和getter方法,比如setMyText和getMyText,这样nineoldanimations就会在动画执行时通过反射来调用setter方法进行更新对象属性。
4.1.2 ObjectAnimator.java
ObjectAnimator是属性动画的入口类,用户通过上述一系列的静态工厂函数来构建ObjectAnimator,设置完基本属性之后,用户需要设置动画执行时间、重复模式等其他属性(可选)。
上述几个静态函数中,参数1都是需要动画的目标对象,参数二要操作的属性名称,参数三是目标属性的取值范围,如果传递一个值那么该值就是目标属性的最终值;如果传递的是两个值,那么第一个值为起始值,第二个为最终值。
(1)主要函数
<code class=" hljs cs" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; padding: 0.5em; color: rgb(0, 0, 0); border-radius: 0px; display: block; background-image: initial; background-attachment: initial; background-color: transparent !important; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;"> <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">public</span> <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">static</span> ObjectAnimator <span class="hljs-title" style="box-sizing: border-box; color: rgb(136, 0, 0); font-weight: bold;">ofInt</span>(Object target, String propertyName, <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">int</span>... values) ; <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">public</span> <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">static</span> <T> ObjectAnimator <span class="hljs-title" style="box-sizing: border-box; color: rgb(136, 0, 0); font-weight: bold;">ofInt</span>(T target, Property<T, Integer> property, <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">int</span>... values) ; <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">public</span> <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">static</span> ObjectAnimator <span class="hljs-title" style="box-sizing: border-box; color: rgb(136, 0, 0); font-weight: bold;">ofFloat</span>(Object target, String propertyName, <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">float</span>... values) ; <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">public</span> <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">static</span> <T> ObjectAnimator <span class="hljs-title" style="box-sizing: border-box; color: rgb(136, 0, 0); font-weight: bold;">ofFloat</span>(T target, Property<T, Float> property, <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">float</span>... values) ; <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">public</span> <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">static</span> ObjectAnimator <span class="hljs-title" style="box-sizing: border-box; color: rgb(136, 0, 0); font-weight: bold;">ofObject</span>(Object target, String propertyName, TypeEvaluator evaluator, Object... values) ;</code>
4.1.3 KeyFrameSet.java
关键帧集合类在动画运行时会根据流逝的时间因子 ( fraction )和类型估值器来计算当前时间目标属性的最新值,然后将这个值通过反射或者Property的set方法设置给目标对象。下面是获取当前属性值的计算函数。
<code class=" hljs java" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; padding: 0.5em; color: rgb(0, 0, 0); border-radius: 0px; display: block; background-image: initial; background-attachment: initial; background-color: transparent !important; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;"> <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">public</span> Object <span class="hljs-title" style="box-sizing: border-box; color: rgb(136, 0, 0); font-weight: bold;">getValue</span>(<span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">float</span> fraction) { <span class="hljs-comment" style="box-sizing: border-box; color: rgb(136, 136, 136);">// Special-case optimization for the common case of only two keyframes</span> <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">if</span> (mNumKeyframes == <span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 136, 0);">2</span>) { <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">if</span> (mInterpolator != <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">null</span>) { fraction = mInterpolator.getInterpolation(fraction); } <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">return</span> mEvaluator.evaluate(fraction, mFirstKeyframe.getValue(), mLastKeyframe.getValue()); } <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">if</span> (fraction <= <span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 136, 0);">0</span>f) { <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">final</span> Keyframe nextKeyframe = mKeyframes.get(<span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 136, 0);">1</span>); <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">final</span> <span class="hljs-comment" style="box-sizing: border-box; color: rgb(136, 136, 136);">/*Time*/</span>Interpolator interpolator = nextKeyframe.getInterpolator(); <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">if</span> (interpolator != <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">null</span>) { fraction = interpolator.getInterpolation(fraction); } <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">final</span> <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">float</span> prevFraction = mFirstKeyframe.getFraction(); <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">float</span> intervalFraction = (fraction - prevFraction) / (nextKeyframe.getFraction() - prevFraction); <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">return</span> mEvaluator.evaluate(intervalFraction, mFirstKeyframe.getValue(), nextKeyframe.getValue()); } <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">else</span> <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">if</span> (fraction >= <span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 136, 0);">1</span>f) { <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">final</span> Keyframe prevKeyframe = mKeyframes.get(mNumKeyframes - <span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 136, 0);">2</span>); <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">final</span> <span class="hljs-comment" style="box-sizing: border-box; color: rgb(136, 136, 136);">/*Time*/</span>Interpolator interpolator = mLastKeyframe.getInterpolator(); <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">if</span> (interpolator != <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">null</span>) { fraction = interpolator.getInterpolation(fraction); } <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">final</span> <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">float</span> prevFraction = prevKeyframe.getFraction(); <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">float</span> intervalFraction = (fraction - prevFraction) / (mLastKeyframe.getFraction() - prevFraction); <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">return</span> mEvaluator.evaluate(intervalFraction, prevKeyframe.getValue(), mLastKeyframe.getValue()); } Keyframe prevKeyframe = mFirstKeyframe; <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">for</span> (<span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">int</span> i = <span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 136, 0);">1</span>; i < mNumKeyframes; ++i) { Keyframe nextKeyframe = mKeyframes.get(i); <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">if</span> (fraction < nextKeyframe.getFraction()) { <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">final</span> <span class="hljs-comment" style="box-sizing: border-box; color: rgb(136, 136, 136);">/*Time*/</span>Interpolator interpolator = nextKeyframe.getInterpolator(); <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">if</span> (interpolator != <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">null</span>) { fraction = interpolator.getInterpolation(fraction); } <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">final</span> <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">float</span> prevFraction = prevKeyframe.getFraction(); <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">float</span> intervalFraction = (fraction - prevFraction) / (nextKeyframe.getFraction() - prevFraction); <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">return</span> mEvaluator.evaluate(intervalFraction, prevKeyframe.getValue(), nextKeyframe.getValue()); } prevKeyframe = nextKeyframe; } <span class="hljs-comment" style="box-sizing: border-box; color: rgb(136, 136, 136);">// shouldn't reach here</span> <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">return</span> mLastKeyframe.getValue(); }</code>
4.1.4 PropertyValuesHolder.java
PropertyValuesHolder是持有目标属性Property、setter和getter方法、以及关键帧集合的类。如果没有属性的mProperty不为空,比如用户使用了内置的Property或者自定义实现了Property,并且设置给了动画类,那么在更新动画时则会使用Property对象的set方法来更新属性值。否则在初始化时PropertyValuesHolder会拼装属性的setter和getter函数 ( 注意这里的setter和上面说的Property对象的set方法是两码事 ) ,然后检测目标对象中是否含有这些方法,如果含有则获取setter和getter。
<code class=" hljs cs" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; padding: 0.5em; color: rgb(0, 0, 0); border-radius: 0px; display: block; background-image: initial; background-attachment: initial; background-color: transparent !important; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;"> <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">void</span> setupSetter(Class targetClass) { mSetter = setupSetterOrGetter(targetClass, sSetterPropertyMap, <span class="hljs-string" style="box-sizing: border-box; color: rgb(136, 0, 0);">"set"</span>, mValueType); } <span class="hljs-comment" style="box-sizing: border-box; color: rgb(136, 136, 136);">// 通过KeyFrameSet计算属性值</span> <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">void</span> calculateValue(<span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">float</span> fraction) { mAnimatedValue = mKeyframeSet.getValue(fraction); } <span class="hljs-comment" style="box-sizing: border-box; color: rgb(136, 136, 136);">// ...... </span> <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">void</span> setAnimatedValue(Object target) { <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">if</span> (mProperty != <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">null</span>) { <span class="hljs-comment" style="box-sizing: border-box; color: rgb(136, 136, 136);">// 获取新值,并且通过Property的set方法更新值</span> mProperty.<span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">set</span>(target, getAnimatedValue()); } <span class="hljs-comment" style="box-sizing: border-box; color: rgb(136, 136, 136);">// 如果没有设置Property,那么通过属性的setter来反射调用更新</span> <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">if</span> (mSetter != <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">null</span>) { <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">try</span> { mTmpValueArray[<span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 136, 0);">0</span>] = getAnimatedValue(); mSetter.invoke(target, mTmpValueArray); } <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">catch</span> (InvocationTargetException e) { Log.e(<span class="hljs-string" style="box-sizing: border-box; color: rgb(136, 0, 0);">"PropertyValuesHolder"</span>, e.toString()); } <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">catch</span> (IllegalAccessException e) { Log.e(<span class="hljs-string" style="box-sizing: border-box; color: rgb(136, 0, 0);">"PropertyValuesHolder"</span>, e.toString()); } } }</code>
在动画执行时通过关键帧中的插值器和类型估值器来计算最新的属性值( 见calculatVealue函数 ),然后通过反射调用setter方法或者Property对象的set方法设置给目标对象来更新目标属性,循环执行这个过程就实现了动画效果。
5. 杂谈
NineoldAnimations总得来说还是比较不错的,在开发过程中起到了很大的作用。但是从设计角度上看,它可能并不是特别的好,例如代码中到处充斥着没有进行类型检查的警告,也可能是这个库本身存在太多的可变性,导致难以周全。
该项目目前已经标识为DEPRECATED,作者的原意应该是不再更新该库,因为它已经比较稳定,希望朋友们不要误以为是不再建议使用该库的意思。
- NineOldAnimations 设计解析
- NineOldAnimations 设计解析
- NineOldAnimations 源码解析
- NineOldAnimations 源码解析
- Android 开源项目NineOldAnimations详解
- kafka设计解析-kafka Consumer设计解析
- 设计模式解析
- 数据库设计范式解析
- 《设计模式解析》
- 设计模式解析读后感
- 设计模式解析
- 设计模式趣味解析
- 深入解析SpringAOP设计
- 设计模式趣味解析
- DAO设计模式解析
- 读《设计模式解析》
- 读《设计模式解析》
- [笔记] 《设计模式解析》
- 最新数据库排名
- 给年轻工程师的十大忠告
- 230 - Borrowers
- 【UML001】Business Use-Case VS System Use-Case
- 什么是idc
- NineOldAnimations 设计解析
- css 让两个div重叠
- 3.在Ubuntu上为Android增加硬件抽象层(HAL)模块访问Linux内核驱动程序
- Fork and Exec
- 推荐!国外程序员整理的 C++ 资源大全
- Python线程池简单实现
- Linux内核双向循环链表分析
- hdu 1423 Greatest Common Increasing Subsequence 最大公共上升子序列 DP
- 4.在Ubuntu为Android硬件抽象层(HAL)模块编写JNI方法提供Java访问硬件服务接口