动画技术总结

动画技术总结

・.动画技术知识.Androi.平台提供了一套完整的动画框架，使得开发

者可以用它来开发各种动画效果。

..一类.Twee.动画，即通过对场景里的对象不断做图像变•.平移、缩

放、旋..产生动画效果；第二类.Fram.动画；3..后引

入.Propcrt.Animatiorio

..Animatio.动画框.Androi.动画就是通.ParentVie.来不断

调.ChildVie.的画布坐标系来实现的，动画的绘制交给.Vie.去处理

而不是让.Vie.本身去绘制。

..Animatio..Transformatio.是实现动画的主要的类，用户可以定义

自己的动画类，只需要继.Animatio.类，然后重.applyTransformatio.

这个函数。

.对动画来说其行为主要靠差值点来决定的，比如，我们想开始动画

是逐渐加快的或者逐渐变慢的，或者先快后慢的，或者是匀速的，这

些功能的实现主要是靠差值函数来实现的，Androi.提供.

-.Interpolato.的基类，你要实现什么样的速度可以重载其

函.getlnterpolation,.Animatio..getTransformatio.中生成差值

点时，会用到这个函数。

..Propert.Animatio.Vie.Animatio.只能支持简单的缩放、平移、

旋转、透明度基本的动画，有一定的局限性。

.比如：

.颜色的切换动画.3.旋转动画；当动画停止时，Vie.的位置就是当

前的位置;这.Vie.Animatio.都无法做到。

.这就.Propert.Animatio.产生的原因。

..1.ValueAnimato.ValueAnimato.是整个属性动画框架的核心类,动

画的驱动就是在此类中实现的。

..属性动画逐帧更新都是.handle.不断发生消息来实现的。

..2.ObjectAnimato.ObjectAnimato.是通过传递进来一个对象，以

及对象的属性名称，.anim.start()执行过程中不断更改对象的属性

值，来实现动画效果的。

..3.传入多个属性值的方.ValueAnimato.要传入多个属性值有这几

种方.1.1.MultipLObjectAnimato.object..2..

3.ObjectAnimato.anim..ObjectAnimator.ofFloat(myView.x.50f).

.4.ObjectAnimato.anim..ObjectAnimator.ofFloat(myView.y.lOOf

)..5.AnimatorSe.EnimSetX..ne.AnimatorSet()..6.animSetXY.pla

yTogether(animX.animY)..7.animSetXY.start()..8..

9.2.On.ObjectAnimato..10..

11.PropertyValuesHolde.pvh..PropertyValuesHolder.ofFloat(x.

50f)..12.PropertyValuesHolde.pvh..PropertyValuesHolder.ofFl

oat(y.lOOf)..13.ObjectAnimator.ofPropertyValuesHolder(myVie

w.pvhX.pvyY).start()..14..15.3.ViewPropertyAnimato.//

这.vie.独有..16.myView.animate().x(50f).y(lOOf)..如果要多

次改变动画效果，可以直接设.keyFrame.1.〃前半段..变.36.度，后

半段.36.度

变2.Keyfram.kf..Keyframe.ofFloat(Of.Of)..3.Keyfram.kf..

Keyframe.ofFloat(.5f.360f)..4.Keyfram.kf..Keyframe.ofFloat(

If.Of)..5.PropertyValuesHolde.pvhRotatio..PropertyValuesHol

der.ofKeyframe(rotation.kfO.kf1.kf2)..6.ObjectAnimato.rotat

ionAni..ObjectAnimator.ofPropertyValueslIolder(target.pvhRot

ation..7.rotationAnim.setDuration(5000ms)..自定义控件常用

方.Androi..Vie.系统是一个树形结构，每个节点是一.view,vie.

的作用主要有两点：

.1、显示内容；2：

.处理事件。

..所以写自定义控件的时候处理好上述两点就可以了。

..一、显示内.一.vie.的显示又可以分..部分：

.测量宽高，布局位置，绘制内容。

.每个部分会.一些方法供我们调用，下面是各个部分的常用方法：

..1、测量宽高：

..measure()：

.vie.发起测量.onMeasure()：

.vie.发起测量后，供外部重写的方法，在此处编写测量逻

辑.getChiIdMeasureSpec()：

・根据.vie..layoutparams，构.mesur.参

数.measureChi1dWithMargins()measureChildren()

measureChild()：

.封装好的方.能够自.mesur..view,不需要自己

构.measurespec.resolveSizeO：

..vie.measur.完毕后进行宽高修正.setMeasuredDimension()：

.measur.完毕后，把宽高设置进去。

・.2、布局位置：

..layout()：

.vie.发起布局.onLayout()：

.vie.布局位置时的回调，在此处可以继续对.vie.进行位置的布

局.onSizeChangedO：

.vie.的大小，位置发生改变的回调.offsetLeftAndRight()：

.vie.左右平移(Galler.控件使用).offsetTopAndBottom()：

.vie.上下平移(ListVie.使用，6..弹幕控件使

用).offsetDescendantRectToMyCoords。：

,将.vie.的矩形范围映射到当.viewgrou.的坐..系(6..通用下载动

画使用).offsetRectlntoDescendantCoords()：

.将在.vie.的坐标系的矩形范围映射到.vie.的坐标系中。

..3、绘制内容：

..draw()：

.vie.发起绘制，绘制步骤一般是背景，vie.自身，.view,滚动

条.onDrawO：

.vie.发起绘制后的回调.dispatchDrawO：

.viewgrou.遍历绘制.view.drawChild()：

.绘制单个.view,可以在单.vie.进行绘制的时候进行一些特殊操作

(6.0弹幕使用).getCh幕使taticsTransformation()：

.此处可以给某.vie.的绘制增加一些特殊逻辑，但此方法在硬件加

速下会丢帧.getChiIdDrawingOrder()：

・史改.vie.的绘制顺序，最后绘制..轴最大。

・.4、可见性：

..dispatchAttachToWindow(..onAttachToWindow(..dispatchDetac

hFromWindow(.,onDetachFromWindowO：

.vie.加入(移除)vie.树.dispatchWindowVisibilityChanged(),

onWindowVisibilityChangedO：

.整.vie.树的可见性发生变化.dispatchVisibilityChangedO,

onVisibi1ityChanged()：

.当.vie.或当.vie.的某个.view的可见性发生了变

化.dispatchStartTemporaryDetach(..onStartTemporaryDetach(.,

dispatchFinishTemporaryDetachO.onFinishTemporaryDetach()：

.listvie.中.vie.被加入重用队列或从重用队列移出重用时的回

调。

•・5、滚动：

..computeScroll()：

.该方法会.onDra.前调用，可以在此处进行绘制前的计

算.scrollToO,scrollBy()：

.滚动到某个位置.Scrolle.类：

.包装一个时间和位置对应的函数，可以获取每个时间点的位置。

..二..处理事件：

..按键事件相..事requestDisaActivit..T上述代码是后会把事件

vie.处理了onTouchEv.ViewGroupViewGroupdispatchTou传递的目

标的确定分两1、.onlnt是调用.vi事件以及后2、touchdo.viewo

.如相关：

.dispatc..相1lowInterceptTouc.事件的.Activit..d件传.window

了这个事件则en.处理。

・・・touc.事件.dispatchchEven.方法标,ViewGrou两种情况：

..terceptTouchiewgrou.的后续的事件传ow.事件没有如果.vie.消

hKeyEvent,.：

..dtTouchEvent,的传递：

..dispatchToucw,也就.v则直.return件的传递：

.hKeyEven.是法则比较复杂u.在第一次Even.的时候onTouchEven

传给了自身的有被拦截，则消耗了这个事onKeyDown,dispatchTouch,

onTouchEvchEven.代码vie.树,而不.true,如果是把事件传递杂,

因为它不touc.down候返回.truento

.如果此方onTouchEve则把事件传递事件，则当前，onKeyUp；

hEven.,vent,Velocit,首先会调用不是传.act果没有处理则递给

获取焦点不知道要把这.的时候会确e,这时.to方法返.truento

.•递给.view,.viewgrou.onlntercepyTracke.类。

..onUserlnteivit.处理。

.如则把事件传给点.view,但这个事件传递确立一个事件ouc.dow.

不，贝ij.viewg经过坐标变不是链尾，ptTouchEven.eractio.方法

如.vie.树给当.activit.ViewGrou递给谁，为了件传递链,传不会

往下传递grou.为链尾变换找到能处通.target.法，然树中有t.的.

的确定传递链递，而尾了，处理的指.下一个节点来处理，如

Touc.dowonlnterceptT.viewgrou件和后续事Vie..to.上述代码是

没有处理则所以在重写点。

.如果.vi如果此方法返.事件后，TouchEven,返u.是链尾了，事件

交给.viuc.事件传递.Vie..dis则交.onTouc.vie..onTie.没有消耗

返.true,则该事件传递链返.tru.会打，在.viewgewgrou.的递:

..spatchTouchEchEvento

.该TouchEven.方耗这个事件，.viewgroup链创建成功后打断这个

链。

,grou.后面的onTouchEvenEven.代码，方法代码比较方法时要加上

就会交给该.为链尾，见后，后续事件。

.如果某.v.vie.都会收n.处理。

.・会把事件先较多，主要做.super.onTo.viewgroup见一。

..件会按着这个viewgrou.打收到一.canc先交.OnTouc做了点击与

长uchEvento

...onTouchE个链来传递打断了传递链ce.事件，当chListener,长

按逻辑的处Event,但链，则前事如果处理，小1,2,根c采采开制

u火箭动.拆分需.前两幅交给.从飞机进入分析动画原1.待2.点3.

飞根据我们目前canva.绘制烟采用以下方案1.通过2.使用动到绘制

3,使用动控4.当烟由.p.后期采用这种方案开发时间和维制，小火箭

飞u.制图对动画画.现给悬浮框来做入机场松手后原形（视觉提待机

状态，小点火发射，火飞行状态，火前对动画使用烟雾的动画是案来

解决这个.canva.绘用帧动网来绘到某个时间点制帧，直到绘.canva.

绘控制烟雾的绘烟雾和小火箭期需求变更，案的好处是：

.维护成本都变飞行和烟雾的画的效果至关.做成本最小：

.后开始小火箭提供.demo小火箭左右抖火焰开始大量火箭开始飞，

用情况，我们是成本巨大的个问题。

..制小火箭，控绘制烟雾，但点后开始绘制绘制完成。

.制小火箭飞行绘制。

..箭动画都跑完抖动动画撤在动画流畅变得很小；缺的效果需要联关

重要，比如小火箭随手箭动.。），飞行共分抖动，准备喷量喷射.直到

飞出屏们可以自己处的（没有此类控制左右摆动但是具体绘制制，直

到某一行动画，一到完，整体动画撤销，换成了畅性保证的同缺点是:

.烟雾联动。

.•如烟雾需要的手指移动，同分为三个阶段喷射,屏幕。

..处理第一步和类库，也没有相动的算法，一制哪一帧由第一帧；开

始飞到两张图表示画结束，展现了一个静态的同时，绘制逻雾的动画

是帧的虚化的边沿同时在屏幕中段和部分：

..和第三步，但相关的技术积一张.第一步和第三飞行后，根据示飞

行中的变现动画结束后小火箭待飞状逻辑简单，复帧动画，流畅沿及

不同程度中心展示机场但是第二步完积累），于是三步联合控制据飞

行的状态变化即可，同后的页面。

..状态。

..复杂度降低，畅性无法很好度的透明效.场。

..完全用是决定制：

.摆态继续时联于是好的控，再比的至R・・..波1.2.比如火箭飞行的

效果-视觉至可以模拟往RockerVie.的如果待机状态绘制小火箭如果

点火状态先绘制烟雾当绘完然后火直到绘如果停止.绘制背浪动画效

果：

.,实现：

..onDra.里面确认波浪离顶1.通.Pat行的图，如果上是模糊的往远

处飞还是.ondra.方态-默认进入后箭和背.态：

..雾的前几帧；完前儿帧后，火火箭和烟雾同绘制完成（烟状态：

・.背景-这里用.面实现绘制波顶部的高度值t.绘制底部为果是个实

心实，长度或者宽是近处飞。

.方法描述：

..后既是此状.火箭起飞，火时继续绘制烟雾到最后一的是火箭烟雾

波浪逻..为矩形，顶部实影的图就会宽度都是相对态：

..火箭根据飞离屏.帧，火箭到屏雾最后一.部为余弦（正会很难看，

此对于飞行方向屏幕的距离计屏幕外.弦）曲线或贝此时就需要抽向

变小的，是计算位置和火塞尔曲线的抽象以下高速是有加速度的火箭

的缩放大区.速飞行的，甚大小.转1.2.2）通.Pat3）使.Can填充颜

色。

.4）通.Run..ClipPorterDuffXfCsetLayerType圈.渐效.

实.onDra.里面1.使.AnonDraw2.有三种方.绘制一个圆nva..clipPa

以上操作分两nnabl.定时偏..没fennode（ModCli...意

e（View.LAYER.充满（面实现绘制波nimatio..a.方法实现（根圆的

区.at.将两.P两层，透明度偏移余弦曲线•・•齿

de.SRC_OUT）..layer_TYPE_SOFTW消退）波浪逻.applyTransfor根据

第一步.at.区域相交度不同。

..线的起始位移・.・以画一个颜色为・..加WARE.nulD^J.rmatio.来

计计算出来的角交，得到的区移，实现波浪...画为透明色的圆・.・，

计算转圈的角角度来画）区域即为圆形浪动态效.・・・置圆圈来消除

边区度，然后使用形波浪，将此Xfermode边缘锯

正.invalidate此区域为.确触...实..布局旋.倒.语法shap..x..

a../..a..a..£..a..ana.直接用于过画b.灰圈sup填充来绘

c.绿圈然后件的效果...用setLaye时.态.动态详..局：

.通过上下分两层的转：

.上层秒针计时布局实现1.自定义2.使用圆形3.ImageVi法细节详

见la.mlns:android=puteS.2..显示的形的卡片区域数据.U.展示根

据每个区间，每个区间对的位置。

••O

..动两部分，分Scrol.方法中的，这样可以域，不会出.示分离，通

过增间的宽高算出对应的线性函分别对应两个中算出当前曲以保证

图片在现露出空白区增加一.ada出控件的宽高函数。

.获取每.Scrolle.实曲线头部的位在旋转域的apter高，通每个点

实例，位置，弹屏幕滚绘制曲透明，的阴•曲线.Tounch参照一理了

-DOWNMOVE：

.滚动控POINTEUP,C.幕..效果实现：

.数据与来实.测量过布局.弹幕动Vie.的adapte.view滚动的位置

以曲线，为了动则不绘制阴影。

..动回后：

.此时,事件处理：

.一些系统源码一下事件：

•••*

.记录下当前：

.计算出当前控件。

..ERUP：

.此时ANCEL：

・手指.：

.•果：

...U.分离：

.使该现。

..过程：

..adap过程：

.此处启动画：

.参.lis的插入：

.从重・.getView..measure及所有需要画的流畅,此影），使.d时绘

制出每.码（ScrollView前按下的位置前的位置和上时处理初始的指

抬起，判断该控件更有通Pte.中获取数动弹幕动画stvie.的重用重

用队列中获.进行数据填・.layout。

.绘制的点。

.在此时只绘制线drawLin.绘制点的，每个点w）编写，实现置，以

及手指上次位置的距的手指抬起的断是否滚动到通用型，将数数据，

算出每。

.•用机制。

•・获取新.view填充，并返回如.vie.是.onDra.方线和线所包围制曲

线，使用点对应.vie现了类.Vie指对应.i.进距离，如果距的情况，

更改到下一页或上数据.U.展示每.ite.的高w,如果重用将要插入到

是从重用队列方法中根