Android动画的发展历程：
| 3.0之前 | 3.0 | 5.0 |
|---|---|---|
| View动画 | 增加属性动画，低版本不兼容 | 增加转场动画，低版不本兼容 |
动画在UI开发中算比较重要的一块，合理正确地使用动画可以让你的产品体验更出色。这篇文章主要是总结Android中的动画类型和基本使用方式。
Android动画分类
Demo-属性动画
转场动画
Demo源码: https://github.com/jdqm/AnimationDemo
I.View动画
View动画从大方面来看，可以分为两类，一类是补间（Tween）动画，即我们只需要提供初始状态和终止状态，动画框架自动计算出中间的状态；另一类帧动画，每一帧图片都需要提供，使用简单，但相对来说耗费的资源就比较多。
1.TranslationAnimation
构造方法一
/**
* @param fromXDelta 动画开始时的X坐标
* @param toXDelta 动画停止时的X坐标
* @param fromYDelta 动画开始时的y坐标
* @param toYDelta 动画停止时的y坐标
*
* Note:这里的坐标指定的左上角的坐标
*/
public TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)
1.1举例：将一个图片向右平移100dp，动画时长为300ms，视图停止在动画结束的状态
Animation ta = new TranslateAnimation(0, dpToPixel(100), 0, 0);
ta.setDuration(300);//动画时长
ta.setFillAfter(true); //视图停在动画结束的状态
imageView.startAnimation(ta);
构造方法二
/**
* @param fromXType 指定fromXType的解释方式，可以是 Animation.ABSOLUTE,Animation.RELATIVE_TO_SELF(以自己作为参考点), 或者Animation.RELATIVE_TO_PARENT（以父View作为参考的）.
* @param fromXValue 动画开始的x值， 如果fromXType是ABSOLUTE那就指定一个具体的数字，否则就是一个百分比
*
* Note：其他的参数也是类似的理解方式
*/
public TranslateAnimation(int fromXType, float fromXValue, int toXType, float toXValue,
int fromYType, float fromYValue, int toYType, float toYValue)
1.2举例：实现1.1例子一样的效果,即向右平移100dp
ta = new TranslateAnimation(
Animation.ABSOLUTE, 0,
Animation.ABSOLUTE, dpToPixel(100),
Animation.ABSOLUTE, 0,
Animation.ABSOLUTE, 0);
1.3举例：使用Animation.RELATIVE_TO_PARENT实现从父布局左边移动到父布局的水平中间
ta = new TranslateAnimation(
Animation.RELATIVE_TO_PARENT, 0.0f,
Animation.RELATIVE_TO_PARENT, 0.5f,
Animation.ABSOLUTE, 0,
Animation.ABSOLUTE, 0);
2.缩放动画-ScaleAnimation
Animation sa = new ScaleAnimation(1.0f, 1.5f, 1.0f, 1.5f);
sa.setDuration(300);
sa.setFillAfter(true);
imageView.startAnimation(sa);
3.透明动画-AlphaAnimation
Animation sa = new AlphaAnimation(0.0f, 1.0f);
sa.setDuration(1000);
sa.setFillAfter(true);
imageView.startAnimation(sa);
4.旋转动画-RotationAnimation
Animation sa = new RotateAnimation(0, 180);
sa.setDuration(300);
sa.setFillAfter(true);
imageView.startAnimation(sa);
5.帧动画-FrameAnimation
此文件放于 drawable下：music_animation.xml
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="false">
<item android:drawable="@drawable/music_play01" android:duration="150"/>
<item android:drawable="@drawable/music_play02" android:duration="150"/>
<item android:drawable="@drawable/music_play03" android:duration="150"/>
<item android:drawable="@drawable/music_play04" android:duration="150"/>
</animation-list>
public class FrameAnimationActivity extends AppCompatActivity {
private View frameAnimationView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_twenn_animation);
frameAnimationView = findViewById(R.id.frameAnimationView);
frameAnimationView.setBackgroundResource(R.drawable.music_animation);
}
public void start(View view) {
AnimationDrawable frameAnimation = (AnimationDrawable) frameAnimationView.getBackground();
frameAnimation.start();
}
public void stop(View view) {
AnimationDrawable frameAnimation = (AnimationDrawable) frameAnimationView.getBackground();
frameAnimation.stop();
}
}
View动画除了在Java代码中使用外，还可以在xml中进行定义，放在 res/anim 目录下。
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="300"
android:fillAfter="true"
android:fillBefore="true"
android:repeatMode="restart"
android:shareInterpolator="true">
<translate
android:fromXDelta="0"
android:fromYDelta="0"
android:toXDelta="100"
android:toYDelta="0" />
<alpha
android:fromAlpha="0"
android:toAlpha="1.0" />
<scale
android:fromXScale="0"
android:fromYScale="0"
android:pivotX="0.5"
android:pivotY="0.5"
android:toXScale="1.0"
android:toYScale="1.0" />
<rotate
android:fromDegrees="0"
android:pivotX="0.5"
android:pivotY="0.5"
android:toDegrees="360" />
</set>
在Java代码中使用AnimationUtils来加载这个动画资源。这种写法似乎可读性更好一些，当然这个过程涉及到一些XML的解析，性能上可能会有一些影响，但影响不大。
Animation animation = AnimationUtils.loadAnimation(context, R.anim.animations);
II.属性动画
1.TranslatorAnimator
switch (state) {
case 0:
imageView.animate().translationX(dpToPixel(100))
.setDuration(300)
.setInterpolator(new AccelerateDecelerateInterpolator())
.setListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
Toast.makeText(context.getApplicationContext(), "平移动画结束了", Toast.LENGTH_SHORT).show();
}
});
//如果View默认的Animator没有你想要改变的属性，可以用下面这种写法
//ObjectAnimator animator = ObjectAnimator.ofFloat(imageView, "translationX", dpToPixel(100));
//animator.start();
break;
case 1:
imageView.animate().translationX(0);
break;
case 2:
imageView.animate().translationYBy(dpToPixel(100));
break;
case 3:
imageView.animate().translationYBy(-dpToPixel(100));
break;
case 4:
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
imageView.animate().translationZ(dpToPixel(15));
}
break;
case 5:
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
imageView.animate().translationZ(0);
}
break;
default:
break;
}
2.ScaleAnimator
switch (state) {
case 0:
imageView.animate().scaleX(1.5f)
.setDuration(300)
.setInterpolator(new AccelerateDecelerateInterpolator());
break;
case 1:
imageView.animate().scaleX(1.0f);
break;
case 2:
imageView.animate().scaleY(.5f);
break;
case 3:
imageView.animate().scaleY(1.0f);
break;
default:
break;
}
3.AlphaAnimator
if (state == 0) {
imageView.animate().alpha(0);
state = 1;
} else {
imageView.animate().alpha(1);
state = 0;
}
4.RotationAnimator
switch (state) {
case 0:
imageView.animate().rotation(180);
break;
case 1:
imageView.animate().rotation(0);
break;
case 2:
imageView.animate().rotationX(180);
break;
case 3:
imageView.animate().rotationX(0);
break;
case 4:
imageView.animate().rotationY(180);
break;
case 5:
imageView.animate().rotationY(0);
break;
default:
break;
}
5.PropertyValueHolder
PropertyValuesHolder holder1 = PropertyValuesHolder.ofFloat("translationX", dpToPixel(100));
PropertyValuesHolder holder2 = PropertyValuesHolder.ofFloat("alpha", 1.0f);
PropertyValuesHolder holder3 = PropertyValuesHolder.ofFloat("rotation", 360);
ObjectAnimator animator = ObjectAnimator.ofPropertyValuesHolder(imageView, holder1, holder2, holder3);
animator.setDuration(500)
.start();
6.AnimatorSet
if (state == 0) {
ObjectAnimator animator1 = ObjectAnimator.ofFloat(imageView, "translationX", dpToPixel(100));
ObjectAnimator animator2 = ObjectAnimator.ofFloat(imageView, "rotation", 360);
ObjectAnimator animator3 = ObjectAnimator.ofFloat(imageView, "alpha", 0);
AnimatorSet animatorSet = new AnimatorSet();
//animatorSet.playTogether(animator1, animator2, animator3);
animatorSet.playSequentially(animator1, animator2, animator3);
animatorSet.start();
state = 1;
} else {
ObjectAnimator animator1 = ObjectAnimator.ofFloat(imageView, "translationX", 0);
ObjectAnimator animator2 = ObjectAnimator.ofFloat(imageView, "rotation", 0);
ObjectAnimator animator3 = ObjectAnimator.ofFloat(imageView, "alpha", 1);
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.playTogether(animator1, animator2, animator3);
animatorSet.start();
state = 0;
}
III.转场动画
在Android5.0以前，要个Activity的切换添加一些动画，可以这么干。
startActivity(new Intent(this, TransitionActivity.class));
overridePendingTransition(R.anim.activity_enter_anim, R.anim.activity_exit_anim);
activity_enter_anim.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="500">
<translate
android:fromXDelta="100%"
android:toXDelta="0" />
</set>
activity_exit_anim.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="500">
<translate
android:fromXDelta="0"
android:toXDelta="-100%" />
</set>
但是这种动画只是对整个Activity生效，并不能针对Activity布局里的具体View。Android5.0增加的转场动画，可以有效处理这个问题。
1.source Activity
1.1 Activity java code
public void explode(View view) {
Intent intent = new Intent(this, TransitionsActivity.class);
intent.putExtra("flag", 0);
if (SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this).toBundle());
}
}
public void slide(View view) {
Intent intent = new Intent(this, TransitionsActivity.class);
intent.putExtra("flag", 1);
if (SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this).toBundle());
}
}
public void fade(View view) {
Intent intent = new Intent(this, TransitionsActivity.class);
intent.putExtra("flag", 2);
if (SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this).toBundle());
}
}
public void share(View view) {
View fab = findViewById(R.id.btnFab);
Intent intent = new Intent(this, TransitionsActivity.class);
intent.putExtra("flag", 3);
if (SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this,
Pair.create(view, "share"),
Pair.create(fab, "fab")).toBundle());
}
}
1.2 activity layout
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.jdqm.animationdemo.transition.TransitionActivity">
<Button
android:id="@+id/btnExplode"
android:layout_width="match_parent"
android:layout_height="100dp"
android:onClick="explode"
android:text="explode" />
<Button
android:id="@+id/btnSlide"
android:layout_width="match_parent"
android:layout_height="100dp"
android:onClick="slide"
android:text="slide"
app:layout_constraintTop_toBottomOf="@id/btnExplode" />
<Button
android:id="@+id/btnFade"
android:layout_width="match_parent"
android:layout_height="100dp"
android:onClick="fade"
android:text="fade"
app:layout_constraintTop_toBottomOf="@id/btnSlide" />
<Button
android:id="@+id/btnShare"
android:layout_width="match_parent"
android:layout_height="100dp"
android:onClick="share"
android:text="share"
android:transitionName="share"
app:layout_constraintTop_toBottomOf="@id/btnFade" />
<Button
android:id="@+id/btnFab"
android:layout_width="56dp"
android:layout_height="56dp"
android:background="@drawable/ripple_round"
android:elevation="5dp"
android:transitionName="fab"
app:layout_constraintTop_toBottomOf="@id/btnShare" />
</android.support.constraint.ConstraintLayout>
1.3 ripple_round.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@android:color/holo_green_dark"/>
<corners android:radius="28dp"/>
</shape>
2.target Activity
2.1 Activity Java code
public class TransitionsActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
int flag = getIntent().getExtras().getInt("flag");
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
switch (flag) {
case 0:
getWindow().setEnterTransition(new Explode());
break;
case 1:
getWindow().setEnterTransition(new Slide());
break;
case 2:
getWindow().setEnterTransition(new Fade());
getWindow().setExitTransition(new Fade());
break;
case 3:
break;
default:
break;
}
}
setContentView(R.layout.activity_transitions);
}
}
2.2 activity_layout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.jdqm.animationdemo.transition.TransitionsActivity">
<View
android:id="@+id/holderView"
android:layout_width="match_parent"
android:layout_height="300dp"
android:background="@color/colorAccent"
android:transitionName="share" />
<Button
android:id="@+id/btnFab"
android:layout_width="56dp"
android:layout_height="56dp"
android:layout_alignParentEnd="true"
android:layout_below="@id/holderView"
android:layout_marginEnd="10dp"
android:layout_marginTop="-26dp"
android:background="@drawable/ripple_round"
android:elevation="5dp"
android:transitionName="fab" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/holderView"
android:layout_marginTop="10dp">
<Button
android:id="@+id/button"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_below="@+id/button4" />
<Button
android:id="@+id/button4"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_alignParentStart="true"
android:layout_marginTop="10dp" />
</RelativeLayout>
</RelativeLayout>
IV.总结
动画的实现原理，其实就是通过不断的改变视图的位置并进行重新绘制，难的是如何计算出下一帧的位置、大小等信息，而动画框架则是帮我们完成了这些个杂的计算过程，详情可了解一下动画的插值器Interpolator。
对于以上所提到View动画、属性动画以及转出动画，在给出的Demo中都有完整的示例。需要注意的是，View动画只是对View的影像做了变换，但其实际事件响应坐标等还是在原来的位置，而属性动画则解决了这个问题。
