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);
		}
	}

}

下面是摇摆动画的效果图




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