补间动画的原理

来源：互联网发布：刷游戏的软件编辑：程序博客网时间：2024/04/30 12:03

补间动画只提供了基本的动态变换，如果想要复杂的动画效果，比如像钟摆一样左摆一下，右摆一下，补间动画就无能为力了，所以有必要了解补间动画的实现原理，这样才能进行适当的改造，使其符合实际的业务需求。

下面以旋转动画RotateAnimation 为例说明补间动画的实现原理

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

@Overrideprotected 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);    }}@Overridepublic 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);}

两个初始化函数都在处理圆心坐标，实际与动画播放有关的代码只有applyTransformation方法，该方法很简单，提供了两个输入参数，第一个参数为插值时间逝去时间的百分比，第二个参数为转换器。方法内部根据插值时间计算当前所处的角度degrees，最后使用转换器把视图旋转到该角度。

查看其他补间动画的源码，发现与RotateAnimation的处理大同小异，对中间状态的视图变换处理不外乎以下两个步骤：

1.根据插值时间计算当前的状态值（如灰度、距离、比率、角度等）

2.在宿主视图上使用该状态值进行变换操作

根据以上原来编写自己的钟摆补间动画

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/ll_swing"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    android:paddingLeft="50dp" >    <ImageView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:scaleType="fitCenter"        android:src="@drawable/clock_top" />    <RelativeLayout        android:layout_width="wrap_content"        android:layout_height="wrap_content" >        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerInParent="true"            android:scaleType="fitCenter"            android:src="@drawable/clock_bg" />        <ImageView            android:id="@+id/iv_swing"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerInParent="true"            android:scaleType="fitCenter"            android:src="@drawable/clock_bottom" />    </RelativeLayout></LinearLayout>

public class SwingAnimActivity extends AppCompatActivity implements View.OnClickListener {    private ImageView iv_swing;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_swing_anim);        iv_swing = (ImageView) findViewById(R.id.iv_swing);        findViewById(R.id.ll_swing).setOnClickListener(this);    }    @Override    protected void onResume() {        super.onResume();        showSwingAnimation();    }    @Override    public void onClick(View v) {        if (v.getId() == R.id.ll_swing) {            showSwingAnimation();        }    }    private void showSwingAnimation() {        //参数取值说明：中间度数、摆到左侧的度数、摆到右侧的度数、圆心X坐标类型、圆心X坐标相对比例、圆心Y坐标类型、圆心Y坐标相对比例        //坐标类型有三种：ABSOLUTE 绝对坐标，RELATIVE_TO_SELF 相对自身的坐标，RELATIVE_TO_PARENT 相对上级视图的坐标        //X坐标相对比例，为0时表示左边顶点，为1表示右边顶点，为0.5表示水平中心点        //Y坐标相对比例，为0时表示上边顶点，为1表示下边顶点，为0.5表示垂直中心点        SwingAnimation 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);   //动画播放延迟        iv_swing.startAnimation(swingAnimation);//    iv_swing.clearAnimation();//    iv_swing.setAnimation(swingAnimation);//    swingAnimation.startNow();//    //setAnimation可能只会播放一次或不播放。如果想点击播放，要用startAnimation//    iv_swing.setAnimation(swingAnimation);//    swingAnimation.startNow();    }}

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);        }        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);    }}
摆动动画由3段旋转动画构成

1.以上面的端点为圆心，钟摆以垂直向下的状态向左旋转，转到左边的某个角度停留住（比如左传60度）
2.钟摆从左边向右边旋转，转到右边的某个角度停住（比如右转120度）与垂直方向的夹角为60度
3.钟摆从右边再向左旋转，当其摆到垂直方向时，完成一个周期的摇摆动作。

阅读全文

0 0