Android高级动画（1）

大公爵

发布于 2018-09-05 17:26:51

1.3K0

发布于 2018-09-05 17:26:51

为什么要学好动画

动画在移动App开发中的重要性不言而喻，通俗点讲，动画可以让我们的App界面不那么死板，可以带来酷炫的交互效果，用Material Design专业点的说法，动画是一种高级的用户反馈，对用户操作、选择结果的一种反馈，对程序执行过程的动态展示，对用户视觉和注意力的引导，帮助用户更好地理解App的功能设计，Android5.0新生的动画更是体现出这个理念。所以从这点上说，动画的意义远不止酷炫这一层面。

那么我们就更加有理由要学好动画，把动画应用到我们的项目中去。从这篇文章开始，我们将会全面地学习Android中的动画系统。我们会讲到每一种动画的原理、使用方法、应用场景、优缺点等，关于矢量动画，由于原理和实现方式相对复杂，我们会花比较大的篇幅来学习。最后，我们会封装一个通用动画库来简化动画的使用。

OK，那我们废话少说，开始一场愉快的Android动画之旅吧！

大纲

Android高级动画课程大纲

Tween动画

Tween动画是Android最早的动画框架，从Android1.0就开始提供。Tween动画使用简单，功能也不强，支持代码和xml两种方式编写动画。我们来看一个演示：

Tween动画

这是一个常规的Tween动画，用xml编写动画，用AnimationUtils加载动画，实现如下：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="true">

    <rotate android:fromDegrees="0"
            android:toDegrees="359"
            android:duration="1000"
            android:repeatCount="1"
            android:repeatMode="reverse"
            android:pivotX="50%"
            android:pivotY="50%"/>
</set>

LinearLayout layout = (LinearLayout)findViewById(R.id.layout_1);
Animation animation = AnimationUtils.loadAnimation(this, R.anim.tween_1);
layout.startAnimation(animation);

Tween动画使用起来简单，效果也比较流畅，但是缺点也是很明显，首先就是拓展性太差，只能写移动、缩放、旋转、渐变四种动画，以及这四种动画的组合，不支持自定义View的拓展。其次一个致命的缺点就是动画只是屏幕绘制上的动画，控件的属性并没有改变，一个经典的问题就是一个Button从一个地方移动到另一个地方，点击事件还是在原来的地方。所以Tween动画我们现在也基本放弃了，所有使用Tween动画的场景都可以用属性动画来替代。

下面属性动画闪亮登场

属性动画

属性动画是Android3.0版本推出的动画框架，其功能和拓展性都很强。它不仅能实现所有Tween动画的功能，还有很强的拓展性，根本原因是属性动画从本质上已经完全摆脱了控件，虽然我们大多数情况下使用属性动画都是给控件做动画，但是属性动画的底层只是一个数值发生器，和控件没有半毛钱关系。

[数值发生器]

ValueAnimator：数值发生器，这是属性动画的根本，ValueAnimator的功能就是在两个数值范围内，顺序地产生过渡数值，过渡速率可以通过Intepolator来控制，过渡时间通过duration来设置，最终产生一组有特定变化速率的数值序列。那这个数值序列产生了干嘛呢？你想干嘛就干嘛。

ValueAnimator animator = ValueAnimator.ofFloat(0, 100);
animator.setDuration(1000);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator valueAnimator) {
        float fraction = valueAnimator.getAnimatedFraction(); // 当前动画进度百分比，范围是0-1
        float value = (float)valueAnimator.getAnimatedValue(); // 当前动画值，范围是ofFloat的参数
    }
 });

[应用动画]

通过ValueAnimator我们得到了一组变化的数值序列，大多数情况下我们都是拿来给控件做动画，实现如下：

ValueAnimator animator = ValueAnimator.ofFloat(0, 360);
animator.setDuration(1000);
animator.setInterpolator(new AccelerateInterpolator());
animator.setRepeatCount(1);
animator.setRepeatMode(ValueAnimator.REVERSE);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator valueAnimator) {
        float value = (float)valueAnimator.getAnimatedValue();
        imageView.setRotationY(rotate);
    }
 });
animator.start();

我们使用ValueAnimator产生一组0-360的数值序列，数值变化速率遵循AccelerateInterpolator函数，时间为1000毫秒，然后在回调函数里我们可以获取当前动画值value，然后调用imageView.setRotationY(value);这样就实现了imageView的旋转动画。效果如下：

ValueAnimator

[应用拓展]

上面产生的数值序列，我们除了可以用来做动画，还可以用在任何你能想到的地方。比如我们有一个TextView显示金额，这个金额要动画地从0增加到2000，这就可以用ValueAnimator。

ValueAnimator animator = ValueAnimator.ofFloat(0, 2000);
animator.setDuration(1000);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator valueAnimator) {
        float value = (float)valueAnimator.getAnimatedValue();
        textView.setText(String.valueOf(value));
    }
 });
animator.start();

效果如下：

ValueAnimator

[ObjectAnimator]

可能你已经注意到了，ValueAnimator是属性动画底层的数值发生器，虽然拓展性很强，但是用它来写动画实在是麻烦，这一点Google当然也想到了，于是ObjectAnimator就诞生了，它把ValueAnimator封装在里面，我们用它可以简单地实现对控件的动画。代码如下：

ObjectAnimator animator = ObjectAnimator.ofFloat(imageView, "rotationY", 0, 359);
animator.setDuration(1000);
animator.setRepeatCount(1);
animator.setRepeatMode(ValueAnimator.REVERSE);
animator.start();

效果和上面是一样的

ObjectAnimator

第一行代码有三个参数，分别是做动画的控件, 需要动画的属性名，第三个是可变参数，表示动画值的范围。其中属性名是一个字符串，ObjectAnimator会根据这个属性名拼一个set[属性名]（setRotationY）方法，然后用反射调用，从而实现动画。

[自定义View]

既然ValueAnimator可以用在任何地方，那当然也可以用在自定义View。我写了一个很简单的自定义View，就是画一个扇形，扇形的角度由一个叫fraction的属性决定。我们在自定View中需要做动画的属性一定要有一个setFraction方法，以便让属性动画通过反射调用。

ObjectAnimator animator = ObjectAnimator.ofFloat(customView, "fraction", 0, 1);
animator.setDuration(2000);
animator.start();

效果如下：

CustomView

[Path动画]

5.0之后，ObjectAnimator还有一个强大的功能，那就是根据一个Path路径做动画，先看效果：

PathAnimator

这样的效果要让我们自己写还是要费点事的，但是用ObjectAnimator来做就太简单了：

ObjectAnimator animator = ObjectAnimator.ofFloat(iv, View.X, View.Y, path);
animator.setDuration(2000);
animator.setRepeatCount(1);
animator.setRepeatMode(ValueAnimator.REVERSE);
animator.start();

什么？和正常的用法基本一样？是的，区别就是ObjectAnimator.ofFloat方法的重载，传四个参数，第一个是做动画的控件，第二和第三个是动画的方向，第四个就是动画的Path路径，就是这么简单，剩下的就是构建Path了，Path的构建你可以随心所欲。你能构建出多酷炫的Path，它就能展示多酷炫的动画。

Interpolator

Interpolator翻译叫插值器，它是个好东西，它用来控制动画过程的变化速率，没有它我们的动画将会一直匀速变化，如果要自己控制变化速率那也太麻烦了。Android中Interpolator总共有8种。

1、[Linear]

Linear

2、[Accelerate]

Accelerate

3、[Decelerate]

Decelerate

4、[AccelerateDecelerate]

AccelerateDecelerate

5、[Anticipate]

Anticipate

6、[Overshoot]

Overshoot

7、[Bounce]

Bounce

8、[Cycle]

Cycle

帧动画

帧动画是一个比较简单的动画框架，原理就像播放幻灯片一样，传一组图片进去，然后依次循环播放，可以设置每一张图片的播放时间。帧动画可以通过xml创建，也可以java代码动态构建，使用起来还是比较方便的。先看效果：

FrameAnimator

代码如下：

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
                android:oneshot="false">
    <item android:drawable="@mipmap/run_1" android:duration="150" />
    <item android:drawable="@mipmap/run_2" android:duration="150" />
    <item android:drawable="@mipmap/run_3" android:duration="150" />
    <item android:drawable="@mipmap/run_4" android:duration="150" />
</animation-list>

ImageView image = (ImageView) findViewById(R.id.iv_1);
image.setImageResource(R.drawable.animation_list);
AnimationDrawable anim = (AnimationDrawable) image.getDrawable();
anim.start();

可以看出来帧动画的使用还是比较简单的，但是缺点也很明显，就是动画不连续。如果要想动画连续也简单，就把图片做的多一点，每张图片只渐变一点点。但是这样随之而来的另一个问题就是图片太多，体积太大。所以也只能在图片流畅度和图片数量体积之间做一个平衡。这点比较尴尬。但是一般来说用来做一个动画的小Logo还是够用的。

CircularReveral

这是Android5.0推出的新的动画框架，可以给View做一个揭露效果。效果如下：

CircularReveal

效果相当赞有木有！代码实现也很简单：

Animator anim = ViewAnimationUtils.createCircularReveal(oval, oval.getWidth() / 2, oval.getHeight() / 2, oval.getWidth(), 0);
anim.setDuration(2000);
anim.start();

Animator anim = ViewAnimationUtils.createCircularReveal(rect, 0, 0, 0, (float) Math.hypot(rect.getWidth(), rect.getHeight()));
animator2.setDuration(2000);
animator2.start();

五个参数分别是View，中心点坐标，开始半径，结束半径。通过这五个参数的配合，我们可以做出很多不同的效果。

Activity转场动画

1、传统转场动画

传统转场动画我们再熟悉不过了，不再多说，直接看效果：

NormalTrans

代码如下：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="100%"
               android:toXDelta="0%"
               android:duration="500" />
</set>

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="0%"
               android:toXDelta="-40%"
               android:duration="500" />
</set>

startActivity(new Intent(this, Activity2.class));
overridePendingTransition(R.anim.slide_right_in, R.anim.slide_left_out);

2、5.0新转场动画

这个厉害了！5.0新的转场动画分为4种，Explode、Slide、Fade、Share，传统的转场动画只能作用于整个页面，不能对页面中的单个元素做控制，而5.0新转场动画可以控制页面中的每个元素，根据元素动画方式，分为4大类。我们先来看下四种效果：

NewTrans

（1）Explode Explode的效果是下一个页面的元素从四面八方进入，最终形成完整的页面。代码如下：

// 跳转
Intent intent = new Intent(this, CActivity.class);
startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this).toBundle());

// 跳转的Activity
public class CActivity extends AppCompatActivity {

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getWindow().setEnterTransition(new Explode());
        setContentView(R.layout.activity_c);
    }
}

在跳转时就要注意一点，intent后面还要再传一个参数bundle，固定写法ActivityOptions.makeSceneTransitionAnimation(this).toBundle()，下一个Activity根据这个就能识别出使用5.0新转场动画。

跳转的Activity在onCreate方法中，调用getWindow().setEnterTransition(new Explode());即可，注意要在setContentView之前哦。

（2）Slide Slide就是下一个页面元素从底部依次向上运动，最终形成完整的页面。代码如下：

// 跳转
Intent intent = new Intent(this, CActivity.class);
startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this).toBundle());

// 跳转的Activity
public class CActivity extends AppCompatActivity {

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getWindow().setEnterTransition(new Slide());
        setContentView(R.layout.activity_c);
    }
}

和Explode几乎没有什么区别，就是跳转的Activity在onCreate方法中设置transition为Slide即可。

（3）Fade Fade就是下一个页面元素渐变出现，最终形成完整的页面。代码如下：

// 跳转
Intent intent = new Intent(this, CActivity.class);
startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this).toBundle());

// 跳转的Activity
public class CActivity extends AppCompatActivity {

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getWindow().setEnterTransition(new Fade());
        getWindow().setExitTransition(new Fade());
        setContentView(R.layout.activity_c);
    }
}

同样，就是跳转的Activity在onCreate方法中设置transition为Fade即可，只不过这里要最好要同时设置Enter和Exit。

（4）Share Share是最复杂的一种转场方式，在跳转的两个Activity之间，如果有相同的View元素，那么，两个元素就可以设置成共享状态，在跳转时，这个View就会从第一个Activity的显示状态过渡到第二个Activity的显示状态，给用户的感觉仿佛是两个Activity共享一个View。

我们再来单独看下Share的效果：

很酷炫有木有有木有

前后两个Activty都有两个共同的元素，一个机器人Logo，一个Android文字，但是它们在两个Activity中的位置、大小、颜色都不一样。于是，在两个Activity跳转过程中，位置、大小、颜色会自动有一个渐变的过程，从第一个Activity的状态渐变到第二个Activity的状态。从而给人一种两个Activity共享元素的感觉。

代码如下：

<!-- 首先，两个Activity共享的元素需要设置相同的transitionName： android:transitionName="fab" -->
<Button
     android:id="@+id/fab_button"
     android:layout_width="56dp"
     android:layout_height="56dp"
     android:background="@mipmap/ic_launcher"
     android:elevation="5dp"
     android:onClick="explode"
     android:transitionName="fab" />

<Button
     android:id="@+id/fab_button"
     android:layout_width="160dp"
     android:layout_height="160dp"
     android:layout_alignParentEnd="true"
     android:layout_below="@id/holder_view"
     android:layout_marginTop="-80dp"
     android:background="@mipmap/ic_launcher"
     android:elevation="5dp"
     android:transitionName="fab" />

// 跳转时，要为每一个共享的view设置对应的transitionName
View fab = findViewById(R.id.fab_button);
View txName = findViewById(R.id.tx_user_name);
intent = new Intent(this, CActivity.class);
startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this,
        Pair.create(view, "share"),
        Pair.create(fab, "fab"),
        Pair.create(txName, "user_name"))
        .toBundle());

// 跳转的Activity在onCreate方法中开启Transition模式
public class CActivity extends AppCompatActivity {

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
        setContentView(R.layout.activity_c);
    }
}

实现代码看上去比较多，实际也比较简单。毕竟这么酷炫的转场动画化，多写两行代码也值得。

（5）Share转场的经典应用 Share转场这种方式最经典的应用就是列表页跳详情页。因为通常列表页和详情页都会包含相同View元素，使用Share转场给人一种连续过渡效果，体验非常棒。

下面看一个简单的示例：

demo

好了，Activity转场就讲到这里，充分利用这些动画，可以做出非常精彩的转场效果。

OK，Android高级动画第一篇就到这里了，为什么不讲完呢？因为下一篇我们要上点儿硬货，来讲讲Android矢量动画，彻底颠覆传统的动画方式。牛逼酷炫掉渣天的动画效果正在等着你。

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2017.06.28 ，如有侵权请联系 cloudcommunity@tencent.com 删除

android

xml

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

android

xml

登录后参与评论

0 条评论

热度