android 中心摆动动画,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);

}

}

}

下面是摇摆动画的效果图

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

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