Android Material Design动画（上）

Material Design是在安卓5.0以后出现的，向下兼容的话需使用相应的依赖库即可。Material Design中包含很炫酷的动画效果。这篇简单讲下其中的很小一部分。网上有很多参数资料，比如：http://blog.csdn.net/a396901990/article/details/40187203。
—-主界面——

/**
 * @param
 * @author ldm
 * @description Material Design动画介绍
 * @time 2016/7/7 10:59
 */
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    //界面上一共有4个Button和一小球状态图形
    private Button btn_one, btn_two, btn_three;
    private LinearLayout container;
    private MyBallView ball;

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

    private void initViews() {
        container = (LinearLayout) findViewById(R.id.container);
        this.btn_one = (Button) findViewById(R.id.btn_one);
        this.btn_two = (Button) findViewById(R.id.btn_two);
        this.btn_three = (Button) findViewById(R.id.btn_three);
        this.btn_one.setOnClickListener(this);
        this.btn_two.setOnClickListener(this);
        this.btn_three.setOnClickListener(this);
        ball = new MyBallView(this);
        container.addView(ball);
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.btn_one://小球先向下移动，再向上移动（普通动画，与Mterial Design也没必然关系）
                float y = ball.getY();
                ObjectAnimator obj1 = ObjectAnimator.ofFloat(ball, "y", 850f)//Y轴方向移动
                        .setDuration(2000);//设置动画时间
                obj1.setInterpolator(new AccelerateDecelerateInterpolator());//设置插值器
                ObjectAnimator obj2 = ObjectAnimator.ofFloat(ball, "y", 850f, y).setDuration(2000);
                obj2.setStartDelay(1500);
                obj2.setInterpolator(new AccelerateDecelerateInterpolator());
                obj1.start();
                obj2.start();
                break;
            case R.id.btn_two://先0-1放大，再实现水波状（圆形缩放动画）缩放动画
                btn_two.setPivotX(0);
                btn_two.setPivotY(btn_two.getHeight());
                ObjectAnimator obj3 = ObjectAnimator.ofFloat(btn_two, "scaleX", 0, 1)//X方向缩放
                        .setDuration(2000);
                ObjectAnimator obj4 = ObjectAnimator.ofFloat(btn_two, "scaleY", 0, 1)//Y方向缩放
                        .setDuration(2000);
                obj3.start();
                obj4.start();
                //实现圆形缩放动画
                /**createCircularReveal(View view, int centerX, int centerY, float startRadius, float endRadius)方法参数介绍：
                 *第一个参数view：要进行圆形缩放的对象 view；
                 *第二个（centerX）和第三个（centerY）参数：分别是开始缩放点的 x 和 y 坐标；
                 *第四个（startRadius）和第五个（endRadius）参数：分别是开始的半径和结束的半径。
                 */
                Animator an = ViewAnimationUtils.createCircularReveal(btn_two, 0, btn_two.getHeight(), 0, btn_two.getWidth());
                an.setInterpolator(new LinearInterpolator());//设备为线性插值器
                an.setStartDelay(3000);
                an.setDuration(2000);
                an.start();
                break;
            case R.id.btn_three:
                //第三个和第四Button的动画都写在xml中的，作为Button的背景使用
                break;
        }

    }

    public class MyBallView extends View {
        ShapeHolder ball = null;

        public MyBallView(Context context) {
            super(context);
            // 创建一个球形
            ball = createBall(25, 25);
        }

        public float getX() {
            return ball.getX();
        }

        public float getY() {
            return ball.getY();
        }

        private ShapeHolder createBall(float x, float y) {
            OvalShape circle = new OvalShape();
            circle.resize(100f, 100f);
            ShapeDrawable drawable = new ShapeDrawable(circle);
            ShapeHolder shapeHolder = new ShapeHolder(drawable);
            shapeHolder.setX(x - 25f);
            shapeHolder.setY(y - 25f);
            int red = (int) (Math.random() * 255);
            int green = (int) (Math.random() * 255);
            int blue = (int) (Math.random() * 255);
            int color = 0xff000000 | red << 16 | green << 8 | blue;
            Paint paint = drawable.getPaint(); // new
            // Paint(Paint.ANTI_ALIAS_FLAG);
            int darkColor = 0xff000000 | red / 4 << 16 | green / 4 << 8 | blue
                    / 4;
            RadialGradient gradient = new RadialGradient(37.5f, 12.5f, 50f,
                    color, darkColor, Shader.TileMode.CLAMP);
            paint.setShader(gradient);
            shapeHolder.setPaint(paint);
            return shapeHolder;
        }

        @Override
        protected void onDraw(Canvas canvas) {
            canvas.save();
            canvas.translate(ball.getX(), ball.getY());
            ball.getShape().draw(canvas);
            canvas.restore();
        }

    }
}

—–主界面布局—–

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:text="Material Design Animation Discription" />

    <Button
        android:id="@+id/btn_one"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:text="动画效果一" />

    <Button
        android:id="@+id/btn_two"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:text="动画效果二" />

    <Button
        android:id="@+id/btn_three"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:background="@drawable/ripple_one"
        android:text="动画效果三" />

    <Button
        android:id="@+id/btn_four"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:background="@drawable/ripple_two"
        android:text="动画效果四" />
</LinearLayout>

—-定义的ripple效果动画xml文件——

//ripple_one.xml
<?xml version="1.0" encoding="utf-8"?>
<!--
    Ripple标签，即对应一个RippleDrawable，当它被设置为一个控件的background属性时，控件在按下时，即会显示水波效果，
    必须添加color属性，表示的是点击后的水波颜色
-->
<!--
    添加一添加item，其id为@android:id/mask，drawable属性为引用的颜色(color) ，则水波效果会限定在drawable对应的RippleDrawable本身矩形区域内部。
-->
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#ff00ff">
    <item android:drawable="@android:color/holo_purple"></item>
    <item
        android:id="@android:id/mask"
        android:drawable="@android:color/holo_red_light"></item>
</ripple>

//ripple_two.xml
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#00ff00">
    <item>
      <!--  设置为圆形形状-->
        <shape android:shape="oval">
            <solid android:color="@android:color/holo_green_dark"></solid>
        </shape>
    </item>
</ripple>