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>