安卓動畫系列之屬性動畫實現跳起落下圓圈運動

最近看了淘寶手機端的有些頁面是類似下面這個小球的加載效果。後來了解了下，淘寶是直接一個gif圖片實現效果的，這當然是最簡單的方法。為了加深了解屬性動畫，這次就做個類似的效果。這依舊由幾個簡單的屬性動畫組合在一起，所有動畫都在代碼裡實現了。看注釋就好。

 

上個效果圖：

 

實現代碼：

小球圓圈的XML文件 drawable_dot.xml：

 

Activity的布局文件，就是一個ImageView:

 

主類MainActivity:

 

 

package com.alextam.circlemoveball;

import android.animation.Animator;
import android.animation.AnimatorSet;
import android.animation.ValueAnimator;
import android.media.Image;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.ImageView;

/**
 * @author  Alex Tam
 */
public class MainActivity extends ActionBarActivity {
    private ImageView imv1;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        imv1= (ImageView)findViewById(R.id.imv_tb_dot1);

        setCircleMoveBall();
    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }

    /**
     * 設置小球動畫
     */
    private void setCircleMoveBall()
    {
        ValueAnimator animatorMove = ValueAnimator.ofInt(0,200);
        animatorMove.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                imv1.setTranslationX((Integer) animation.getAnimatedValue());
            }
        });
        animatorMove.setDuration(1000);

        ValueAnimator animatorMoveScale = ValueAnimator.ofFloat(0.0f,100.0f);
        animatorMoveScale.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                float value = (Float)animation.getAnimatedValue();
                //將動畫的小球運動分解為2部，當0.0f - 50.0f小球變大，後面一半50.0f-100.0f小球從大恢復正常
                //這裡效果看起來是小球從平面向屏幕彈起的樣子
                if(value<= 50.0f)
                {
                    imv1.setScaleX(1.0f + value/50);
                    imv1.setScaleY(1.0f + value/50);
                }
                else
                {
                    imv1.setScaleX(1.0f - (value - 100.0f)/50);
                    imv1.setScaleY(1.0f - (value - 100.0f)/50);
                }
            }
        });
        animatorMoveScale.setDuration(1000);

        ValueAnimator animatorBackMove = ValueAnimator.ofInt(200,0);
        animatorBackMove.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                imv1.setTranslationX((Integer) animation.getAnimatedValue());
            }
        });
        animatorBackMove.setDuration(2000);

        ValueAnimator animatorBackScale = ValueAnimator.ofFloat(0.0f,-100.0f);
        animatorBackScale.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                float value = (Float)animation.getAnimatedValue();
                float vluA,vluB;
                //同樣是將小球分解兩步，效果就是動畫中的往後變小，透明度逐漸變低，然後恢復正常大小和透明度的效果
                if( value > -50.0f && value < 0)
                {
                    vluA = 1.1f + value/50;
                    imv1.setAlpha(vluA);
                    imv1.setScaleX(vluA);
                    imv1.setScaleY(vluA);
                }
                else
                {
                    vluB = 0.1f - (value + 50.0f)/50;
                    imv1.setAlpha(vluB);
                    imv1.setScaleX(vluB);
                    imv1.setScaleY(vluB);
                }
            }
        });
        animatorBackScale.setDuration(2000);


        final AnimatorSet set = new AnimatorSet();

        //設置幾個動畫的運動規則
        set.play(animatorMove).with(animatorMoveScale);
        set.play(animatorMoveScale).before(animatorBackMove);
        set.play(animatorBackMove).with(animatorBackScale);
        set.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {
            }

            @Override
            public void onAnimationEnd(Animator animation) {
                //在這裡實現重復運動
                set.start();
            }

            @Override
            public void onAnimationCancel(Animator animation) {
            }

            @Override
            public void onAnimationRepeat(Animator animation) {
            }
        });
        set.start();
    }

}

所有方法的說明，其實都能在上篇找到注釋說明。但是這裡強調一個地方，就是AnimatorSet這個類，並沒有直接提供了類似Animator的setRepeatCount() 和setRepeatMode()方法，所以如果在AnimatorSet中要實現不斷重復的播放動畫，就要借助AnimatorListener接口，在動畫結束( end )的時候去重新調用set.start() 方法。 當然，如果AnimatorSet中的Animator已經設置了重復次數和重復模式，在AnimatorSet中依然是有效的。動畫雖然簡陋了些，但稍作修飾，也可以作為頁面加載的動畫使用，同時加深對原理的認識，在以後的使用中會更加熟練哦。大家多多練習，加油！