Android动画完全解析--View动画
一、View动画
1、常见的4中View动画：AlphaAnimation、ScaleAnimation、TranslateAnimation、RotateAnimation
使用动画的方式有两种：一种是xml形式、另一种是java代码。使用起来都比较简单。还有一种AnimationSet，它是动画集合，将几种动画合在一起使用，下面AnimationSet来写动画。
创建缩放/透明动画
//创建AnimationSet对象
aSet = new AnimationSet(false);
//创建动画对象
sAnim = new ScaleAnimation(1, 0.5f, 1, 0.5f);
//设置动画执行时间
sAnim.setDuration(3000);
//添加动画到集合中
aSet.addAnimation(sAnim);
aAnim = new AlphaAnimation(1, 0.5f);
aAnim.setDuration(3000);
aSet.addAnimation(aAnim);
开始执行动画
aSet.start() ;
btn_sys.setAnimation(aSet) ;
就这样，完成了一个动画集合的小例子，其它几种动画的使用方法类似。
2.View动画的源码分析
分析源码之前，我们需要知道这4种动画其实都是Animation的子类，而如果想要实现动画效果，则必须重写applyTransformation()方法，这点可以从这个方法的注释可以看出。
/**
* Helper for getTransformation. Subclasses should implement this to apply
* their transforms given an interpolation value. Implementations of this
* method should always replace the specified Transformation or document
* they are doing otherwise.
*
* @param interpolatedTime The value of the normalized time (0.0 to 1.0)
* after it has been run through the interpolation function.
* @param t The Transformation object to fill in with the current
* transforms.
*/
protected void applyTransformation(float interpolatedTime, Transformation t) {
}
OK，这里我们分析ScaleAnimation，其它三个可以自行分析。
ScaleAnimation
首先，我们看下构造函数
public ScaleAnimation(float fromX, float toX, float fromY, float toY,
float pivotX, float pivotY) {
mResources = null;
mFromX = fromX;
mToX = toX;
mFromY = fromY;
mToY = toY;
mPivotXType = ABSOLUTE;
mPivotYType = ABSOLUTE;
mPivotXValue = pivotX;
mPivotYValue = pivotY;
initializePivotPoint();
}
源码很简单，只是将传递过来的变量赋值，然后调用initializePivotPoint()方法
private void initializePivotPoint() {
if (mPivotXType == ABSOLUTE) {
mPivotX = mPivotXValue;
}
if (mPivotYType == ABSOLUTE) {
mPivotY = mPivotYValue;
}
}
在构造函数执行完之后，马上就会执行initialize()，获取缩放中心点坐标
@Override
public void initialize(int width, int height, int parentWidth, int parentHeight) {
super.initialize(width, height, parentWidth, parentHeight);
mFromX = resolveScale(mFromX, mFromXType, mFromXData, width, parentWidth);
mToX = resolveScale(mToX, mToXType, mToXData, width, parentWidth);
mFromY = resolveScale(mFromY, mFromYType, mFromYData, height, parentHeight);
mToY = resolveScale(mToY, mToYType, mToYData, height, parentHeight);
mPivotX = resolveSize(mPivotXType, mPivotXValue, width, parentWidth);
mPivotY = resolveSize(mPivotYType, mPivotYValue, height, parentHeight);
}
紧接着，当调用animation.start()方法，
public void setStartTime(long startTimeMillis) {
mStartTime = startTimeMillis;
mStarted = mEnded = false;
mCycleFlip = false;
mRepeated = 0;
mMore = true;
}
/**
* Convenience method to start the animation the first time
* {@link #getTransformation(long, Transformation)} is invoked.
*/
public void start() {
setStartTime(-1);
}
这个只是开启设置下时间，重要的是view.setAnimation()这个方法。如果上面的例子代码不书写view.setAnimation()，则不会出现动画效果，而如果书写.start()方法则依然可以执行，只不过再第二次执行时候的是在第一次执行的基础上，不是我们想要的结果。看源码
/**
* Sets the next animation to play for this view.
* If you want the animation to play immediately, use
* {@link #startAnimation(android.view.animation.Animation)} instead.
* This method provides allows fine-grained
* control over the start time and invalidation, but you
* must make sure that 1) the animation has a start time set, and
* 2) the view's parent (which controls animations on its children)
* will be invalidated when the animation is supposed to
* start.
*
* @param animation The next animation, or null.
*/
public void setAnimation(Animation animation) {
mCurrentAnimation = animation;
if (animation != null) {
// If the screen is off assume the animation start time is now instead of
// the next frame we draw. Keeping the START_ON_FIRST_FRAME start time
// would cause the animation to start when the screen turns back on
if (mAttachInfo != null && !mAttachInfo.mScreenOn &&
animation.getStartTime() == Animation.START_ON_FIRST_FRAME) {
animation.setStartTime(AnimationUtils.currentAnimationTimeMillis());
}
animation.reset();
}
}
从注释中可以看出，和start方法调用的是同一个方法。接着执行的是applyTransformation()这个方法，此方法是自行实现的，而且冲该方法的注释可以看出这个方法是是Helper for getTransformation.查看getTransformation()
/**
* Gets the transformation to apply at a specified point in time. Implementations of this
* method should always replace the specified Transformation or document they are doing
* otherwise.
*
* @param currentTime Where we are in the animation. This is wall clock time.
* @param outTransformation A transformation object that is provided by the
* caller and will be filled in by the animation.
* @return True if the animation is still running
*/
public boolean getTransformation(long currentTime, Transformation outTransformation) {
if (mStartTime == -1) {
mStartTime = currentTime;
}
final long startOffset = getStartOffset();
final long duration = mDuration;
float normalizedTime;
if (duration != 0) {
normalizedTime = ((float) (currentTime - (mStartTime + startOffset))) /
(float) duration;
} else {
// time is a step-change with a zero duration
normalizedTime = currentTime < mStartTime ? 0.0f : 1.0f;
}
final boolean expired = normalizedTime >= 1.0f;
mMore = !expired;
if (!mFillEnabled) normalizedTime = Math.max(Math.min(normalizedTime, 1.0f), 0.0f);
if ((normalizedTime >= 0.0f || mFillBefore) && (normalizedTime <= 1.0f || mFillAfter)) {
if (!mStarted) {
fireAnimationStart();
mStarted = true;
if (USE_CLOSEGUARD) {
guard.open("cancel or detach or getTransformation");
}
}
if (mFillEnabled) normalizedTime = Math.max(Math.min(normalizedTime, 1.0f), 0.0f);
if (mCycleFlip) {
normalizedTime = 1.0f - normalizedTime;
}
final float interpolatedTime = mInterpolator.getInterpolation(normalizedTime);
applyTransformation(interpolatedTime, outTransformation);
}
if (expired) {
if (mRepeatCount == mRepeated) {
if (!mEnded) {
mEnded = true;
guard.close();
fireAnimationEnd();
}
} else {
if (mRepeatCount > 0) {
mRepeated++;
}
if (mRepeatMode == REVERSE) {
mCycleFlip = !mCycleFlip;
}
mStartTime = -1;
mMore = true;
fireAnimationRepeat();
}
}
if (!mMore && mOneMoreTime) {
mOneMoreTime = false;
return true;
}
return mMore;
}
这个方法中有一个特别重要的代码： applyTransformation(interpolatedTime, outTransformation);故它会调用applyTransformation方法来通过矩阵实现变换。
上面整体分析了Animation的执行流程，现在就具体来分析下ScaleAnimation是怎么做到缩放的。其实整个缩放动画一共就不到300行代码，而真正起决定作用的又只有几十行代码。
@Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
float sx = 1.0f;
float sy = 1.0f;
float scale = getScaleFactor();
if (mFromX != 1.0f || mToX != 1.0f) {
sx = mFromX + ((mToX - mFromX) * interpolatedTime);
}
if (mFromY != 1.0f || mToY != 1.0f) {
sy = mFromY + ((mToY - mFromY) * interpolatedTime);
}
if (mPivotX == 0 && mPivotY == 0) {
t.getMatrix().setScale(sx, sy);
} else {
t.getMatrix().setScale(sx, sy, scale * mPivotX, scale * mPivotY);
}
}
由源码可知最后动画还是通过矩阵变换来实现的。这里的interpolatedTime表示差值器，这个概念后面会提到，首先，获取缩放比例，然后，再根据不同时间段获取不同的sx值，最后通过矩阵变换来设置。 其实这个方法是会和前面提到过的getTransformation()这个方法一起执行起作用的，两个方法一直执行都动画结束。下面将会写一个Demo来演示这点。
3.自定义一个动画
前面使用AnimationSet将ScaleAnimation和AlphaAnimation结合起来，那么我们可不可以自定义一个Animation来实现这个效果呢？答案是肯定的。
a.首先，继承Animation
public class ScaleAndAlphaAnimation extends Animation
b.接着就是利用构造函数将需要的参数传递进来
public ScaleAndAlphaAnimation(float fromX, float toX, float fromY, float toY,float fromAlpha, float toAlpha){
this.mFromX = fromX ;
this.mFromY = fromY ;
this.mToX = toX;
this.mToY = toY ;
this.mFromAlpha = fromAlpha ;
this.mToAlpha = toAlpha ;
System.out.println("ScaleAndAlphaAnimation.ScaleAndAlphaAnimation()");
}
c.最后就是复写applyTransformation方法了，这里我是参照ScaleAnimation和AlphaAnimation源码来写的
@SuppressLint("NewApi") @Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
//缩放动画设置
float sx = 1.0f;
float sy = 1.0f;
float scale = getScaleFactor();
if (mFromX != 1.0f || mToX != 1.0f) {
sx = mFromX + ((mToX - mFromX) * interpolatedTime);
}
if (mFromY != 1.0f || mToY != 1.0f) {
sy = mFromY + ((mToY - mFromY) * interpolatedTime);
}
t.getMatrix().setScale(sx, sy);
//透明度动画设置
final float alpha = mFromAlpha;
t.setAlpha(alpha + ((mToAlpha - alpha) * interpolatedTime));
System.out.println("ScaleAndAlphaAnimation.applyTransformation()");
// 这在scaleanimation源码中代表缩放中心掉的位置
// if (mPivotX == 0 && mPivotY == 0) {
// t.getMatrix().setScale(sx, sy);
// }
// else {
// t.getMatrix().setScale(sx, sy, scale * mPivotX, scale * mPivotY);
// }
}
全部代码
public class ScaleAndAlphaAnimation extends Animation{
private float mFromX ;
private float mFromY ;
private float mToX ;
private float mToY ;
private float mFromAlpha ;
private float mToAlpha ;
//缩放比例
private float scale = 1 ;
public ScaleAndAlphaAnimation(float fromX, float toX, float fromY, float toY,float fromAlpha, float toAlpha){
this.mFromX = fromX ;
this.mFromY = fromY ;
this.mToX = toX;
this.mToY = toY ;
this.mFromAlpha = fromAlpha ;
this.mToAlpha = toAlpha ;
System.out.println("ScaleAndAlphaAnimation.ScaleAndAlphaAnimation()");
}
@SuppressLint("NewApi") @Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
//缩放动画设置
float sx = 1.0f;
float sy = 1.0f;
float scale = getScaleFactor();
if (mFromX != 1.0f || mToX != 1.0f) {
sx = mFromX + ((mToX - mFromX) * interpolatedTime);
}
if (mFromY != 1.0f || mToY != 1.0f) {
sy = mFromY + ((mToY - mFromY) * interpolatedTime);
}
t.getMatrix().setScale(sx, sy);
//透明度动画设置
final float alpha = mFromAlpha;
t.setAlpha(alpha + ((mToAlpha - alpha) * interpolatedTime));
System.out.println("ScaleAndAlphaAnimation.applyTransformation()");
// 这在scaleanimation源码中代表缩放中心掉的位置
// if (mPivotX == 0 && mPivotY == 0) {
// t.getMatrix().setScale(sx, sy);
// }
// else {
// t.getMatrix().setScale(sx, sy, scale * mPivotX, scale * mPivotY);
// }
}
@Override
public boolean getTransformation(long currentTime,
Transformation outTransformation) {
System.out.println("ScaleAndAlphaAnimation.getTransformation()");
return super.getTransformation(currentTime, outTransformation);
}
@SuppressLint("NewApi") @Override
protected float getScaleFactor() {
return 0.5f;
}
@Override
public void initialize(int width, int height, int parentWidth,
int parentHeight) {
super.initialize(width, height, parentWidth, parentHeight);
System.out.println("ScaleAndAlphaAnimation.initialize()");
}
}
log输出如下：从这里可以看出，这几个方法执行的顺序是
构造函数–>initialize()–>接着就是applyTransformation()和getTransformation()的重复执行到动画结束了。(先applyTransformation()后getTransformation())
07-12 06:42:57.958: I/System.out(4992): ScaleAndAlphaAnimation.ScaleAndAlphaAnimation()
07-12 06:42:57.958: I/System.out(4992): ScaleAndAlphaAnimation.initialize()
07-12 06:42:57.958: I/System.out(4992): ScaleAndAlphaAnimation.applyTransformation()
07-12 06:42:57.958: I/System.out(4992): ScaleAndAlphaAnimation.getTransformation()
07-12 06:42:57.958: I/System.out(4992): ScaleAndAlphaAnimation.applyTransformation()
07-12 06:42:57.968: I/System.out(4992): ScaleAndAlphaAnimation.getTransformation()
07-12 06:42:57.968: I/System.out(4992): ScaleAndAlphaAnimation.applyTransformation()
07-12 06:42:57.998: I/System.out(4992): ScaleAndAlphaAnimation.getTransformation()
07-12 06:42:57.998: I/System.out(4992): ScaleAndAlphaAnimation.applyTransformation()
07-12 06:42:58.028: I/System.out(4992): ScaleAndAlphaAnimation.getTransformation()
OK,这篇就介绍到这里，下篇继续分析动画。
源码将会在下篇一起给。