Android开发笔记（十六）秋千摇摆动画SwingAnimation

上节博主介绍了AlphaAnimation和淡入淡出动画的使用，其实AlphaAnimation只是四种补间动画中的一种。那么为了加深对其他补间动画的理解，我想说说旋转动画RotateAnimation的使用，刚好工作中就有类似的应用场景，正好介绍一下。像我们生活中有许多左右摇摆的画面，比如说老式挂钟的钟摆围绕着竖轴左右摇摆，又比如说公园里人们坐在秋千上荡来荡去，这么一想，嗯，这左右摇摆的秋千动画确实贴近生活。

如果我们把钟摆或者秋千想象成一个线段，这个线段以上面的端点为圆心，先从垂直向下的角度向左旋转；转到一定角度，再向右旋转，同样旋转摆到左边的高度；接着再向左旋转，等到这个线段摆到垂直向下时，就完成了摇摆动作的一个循环。这么看，摇摆动画似乎与旋转动画有些关联，再仔细想想，这摇摆动画其实就是由三段旋转动画衔接起来的呀，先是向左旋转60度，然后向右旋转120度，最后向左旋转60度。所以看看能不能从旋转动画RotateAnimation源码中找找思路。

分析RotateAnimation的源码，我们看到RotateAnimation继承自Animation，除了几个构造函数与初始化函数之外，起主要作用的便是applyTransformation函数。

protected void applyTransformation(float interpolatedTime, Transformation t) {
float degrees = mFromDegrees + ((mToDegrees - mFromDegrees) * interpolatedTime);
float scale = getScaleFactor();

if (mPivotX == 0.0f && mPivotY == 0.0f) {
t.getMatrix().setRotate(degrees);
} else {
t.getMatrix().setRotate(degrees, mPivotX * scale, mPivotY * scale);
}
}

该函数的输入参数interpolatedTime表示插值时间（百分比），代码内部的degrees表示在该插值时间的位置度数，scale默认1就不管了。mFromDegrees表示该动画的起始度数，mToDegrees表示该动画的终止度数，都是在初始化时传入的参数。后面代码中的mPivotX和mPivotY，前一个表示旋转圆心的X坐标，后一个表示旋转圆心的Y坐标，默认以图形左上的顶点为圆心（mPivotX=0.0f，mPivotY=0.0f）。如果不是默认圆心，则要以指定坐标为圆心进行旋转。

由此看来，摇摆动画有几个地方需要加以调整：

1、旋转动画初始化时只有两个度数：起始度数、终止度数。摇摆动画则需三个参数：中间度数（既是起始度数也是终止度数）、摆到左侧的度数、摆到右侧的度数。

2、根据插值时间估算当前所处的度数，摇摆动画需要做三个分支判断（对应之前说的摇摆动画由三段旋转动画衔接而成）。如果整个动画持续4秒，那么0-1秒之间是往左的旋转动画，起始度数为中间度数，终止度数为摆到左侧的度数；1-3秒之间是往右的旋转动画，起始度数为摆到左侧的度数，终止度数为摆到右侧的度数；3-4秒之间是往左的旋转动画，起始度数为摆到右侧的度数，终止度数为中间度数。

分析完了，贴上修改后的摇摆动画代码

import android.view.animation.Animation;
import android.view.animation.Transformation;

public class SwingAnimation extends Animation {
private float mMiddleDegrees;
private float mLeftDegrees;
private float mRightDegrees;
private int mPivotXType = ABSOLUTE;
private int mPivotYType = ABSOLUTE;
private float mPivotXValue = 0.0f;
private float mPivotYValue = 0.0f;
private float mPivotX;
private float mPivotY;

public SwingAnimation(float middleDegrees, float leftDegrees, float rightDegrees) {
mMiddleDegrees = middleDegrees;
mLeftDegrees = leftDegrees;
mRightDegrees = rightDegrees;
mPivotX = 0.0f;
mPivotY = 0.0f;
}

public SwingAnimation(float middleDegrees, float leftDegrees, float rightDegrees, float pivotX, float pivotY) {
mMiddleDegrees = middleDegrees;
mLeftDegrees = leftDegrees;
mRightDegrees = rightDegrees;
mPivotXType = ABSOLUTE;
mPivotYType = ABSOLUTE;
mPivotXValue = pivotX;
mPivotYValue = pivotY;
initializePivotPoint();
}

public SwingAnimation(float middleDegrees, float leftDegrees, float rightDegrees, int pivotXType, float pivotXValue,
int pivotYType, float pivotYValue) {
mMiddleDegrees = middleDegrees;
mLeftDegrees = leftDegrees;
mRightDegrees = rightDegrees;
mPivotXValue = pivotXValue;
mPivotXType = pivotXType;
mPivotYValue = pivotYValue;
mPivotYType = pivotYType;
initializePivotPoint();
}

private void initializePivotPoint() {
if (mPivotXType == ABSOLUTE) {
mPivotX = mPivotXValue;
}
if (mPivotYType == ABSOLUTE) {
mPivotY = mPivotYValue;
}
}

@Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
float degrees;
float leftPos = (float) (1.0/4.0);
float rightPos = (float) (3.0/4.0);
if (interpolatedTime <= leftPos) {
degrees = mMiddleDegrees + ((mLeftDegrees - mMiddleDegrees) * interpolatedTime * 4);
} else if (interpolatedTime > leftPos && interpolatedTime < rightPos) {
degrees = mLeftDegrees + ((mRightDegrees - mLeftDegrees) * (interpolatedTime-leftPos) * 2);
} else {
degrees = mRightDegrees + ((mMiddleDegrees - mRightDegrees) * (interpolatedTime-rightPos) * 4);
}
System.out.println("degrees="+degrees);

float scale = getScaleFactor();
if (mPivotX == 0.0f && mPivotY == 0.0f) {
t.getMatrix().setRotate(degrees);
} else {
t.getMatrix().setRotate(degrees, mPivotX * scale, mPivotY * scale);
}
}

@Override
public void initialize(int width, int height, int parentWidth, int parentHeight) {
super.initialize(width, height, parentWidth, parentHeight);
mPivotX = resolveSize(mPivotXType, mPivotXValue, width, parentWidth);
mPivotY = resolveSize(mPivotYType, mPivotYValue, height, parentHeight);
}
}

调用的代码如下

import com.example.exmswing.ui.SwingAnimation;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.Animation;
import android.widget.Button;
import android.widget.ImageView;

public class MainActivity extends Activity implements OnClickListener {

private ImageView iv_swing;
private SwingAnimation swingAnimation;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

Button btn_play = (Button) findViewById(R.id.btn_play);
btn_play.setOnClickListener(this);
iv_swing = (ImageView) findViewById(R.id.iv_swing);
//参数取值说明：中间度数、摆到左侧的度数、摆到右侧的度数、圆心X坐标类型、圆心X坐标相对比例、圆心Y坐标类型、圆心Y坐标相对比例
//坐标类型有三种：ABSOLUTE 绝对坐标，RELATIVE_TO_SELF 相对自身的坐标，RELATIVE_TO_PARENT 相对上级视图的坐标
//X坐标相对比例，为0时表示左边顶点，为1表示右边顶点，为0.5表示水平中心点
//Y坐标相对比例，为0时表示上边顶点，为1表示下边顶点，为0.5表示垂直中心点
swingAnimation = new SwingAnimation(
0f, 60f, -60f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.0f);
swingAnimation.setDuration(4000);     //动画持续时间
swingAnimation.setRepeatCount(0);     //动画重播次数
swingAnimation.setFillAfter(false);  //是否保持动画结束画面
swingAnimation.setStartOffset(500);   //动画播放延迟
}

@Override
public void onClick(View v) {
if (v.getId() == R.id.btn_play) {
iv_swing.startAnimation(swingAnimation);
}
}

}

下面是摇摆动画的效果图



点击下载本文用到的秋千摇摆动画代码