Android开发 - 掌握ConstraintLayout（十一）复杂动画！如此简单！

LuDongWei 发布于2019-06-25 12:31 / 1631人阅读

摘要：动画我们这里通过一个示例来说明动画的创建。效果代码评分分无敌破坏王这个页面是我们执行动画结束后的样子。如果需要复杂布局的动画切换，这种方式的优势就非常明显。显然这样会大大增加复杂度和代码量。

介绍

本系列我们已经介绍了ConstraintLayout的基本用法。学习到这里，相信你已经熟悉ConstraintLayout的基本使用了，如果你对它的用法还不了解，建议您先阅读我之前的文章。

使用ConstraintLayout创建动画的基本思想是我们创建两个不同的布局，每个布局有其不同的约束，从而我们使用其动画框架来进行两种约束之间的切换。

传统动画

以往在我们创建简单动画时，通常我们会使用

视图动画（View Animation）

帧动画（Drawable Animation）

属性动画（Property Animation）

这三种在我们制作简单动画时非常简单和方便，特别是当我们只对某个特定的View制作动画时。但是当我们需要制作复杂动画时，特别是整个页面多个View同时执行动画时，这几种方式就显得力不从心了，需要大量的工作。

当然还有一种方式就是使用转场动画框架(Transition Framework)，通过共享元素(Shared Element)制作动画，这个后面我们也会提到。

ConstraintLayout动画

我们这里通过一个示例来说明ConstraintLayout动画的创建。

首先，我们创建第一个布局（activity_main.xml），它是是我们的初始布局。

效果：

代码：

我们的初始布局创建完毕后，我们需要创建一个动画结束布局，让动画框架知道执行完动画后布局是什么样的。

创建动画结束布局（activity_main_detail.xml）。

效果：

代码:

这个页面是我们执行动画结束后的样子。那么开始和结束的布局我们都有了，我们怎样执行动画，让两个布局之间进行过渡呢？

答案是通过Android的TransitionManager来执行。

使用TransitionManager来执行动画

代码（MainActivity.java）

package cn.examplecode.constraintlayoutdemo;

import android.support.constraint.ConstraintLayout;
import android.support.constraint.ConstraintSet;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.transition.TransitionManager;

public class MainActivity extends AppCompatActivity {

    private ConstraintLayout mConstraintLayout;
    private boolean mIsDetail;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mConstraintLayout = findViewById(R.id.cl_root);

        ConstraintSet constraintSet1 = new ConstraintSet();
        ConstraintSet constraintSet2 = new ConstraintSet();

        constraintSet2.clone(this, R.layout.activity_main_detail);
        constraintSet1.clone(mConstraintLayout);

        findViewById(R.id.iv_poster).setOnClickListener(v -> {
            TransitionManager.beginDelayedTransition(mConstraintLayout);
            if (!mIsDetail) {
                constraintSet2.applyTo(mConstraintLayout);
                mIsDetail = true;
            } else {
                constraintSet1.applyTo(mConstraintLayout);
                mIsDetail = false;
            }
        });
    }
}

我们来解释以上代码。
首先我们发现使用了这个类ConstraintSet，它是一个约束集合，保存了布局上所有元素的约束，因为我们需要在两个布局之间执行动画，所以我们需要创建两个约束集合的对象。

ConstraintSet constraintSet1 = new ConstraintSet();
ConstraintSet constraintSet2 = new ConstraintSet();

创建完约束集对象后，我们需要设置每个约束集对应的约束：

constraintSet2.clone(this, R.layout.activity_main_detail);
constraintSet1.clone(mConstraintLayout);

这里我们将当前布局的约束应用到constraintSet1中，将目标布局的约束应用到constraintSet2中。

接下来我们执行动画：

TransitionManager.beginDelayedTransition(mConstraintLayout);
# 从constraintSet1过渡到constraintSet2
constraintSet2.applyTo(mConstraintLayout);

# 从constraintSet2过渡到constraintSet1
constraintSet1.applyTo(mConstraintLayout);

最终效果：

只需简单的几行代码，就可以实现复杂的动画了！当然本示例为了说明ConstraintLayout动画的创建方法，布局比较简单。
如果需要复杂布局的动画切换，这种方式的优势就非常明显。如果使用传统创建动画方法，则有可能需要大量的时间和代码来实现。

问题探讨 为什么需要创建两个布局文件？

可能有人认为创建两个布局文件不是一个好的方式，两个布局中存在重复的代码，这样好吗？

实际上可能并没有你想象的那么不好，创建两个布局文件的目的只是让动画框架知道不同的约束而已，然后将不同的约束应用在过渡动画中，你可以在布局中把与约束无关的属性去掉。
如果你实在不喜欢创建两个布局文件的话，当然也可以在代码中来描述不同的约束。显然这样会大大增加复杂度和代码量。

与使用共享元素动画(Shared Element)有什么区别？

使用共享元素动画当然也可以实现这样的效果，但是使用共享元素动画你也需要创建两个布局，而且关键的不同是：
使用ConstraintLayout执行动画时，动画前后的View是同一个View对象。
而使用共享元素动画时动画前后的View是两个不同的View对象！

系列总结

本篇是本系列博客《掌握ConstraintLayout》的最后一篇。通过本系列的学习，相信你已经掌握了使用ConstraintLayout的大部分功能。

在实际开发的过程中，使用ConstraintLayout会使开发速度有不少的提升，再结合我的另一个系列《使用Data Binding》，会大大减少开发Android时的工作量，达到事半功倍的效果，提升生产力！

谢谢你的支持！

如有更多疑问，请参考我的其它Android相关博客：我的博客地址

云服务器服务器托管 android简单开发前端开发需要掌握前端开发需要掌握的技术 android 动画不同

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/14605.html

Android开发 - 掌握ConstraintLayout（十）按比例设置视图大小

摘要：有时候在布局界面的时候，要求某个或者某张图片按比例显示，以适应不同的屏幕分辨率。现在我们既然已经使用了，它本身就支持这样的按比例设置大小的功能。下一篇开发掌握十一复杂动画如此简单，我们将介绍使用创建复杂动画。有时候在布局界面的时候，UI要求某个View或者某张图片按比例显示，以适应不同的屏幕分辨率。通常我们时通过自定义View或者引入第三方的库来解决。现在我们既然已经使用了Cons...

appetizerio 2019-06-25 12:31 评论0 收藏0
Android开发 - 掌握ConstraintLayout（一）传统布局的问题

摘要：随着的推出，这种现象有了很大的改善，而且它可以实现很多传统布局难以实现的功能。最常用并且简单的布局，通常用于错误页面的显示，蒙层的显示等。又比如这些布局中相对灵活的，它会被测量至少两次，已确定最终渲染时的位置，也同样会影响效率。在传统的Android开发中，页面布局占用了我们很多的开发时间，而且面对复杂页面的时候，传统的一些布局会显得非常复杂，每种布局都有特定的应用场景，我们通常需要...

CHENGKANG 2019-06-25 12:27 评论0 收藏0
Android开发 - 掌握ConstraintLayout（四）创建基本约束

摘要：上一篇我们介绍了编辑器的基本使用，本文我们介绍创建基本的约束。约束表示之间的位置关系。创建父约束时将锚点拖到父边缘即可，创建与其它约束时是将锚点拖到其它的锚点上。上一篇我们介绍了编辑器的基本使用，本文我们介绍创建基本的约束。约束表示View之间的位置关系。当我们在ConstraintLayout布局中创建View时，如果我们没有添加任何约束，虽然在设计视图我们可以拖动它们到任意位置...

Kosmos 2019-06-25 12:27 评论0 收藏0
Android开发 - 掌握ConstraintLayout（八）障碍线(Barrier)

摘要：本文我们来介绍障碍线的使用，平常在开发中用的相对要少一些，但是在需要时会非常方便。它的作用是将多个元素放到这个障碍线里面使时，其中的任何元素的大小或位置变化时都会使它的位置进行改变。下一篇开发掌握九分组，我们将介绍分组的使用。本文我们来介绍障碍线(Barrier)的使用，平常在开发中用的相对要少一些，但是在需要时会非常方便。它的作用是将多个元素放到这个障碍线里面使时，其中的任何元素...

娣辩孩 2019-06-25 12:30 评论0 收藏0
Android攻略

摘要：但是，还有一需求点击断句我们需要判断用户的点击，定位到所点击的整句话，然后再将整句内容带来了哪些新东西今年的上谷歌发布了新版本的，但是我们并没有从中得到多少信息，只有一篇非常简陋的博客。 Android自定义View播放Gif动画 GIF是一种很常见的动态图片格式，在Android中它的使用场景非常多，大到启动页动画、小到一个Loading展示，都可以用GIF动画来完成，使用也很方便，...

zhisheng 2019-06-25 11:48 评论0 收藏0