安卓动画系列之属性动画实现跳起落下圆圈运动

最近看了淘宝手机端的有些页面是类似下面这个小球的加载效果。后来了解了下，淘宝是直接一个gif图片实现效果的，这当然是最简单的方法。为了加深了解属性动画，这次就做个类似的效果。这依旧由几个简单的属性动画组合在一起，所有动画都在代码里实现了。看注释就好。

上个效果图：

实现代码：

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

<?xml version="1.0"  encoding="utf-8" ?><shape xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="oval"    >    <size        android:height="40dp"        android:width="40dp"        />    <solid        android:color="#D2691E"        /></shape>

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

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent" android:layout_height="match_parent">    <ImageView        android:id="@+id/imv_tb_dot1"        android:layout_width="20dp"        android:layout_height="20dp"        android:layout_centerInParent="true"        android:src="@drawable/drawable_dot"        /></RelativeLayout>

主类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中依然是有效的。动画虽然简陋了些，但稍作修饰，也可以作为页面加载的动画使用，同时加深对原理的认识，在以后的使用中会更加熟练哦。大家多多练习，加油！