现在的位置: 首页 > 移动开发 > Android > 正文

Android开发笔记(十六)秋千摇摆动画SwingAnimation

2016年05月16日 Android ⁄ 共 4959字 ⁄ 字号 暂无评论

上节博主介绍了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);
		}
	}

}

下面是摇摆动画的效果图

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

点此查看Android开发笔记的完整目录