Android 動畫

補間動畫

根據不同的動畫效果，補間動畫分為4種

• 平移動畫
• 縮放動畫
• 旋轉動畫
• 透明度動畫

動畫屬性既可以在xml中設置，也可以在java代碼中寫

插值器Interpolator

簡單的來說插值器就是返回當前動畫的進度，然后根據進度設置動畫當前的效果

這是給動畫設置插值器的方法

android:interpolator="@android:anim/accelerate_interpolator"
    
animator.setInterpolator(new BounceInterpolator());

作用	資源ID	對應Java類
動畫加速進行	@android:anim/accelerate_interpolator	AccelerateInterpolator
快速完成動畫，超出再回到結束樣式	@android:anim/overshoot_interpolator	OvershootInterpolator
先加速再減速	@android:anim/accelerate_decelerate_interpolator	AccelerateDecelerateInterpolator
先退后再加速前進	@android:anim/anticipate_interpolator	AnticipateInterpolator
先退后再加速前進，超出終點后再回終點	@android:anim/anticipate_overshoot_interpolator	AnticipateOvershootInterpolator
最后階段彈球效果	@android:anim/bounce_interpolator	BounceInterpolator
周期運動	@android:anim/cycle_interpolator	CycleInterpolator
減速	@android:anim/decelerate_interpolator	DecelerateInterpolator
勻速	@android:anim/linear_interpolator	LinearInterpolator

AccelerateInterpolator插值器

public float getInterpolation(float input) {
    if (mFactor == 1.0f) {
        return input * input;
    } else {
        return (float)Math.pow(input, mDoubleFactor);
    }
}

自定義插值器

自定義插值器只需要實現TimeInterpolator接口就行

public class MyInterploator implements Interpolator {
    @Override
    public float getInterpolation(float input) {
        return 1-input;
    }
}

這個插值器的就能將動畫由設置的終點向起點進行

一、平移動畫(Translate)

1.在xml中設置相關屬性

<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000"//動畫持續時間，必須設置
    android:startOffset="1000"//動畫延遲開始時間
    android:fillBefore="true"//動畫播放完畢后是否停留在動畫開始狀態默認為true
    android:fillAfter="false"//動畫播放完畢后是否停留在結束狀態默認為false且優先級高于fillBefore
    android:fillEnabled="true"//是否應用fillBefore值對fillAfter無影響
    android:repeatMode="restart"//重復動畫模式 restart(正序) reverse(倒序) 默認為正序
    android:repeatCount="0"//重復播放次數
    //以上是補間動畫都有的屬性
    //以下是平移動畫默認的屬性
    android:fromXDelta="50%p"//視圖在水平方向x的起始值
    android:toXDelta="50%"//視圖在水平方向x的結束值
    android:fromYDelta="20"//豎直方向的起始值
    android:toYDelta="50%"//豎直方向的終止值
    >
</translate>

2.在活動中為控件關聯動畫

translate = findViewById(R.id.button1);
Animation translateAnimation = AnimationUtils.loadAnimation(this,R.anim.translate);
translate.startAnimation(translateAnimation);

3.在JAVA代碼中設置動畫

translate = findViewById(R.id.button1);
Animation translateAnimation = new TranslateAnimation(0,500,0,500);
//4個參數分別是x起始值、x終止值、y起始值、y終止值
translateAnimation.setDuration(3000);
translate.startAnimation(translateAnimation);

上面的值有三種

• xxx% 相對于自身控件的大小
• xxx%p 相對于父容器的大小
• xxx 固定大小
  

需要注意的是上面的起始值和終止值都是起始位置與控件原本位置的距離

二、縮放動畫(Scale)

1.在xml中設置相關屬性

<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXScale="0"//動畫在水平方向的起始縮放倍數
    //0零表示收縮到無
    //1表示無縮放
    android:toXScale="2"//水平結束倍數
    android:fromYScale="1"
    android:toYScale="2"
    android:pivotX="50%"//縮放軸點
    android:pivotY="50%"//縮放軸點        android:duration="3000"
    >
</scale>

2.在活動中為控件關聯動畫

scale = findViewById(R.id.button2);
Animation scaleAnimation = AnimationUtils.loadAnimation(this,R.anim.scale);
scale.startAnimation(scaleAnimation);

3.在Java中設置動畫

 scale = findViewById(R.id.button2);
Animation scaleAnimation = new ScaleAnimation(0,2,0,2,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
scaleAnimation.setDuration(3000);
//前4個參數分別為xy的起始終止zhi
// 5. pivotXType:縮放軸點的x坐標的模式
// 6. pivotXValue:縮放軸點x坐標的相對值
// 7. pivotYType:縮放軸點的y坐標的模式
// 8. pivotYValue:縮放軸點y坐標的相對值
// pivotXType = Animation.ABSOLUTE:縮放軸點的x坐標 = View左上角的原點 在x方向 加上 pivotXValue數值的點(y方向同理) +
// pivotXType = Animation.RELATIVE_TO_SELF:縮放軸點的x坐標 = View左上角的原點 在x方向 加上 自身寬度乘上pivotXValue數值的值(y方向同理) 
// pivotXType = Animation.RELATIVE_TO_PARENT:縮放軸點的x坐標 = View左上角的原點 在x方向 加上 父控件寬度乘上pivotXValue數值的值 (y方向同理)
scale.startAnimation(scaleAnimation);

三、旋轉動畫

1.在xml中設置相關屬性

<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"//動畫開始旋轉角度
    android:toDegrees="360"//結束旋轉角度
    android:pivotX="50%"//旋轉節點
    android:pivotY="50%"
    android:duration="3000"
    >
</rotate>

2.在活動中為控件關聯動畫

rotate = findViewById(R.id.button3);
Animation rotateAnimation = AnimationUtils.loadAnimation(this,R.anim.rotate);
rotate.startAnimation(rotateAnimation);

3.在Java中設置動畫

rotate = findViewById(R.id.button3);
Animation rotateAnimation =  new RotateAnimation(0,270,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
scaleAnimation.setDuration(3000);
// 1. fromDegrees ：動畫開始時 視圖的旋轉角度(正數 = 順時針，負數 = 逆時針) 
// 2. toDegrees ：動畫結束時 視圖的旋轉角度(正數 = 順時針，負數 = 逆時針) 
// 3. pivotXType：旋轉軸點的x坐標的模式 
// 4. pivotXValue：旋轉軸點x坐標的相對值 
// 5. pivotYType：旋轉軸點的y坐標的模式 
// 6. pivotYValue：旋轉軸點y坐標的相對值
//模式值同樣分為 Animation.RELATIVE_ABSLUTE、Animation.RELATIVE_TO_SELF、Animation.RELATIVE_TO_PARENT
rotate.startAnimation(rotateAnimation);

四、透明度動畫

1.在xml中設置相關屬性

<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromAlpha="1.0"//動畫開始透明度(范圍: -1~1)
    android:toAlpha="0.0"//結束透明度
    android:duration="2000"
    android:fillAfter="true">
</alpha>

2.在活動中為控件關聯動畫

alpha = findViewById(R.id.button4);
Animation alphaAnimation = AnimationUtils.loadAnimation(this,R.anim.rotate);
alpha.startAnimation(alphaAnimation);

3.在Java中設置動畫

alpha = findViewById(R.id.button4);
Animation alphaAnimation = new AlphaAnimation(1,0);
alphaAnimation.setDuration(3000);
alpha.startAnimation(alphaAnimation);

五、組合動畫

1.在xml中設置相關屬性

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="5000"
    android:shareInterpolator="true"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:repeatMode="reverse"
    >
    <alpha
        android:fromAlpha="1.0"
        android:toAlpha="0.0"
        android:duration="2000"
        android:fillAfter="true"
        />
    <translate
        android:fromXDelta="100%"
        android:fromYDelta="100%"
        android:toXDelta="0%"
        android:toYDelta="0%"
        android:duration="2000"
        />
    <rotate
        android:fromDegrees="0"
        android:toDegrees="360"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="3000"
        />
    <scale
        android:fromXScale="1"
        android:toXScale="2"
        android:fromYScale="1"
        android:toYScale="2"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="3000"
        />
</set>

2.在活動中為控件關聯動畫

set = findViewById(R.id.button5);
Animation setAnimation = AnimationUtils.loadAnimation(this,R.anim.set);
set.startAnimation(setAnimation);

3.在Java中設置動畫

set = findViewById(R.id.button5);
Animation scaleAnimation = new ScaleAnimation(0,2,0,2,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
scaleAnimation.setDuration(3000);

Animation rotateAnimation =  new RotateAnimation(0,270,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
rotateAnimation.setDuration(3000);

Animation alphaAnimation = new AlphaAnimation(1,0);
alphaAnimation.setDuration(3000);

Animation   translateAnimation = new TranslateAnimation(0,500,0,500);
translateAnimation.setDuration(3000);
        
AnimationSet setAnimation = new AnimationSet(true);
setAnimation.addAnimation(translateAnimation);
setAnimation.addAnimation(scaleAnimation);
setAnimation.addAnimation(rotateAnimation);
setAnimation.addAnimation(alphaAnimation);
set.startAnimation(setAnimation);

動畫的一部分效果圖

監聽回調

animation.setAnimationListener(new Animation.AnimayionListener(){
    @Override
    public void onAnimationStart(Animation animation){
        
    }
    @Override
    public void onAnimationEnd(Animation animation){
        
    }
    @Override
    public void onAnimationRepeat(Animation animation){
        
    }
}

屬性動畫

ValueAnimatior

這個是屬性動畫中核心的東西

它的內部使用一種時間循環的機制來計算值與值之間的動畫過渡，我們只需要將初始值和結束值提供給ValueAnimator，并且告訴它動畫所需運行的時長，那么ValueAnimator就會自動幫我們完成從初始值平滑地過渡到結束值這樣的效果。除此之外，ValueAnimator還負責管理動畫的播放次數、播放模式、以及對動畫設置監聽器等，確實是一個非常重要的類。

下面的代碼就將0較為平滑的過度到100

    ValueAnimator anim = ValueAnimator.ofInt(1,  100);
    anim.setDuration(500);
    anim.setStartDelay(500);
    anim.setRepeatCount(0);
    anim.setRepeatMode(ValueAnimator.RESTART);

    anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            int currentValue = (Integer)animation.getAnimatedValue();
            Log.d("TAG", "cuurent value is " + currentValue);
        }
    });
    anim.start();

ObjectAnimatior

這里如果我們想要將一個TextView在5秒中內從常規變換成全透明，再從全透明變換成常規，就可以這樣寫：

ObjectAnimator animator = ObjectAnimator.ofFloat(textview, "alpha", 1f, 0f, 1f);
animator.setDuration(5000);
animator.start();

插值器TimeInterpolator 估值器TypeEvaluator

插值器就是返回當前動畫的進度，然后將進度以百分比的形式傳遞給估值器

估值器相當于一個轉換器，得到插值器給的百分比以后,將這個百分比轉換為具體的值去賦值給對象，再進行重繪

插值器決定值的變化規律，而值的具體變化交給估值器

其實ValueAnimator的過度就是以這2個為基礎的。

自定義估值器

先看一下IntEvaluator的源碼

public class IntEvaluator implements TypeEvaluator<Integer> {
    public Integer evaluate(float fraction, Integer startValue, Integer endValue) {
        int startInt = startValue;
        return (int)(startInt + fraction * (endValue - startInt));
    }
}

自定義估值器需要實現TypeEvaluator接口&復寫evaluate.

public class MyEvaluator implements TypeEvaluator{

    @Override
    public Object evaluate(float fraction, Object startValue, Object endValue){
        Point start = (Point) startValue;
        Point end = (Point) endValue;
        float x = end.getX() - start.getX();
        float y = end.getY() - start.getY();
        x = start.getX()+x*fraction;
        y = (float) (y*Math.sin((double) fraction*Math.PI));
        Point point = new Point(x,y);
        return point;
    }
}

public class MyAnimationView extends View {
    public static final float RADIUS = 50f;

    private Point currentPoint;

    private Paint mPaint;

    public MyAnimationView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setColor(Color.BLUE);
    }
    @Override
    protected void onDraw(Canvas canvas) {
        if (currentPoint == null) {
            currentPoint = new Point(RADIUS, RADIUS);
            drawCircle(canvas);
        } else {
            drawCircle(canvas);
        }
    }
    public void setCurrentPoint(Point point){
        currentPoint = point;
        invalidate();
    }

    private void drawCircle(Canvas canvas) {
        float x = currentPoint.getX();
        float y = currentPoint.getY();
        canvas.drawCircle(x, y, RADIUS, mPaint);
    }
}



    @Override
public void onClick(View view){
    switch (view.getId()){
        case R.id.start:
            Point start = new Point(50,50);
            Point end = new Point(1500,1500);
            ValueAnimator animator = ValueAnimator.ofObject(new MyEvaluator(),start,end);
            animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    Point point = (Point) animation.getAnimatedValue();
                    myAnimationView.setCurrentPoint(point);
                    Log.d("dddd","pointx:"+point.getX()+" pointy:"+point.getY());
                }
            });
            animator.setDuration(5000);
            animator.start();
            break;
    }
}