Android属性动画实战

一、概述

属性动画(property animation)是Android 3.0版本开始，系统给我们提供了一种全新的动画模式，功能强大，弥补了补间动画的一些缺陷，几乎是可以完全替代掉补间动画了。

二、代码实战

实战1

先来看一组简单动画效果：



通过属性动画轻松实现这样的效果，代码如下：

package com.czhappy.animationdemo.activity;

import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.animation.PropertyValuesHolder;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.Toast;

import com.czhappy.animationdemo.R;

import static android.animation.ObjectAnimator.ofFloat;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

private ImageView imageView;
private Button move_btn;

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

imageView = (ImageView) this.findViewById(R.id.imageView);
move_btn = (Button) this.findViewById(R.id.move_btn);
move_btn.setOnClickListener(this);
}

@Override
public void onClick(View v) {
switch (v.getId()){
case R.id.move_btn:
//test1();
//test2();
test3();

break;
}

}

public void click(View view){
//Toast.makeText(this, "imageview", Toast.LENGTH_SHORT).show();
click1();
}

private void click1(){
//透明度变化
ObjectAnimator animator = ObjectAnimator.ofFloat(imageView, "alpha", 0f, 1f);
animator.setDuration(1000);
//动画监听事件
//        animator.addListener(new Animator.AnimatorListener() {
//            @Override
//            public void onAnimationStart(Animator animation) {
//
//            }
//
//            @Override
//            public void onAnimationEnd(Animator animation) {
//                  Toast.makeText(MainActivity.this, "animator end", Toast.LENGTH_SHORT).show();
//            }
//
//            @Override
//            public void onAnimationCancel(Animator animation) {
//
//            }
//
//            @Override
//            public void onAnimationRepeat(Animator animation) {
//
//            }
//        });
animator.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
Toast.makeText(MainActivity.this, "animator end", Toast.LENGTH_SHORT).show();
}
});
animator.start();

}

private void test1(){
//横向平移
ofFloat(imageView,"translationX", 0F, 200F).setDuration(1000).start();
//纵向平移
ofFloat(imageView,"translationY", 0F, 200F).setDuration(1000).start();
//360度旋转动画
ofFloat(imageView,"rotation", 0F, 360F).setDuration(1000).start();
}

private void test2(){
PropertyValuesHolder p1 = PropertyValuesHolder.ofFloat("translationX", 0F, 200F);
PropertyValuesHolder p2 = PropertyValuesHolder.ofFloat("translationY", 0F, 200F);
PropertyValuesHolder p3 = PropertyValuesHolder.ofFloat("rotation", 0F, 200F);
ObjectAnimator.ofPropertyValuesHolder(imageView, p1, p2, p3).setDuration(1000).start();
}

private void test3(){
Animator animator1 = ObjectAnimator.ofFloat(imageView,"translationX", 0F, 200F);
Animator animator2 = ObjectAnimator.ofFloat(imageView,"translationY", 0F, 200F);
Animator animator3 = ObjectAnimator.ofFloat(imageView,"rotation", 0F, 360F);
AnimatorSet set = new AnimatorSet();
//set.playTogether(animator1, animator2, animator3);//同时进行
//set.playSequentially(animator1, animator2, animator3);//按先后顺序进行
set.play(animator1).with(animator2);//先平移
set.play(animator3).after(animator1);//后旋转
set.setDuration(1000);
set.start();
}
}

实战2

纵向展开、收缩菜单，先来看一下动画效果：



实现代码如下：

package com.czhappy.animationdemo.activity;

import android.animation.ObjectAnimator;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.animation.BounceInterpolator;
import android.widget.ImageView;
import android.widget.Toast;

import com.czhappy.animationdemo.R;

import java.util.ArrayList;
import java.util.List;

/**
* Description:
* User: chenzheng
* Date: 2016/12/17 0017
* Time: 13:20
*/
public class MenuTestActivity extends AppCompatActivity implements View.OnClickListener{

private int[] res = {R.id.imageView_a, R.id.imageView_b, R.id.imageView_c, R.id.imageView_d, R.id.imageView_e};
private List<ImageView> imageViewList = new ArrayList<ImageView>();
private boolean flag = true;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
this.setContentView(R.layout.activity_menu_test);
initView();
}

private void initView() {
for (int i = 0; i < res.length; i++) {
ImageView imageView = (ImageView) findViewById(res[i]);
imageView.setOnClickListener(this);
imageViewList.add(imageView);
}
}

@Override
public void onClick(View v) {
switch (v.getId()){
case R.id.imageView_a:
if(flag){
showAnim();
flag = false;
}else{
closeAnim();
flag = true;
}
break;
default:
Toast.makeText(MenuTestActivity.this, v.getId()+"", Toast.LENGTH_SHORT).show();
break;
}
}

/**
* 菜单展开动画
*/
private void showAnim() {
for (int i = 0; i < res.length; i++) {
ObjectAnimator animator = ObjectAnimator.ofFloat(imageViewList.get(i), "translationY", 0F, 80F*i);
animator.setDuration(300);
animator.setStartDelay(100);
animator.setInterpolator(new BounceInterpolator());
animator.start();
}
}

/**
* 菜单收缩动画
*/
private void closeAnim() {
for (int i = 0; i < res.length; i++) {
ObjectAnimator animator = ObjectAnimator.ofFloat(imageViewList.get(i), "translationY", 80F*i, 0F);
animator.setDuration(300);
animator.setStartDelay(100);
animator.setInterpolator(new BounceInterpolator());
animator.start();
}
}
}

实战3

圆弧状菜单，先来看一下动画效果：



实现代码如下：

package com.czhappy.animationdemo.activity;

import android.animation.Animator;
import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.animation.PropertyValuesHolder;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.View;
import android.view.animation.BounceInterpolator;
import android.widget.ImageView;
import android.widget.Toast;

import com.czhappy.animationdemo.R;

import java.util.ArrayList;
import java.util.List;

/**
* Description:
* User: chenzheng
* Date: 2016/12/17 0017
* Time: 14:52
*/
public class ArcMenuActivity extends AppCompatActivity implements View.OnClickListener{

private ImageView imageView_a;
private int[] res = {R.id.imageView_b, R.id.imageView_c, R.id.imageView_d, R.id.imageView_e};
private List<ImageView> imageViewList = new ArrayList<ImageView>();
private boolean flag = true;
private float THE_RADIUS = 200f;
private double EACH_ANGLE = 0;

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

private void initView() {
imageView_a = (ImageView) findViewById(R.id.imageView_a);
imageView_a.setOnClickListener(this);
for (int i = 0; i < res.length; i++) {
ImageView imageView = (ImageView) findViewById(res[i]);
imageView.setOnClickListener(this);
imageViewList.add(imageView);
}
EACH_ANGLE = 90/(res.length-1);
}

@Override
public void onClick(View v) {
switch (v.getId()){
case R.id.imageView_a:
if(flag){
showAnim();
flag = false;
}else{
closeAnim();
flag = true;
}
break;
default:
Toast.makeText(ArcMenuActivity.this, v.getId()+"", Toast.LENGTH_SHORT).show();
break;
}
}

/**
* 菜单展开动画
*/
private void showAnim() {
for (int i = 0; i < res.length; i++) {
float move_x = (float)(THE_RADIUS*Math.cos(i*EACH_ANGLE* Math.PI/180));
float move_y = -(float)(THE_RADIUS*Math.sin(i*EACH_ANGLE* Math.PI/180));
Log.e("tag", "move_x="+move_x+",move_y="+move_y);

//            PropertyValuesHolder p1 = PropertyValuesHolder.ofFloat("translationX", 0F, move_x);
//            PropertyValuesHolder p2 = PropertyValuesHolder.ofFloat("translationY", 0F, move_y);
//            ObjectAnimator animator = ObjectAnimator.ofPropertyValuesHolder(imageViewList.get(i), p1, p2);
//            animator.setDuration(500);
//            animator.setStartDelay(300);
//            animator.setInterpolator(new BounceInterpolator());
//            animator.start();

Animator animator1 = ObjectAnimator.ofFloat(imageViewList.get(i),"translationX", 0F, move_x);
Animator animator2 = ObjectAnimator.ofFloat(imageViewList.get(i),"translationY", 0F, move_y);
AnimatorSet set = new AnimatorSet();
set.playTogether(animator1, animator2);//同时进行
set.setInterpolator(new BounceInterpolator());
set.setDuration(500);
set.setStartDelay(300);
set.start();

}
}

/**
* 菜单收缩动画
*/
private void closeAnim() {
for (int i = 0; i < res.length; i++) {
float move_x = (float)(THE_RADIUS*Math.cos(i*EACH_ANGLE* Math.PI/180));
float move_y = -(float)(THE_RADIUS*Math.sin(i*EACH_ANGLE* Math.PI/180));
Log.e("tag", "move_x="+move_x+",move_y="+move_y);

PropertyValuesHolder p1 = PropertyValuesHolder.ofFloat("translationX", move_x, 0F);
PropertyValuesHolder p2 = PropertyValuesHolder.ofFloat("translationY", move_y, 0F);
ObjectAnimator animator = ObjectAnimator.ofPropertyValuesHolder(imageViewList.get(i), p1, p2);
animator.setDuration(500);
animator.setStartDelay(300);
animator.setInterpolator(new BounceInterpolator());
animator.start();
}
}
}