补间动画的原理

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

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

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

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

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

两个初始化函数都在处理圆心坐标，实际与动画播放有关的代码只有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.钟摆从右边再向左旋转，当其摆到垂直方向时，完成一个周期的摇摆动作。