补间动画有4种类型，平移，旋转，透明度，缩放。补间动画不会改变View的属性,只会改变显示效果.
关于补间动画使用 这个参考:https://blog.csdn.net/carson_ho/article/details/72827747
下面以平移动画为例分析补间动画原理.
补间动画原理 简单理解就是在每一次VSYN到来时 在View的draw方法里面 根据当前时间计算动画进度 计算出一个需要变换的Transformation矩阵 然后最终设置到canvas上去 调用canvas concat做矩阵变换.
先看下上图是总体的流程,下面以向右平移200像素的补间动画为例讲解具体的代码逻辑.
//让View向右平移200像素
TranslateAnimation translateAnimation = new TranslateAnimation(0, 200, 0, 0);
translateAnimation.setDuration(2000);
view.startAnimation(translateAnimation);
调用startAnimation方法设置animation:
//View.java
public void startAnimation(Animation animation) {
animation.setStartTime(Animation.START_ON_FIRST_FRAME);
//设置当前View的animation
setAnimation(animation);
invalidateParentCaches();
//调用invalidate发起绘制请求
invalidate(true);
}
public void setAnimation(Animation animation) {
mCurrentAnimation = animation;
....
}
/**
* Used to indicate that the parent of this view should clear its caches. This functionality
* is used to force the parent to rebuild its display list (when hardware-accelerated),
* which is necessary when various parent-managed properties of the view change, such as
* alpha, translationX/Y, scrollX/Y, scaleX/Y, and rotation/X/Y. This method only
* clears the parent caches and does not causes an invalidate event.
*看注释和硬件加速相关 暂时不讨论 简单理解为父视图增加PFLAG_INVALIDATED标志位。在后面的invalidate方法时，父视图的Canvas将会重建。
* @hide
*/
protected void invalidateParentCaches() {
if (mParent instanceof View) {
((View) mParent).mPrivateFlags |= PFLAG_INVALIDATED;
}
}
上面只是设置了View的成员变量mCurrentAnimation 并且调用了invalidate方法
调用invalidate后最终会调用到ViewRootImpl 注册Choreographer的回调.
在下一次VSYN信号到来时 会调用ViewRootImpl performTraversals 最终会调用到View的draw方法
这个后面会有文章具体说明,可以先大致看下这个图:
下面我们继续分析draw方法是怎样将动画绘制的 且动画是怎样动起来的呢?
//invalidate最终会调用到ViewRootImpl 注册Choreographer的回调.
//在下一次VSYN信号到来时 会调用ViewRootImpl performTraversals 最终会调用到View的draw方法:
/**
* This method is called by ViewGroup.drawChild() to have each child view draw itself.
*/
boolean draw(Canvas canvas, ViewGroup parent, long drawingTime) {
...
//清除上次动画保存的Transformation
if ((parentFlags & ViewGroup.FLAG_CLEAR_TRANSFORMATION) != 0) {
parent.getChildTransformation().clear();
parent.mGroupFlags &= ~ViewGroup.FLAG_CLEAR_TRANSFORMATION;
}
......
final Animation a = getAnimation();
if (a != null) {
//根据当前时间计算当前帧的动画，more表示是否需要执行更多帧的动画
more = applyLegacyAnimation(parent, drawingTime, a, scalingRequired);
concatMatrix = a.willChangeTransformationMatrix();
if (concatMatrix) {
mPrivateFlags3 |= PFLAG3_VIEW_IS_ANIMATING_TRANSFORM;
}
//拿到当前帧需要的变换 ,这个值会在applyLegacyAnimation中进行设置
transformToApply = parent.getChildTransformation();
}
....
if (transformToApply != null) {
if (concatMatrix) {
if (drawingWithRenderNode) {
renderNode.setAnimationMatrix(transformToApply.getMatrix());
} else {
// Undo the scroll translation, apply the transformation matrix,
// then redo the scroll translate to get the correct result.
canvas.translate(-transX, -transY);
canvas.concat(transformToApply.getMatrix());//在这里调用canvas的concat方法,实现最终的平移效果 (做矩阵相乘)
canvas.translate(transX, transY);
}
//标记需要清除Tranformation
parent.mGroupFlags |= ViewGroup.FLAG_CLEAR_TRANSFORMATION;
}
float transformAlpha = transformToApply.getAlpha();
if (transformAlpha < 1) {
alpha *= transformAlpha;
parent.mGroupFlags |= ViewGroup.FLAG_CLEAR_TRANSFORMATION;
}
}
...
}
1.调用applyLegacyAnimation根据当前时间来计算当前帧的动画 同时返回值表示动画是否还没播放完成
2.拿到当前帧需要的变换transformToApply
3.调用canvas.concat 方法 实现最终的平移效果 (做矩阵相乘) 这样我们就将最终的平移想过画到canvas上面了 解决了如何完成绘制的问题.
接下来继续分析applyLegacyAnimation是如何计算当前的帧的动画的
同时动画还没有完全动起来哦,只是完成了一个canvas的concat,我们继续看看是否有新的发现.
private boolean applyLegacyAnimation(ViewGroup parent, long drawingTime,
Animation a, boolean scalingRequired) {
...
//获取Transformation 每个ViewGroup中的子View共同使用一个Transformation 为了多个View有动画时频繁创建多个Transformation
//这个和在draw方法中取出的transformToApply是一个对象 就是最终应用到Canvas上的Transform
final Transformation t = parent.getChildTransformation();
//调用Animation的getTransformation方法来根据当前时间计算Transformation 这个对象的值最终会由getTransformation方法中进行赋值
boolean more = a.getTransformation(drawingTime, t, 1f);
invalidationTransform = t;
...
//如果动画还没有播放完成 需要让动画循环起来 实际上是继续调用invalidate
if (more) {
if (parent.mInvalidateRegion == null) {
parent.mInvalidateRegion = new RectF();
}
final RectF region = parent.mInvalidateRegion;
//调用Animation 的getInvalidateRegion来根据invalidationTransform计算 parent的invalidateRegion
a.getInvalidateRegion(0, 0, mRight - mLeft, mBottom - mTop, region,
invalidationTransform);
// The child need to draw an animation, potentially offscreen, so
// make sure we do not cancel invalidate requests
parent.mPrivateFlags |= PFLAG_DRAW_ANIMATION;
final int left = mLeft + (int) region.left;
final int top = mTop + (int) region.top;
//调用invalidate执行下一次绘制请求,这样动画就动起来了
parent.invalidate(left, top, left + (int) (region.width() + .5f),
top + (int) (region.height() + .5f));
}
}
至此我们解决的动画如何动起来的问题,我们在applyLegacyAnimation方法中会再次调用parent.invalidate 注册一个Choreographer回调,下一次VSYN后又会调用draw方法.这样就循环起来了.
只有当more为false时 表示动画播放完成了 这时候就不会invalidate了.
继续看getTransformation是如何计算Transformation的
//Animation.java
//返回值表示动画是否没有播放完成 并且需要计算outTransformation 也就是动画需要做的变化
public boolean getTransformation(long currentTime, Transformation outTransformation) {
if (mStartTime == -1) {
mStartTime = currentTime;//记录第一帧的时间
}
if (duration != 0) {
normalizedTime = ((float) (currentTime - (mStartTime + startOffset))) / //计算运行的进度(0-1) (当前时间-开始时间+偏移量)/动画总时长
(float) duration;
}
final boolean expired = normalizedTime >= 1.0f || isCanceled(); //判断动画是否播放完成 或者被取消
mMore = !expired;
if (!mFillEnabled) normalizedTime = Math.max(Math.min(normalizedTime, 1.0f), 0.0f); //处理最大值
final float interpolatedTime = mInterpolator.getInterpolation(normalizedTime);//根据插值器计算的当前动画运行进度
applyTransformation(interpolatedTime, outTransformation);//根据动画进度 计算最终的outTransformation
return mMore;
}
getTransformation方法会根据当前的时间判断动画是否播放完成,同时如果未播放完成会调用Animation子类的applyTransformation来计算最终的Transformation.
以平移动画为例 看是怎样计算Transformation
//applyTransformation每种类型的动画都有自己的实现 这里以位移动画为例
//TranslateAnimation.java
@Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
//Transformation可以理解成 存储View的一些变换信息,将变化信息保存到成员变量matrix中
float dx = mFromXDelta;
float dy = mFromYDelta;
if (mFromXDelta != mToXDelta) {
dx = mFromXDelta + ((mToXDelta - mFromXDelta) * interpolatedTime);//计算X方向需要移动的距离
}
if (mFromYDelta != mToYDelta) {
dy = mFromYDelta + ((mToYDelta - mFromYDelta) * interpolatedTime);//计算Y方向需要移动的距离
}
t.getMatrix().setTranslate(dx, dy); //将最终的结果设置到Matrix上面去
}
至此计算完最终的变化然后应用到了Transformation的Matix上,会在draw方法中拿到该Transformation并应用到Canvas上.调用concat
至此我们解决了最开始提出的两个问题动画如何完成一帧的绘制 和 动画如何动起来.
1.如何完成一帧的绘制,实际上是根据当前的时间 来计算动画的进度是百分之多少了 通过(当前时间-开始时间)/动画总时长,计算这一帧应该移动到什么位置了.
比如需要从在1000毫秒内 向右移动100px, 如果当前时间对应的进度是10% 则当前帧需要移动10%*100px 是10像素 会将这个变动设置到Transformation的Matix上去.
最终会应用到Canvas上
2.如何动起来 实际上是解决如何连续绘制 连续调用draw方法的问题
根据上面的分析 在计算当前帧的动画的时候会先根据当前时间来判断动画是否还未播放完成,如果未播放完成则调用parent invalidate方法,继续发起绘制.
思考:为什么在发起下次绘制的时候需要调用parent invalidate方法?
关于invalidateRegion的处理逻辑具体是什么呢?
如果丢帧了动画时间会有修正吗?
参考文章:
https://www.jianshu.com/p/62aab211a606
https://cloud.tencent.com/developer/article/1128140
https://blog.51cto.com/zensheno/513652
