Android 动画技术总结分享

前言

• 动画的使用 是 Android 开发中常用的知识

• 本次分享探讨 Android动画，包括动画的种类、使用、原理等，以及支持跨平台动画库--Lottie 

目录

• 

 

1. 动画类型

Android动画主要分为分为两大类（三种）：

1. 视图动画：补间动画、逐帧动画
2. 属性动画

• 下面。我们一起探讨下三种动画的使用 & 原理

 

2. 视图动画（View Animation）

• 作用对象：视图（View），不可用于View的属性
• 具体分类：补间动画 & 逐帧动画

下面会详细介绍这两种视图动画：

  2.1 逐帧动画

                       

    2.1.1  作用对象 : 视图控件（View）

• 如Android的TextView、Button等等
• 不可作用于View的属性，如：颜色、背景、长度等等

     2.1.2  原理 : 

• 将动画拆分为 帧 的形式，且定义每一帧 = 每一张图片
• 逐帧动画的本质：按序播放一组预先定义好的图片

   2.1.3  具体使用 : 

• 步骤1. 将动画资源（即每张图片资源）放到 drawable文件夹里
• 步骤2. 在 res/anim/xxx.xml 的文件夹里创建 设置动画资源（图片资源）

• 步骤3：在Java代码中载入 & 启动动画

   2.1.4  特点 : 

• 优点：使用简单、方便
• 缺点：容易引起 OOM，因为会使用大量 & 尺寸较大的图片资源
• 使用场景：较为复杂的个性化动画效果。

2.2 补间动画（Tween Animation）

•    简介如下：

    

• 使用如：位移变化： 

     1.  在 Java 代码中设置 ： 

        Button mButton = (Button) findViewById(R.id.Button);
        Animation translateAnimation = new TranslateAnimation(0，500，0，500)；
        translateAnimation.setDuration(3000)；
        mButton.startAnimation(translateAnimation);

     1.  在XML 代码中设置，在Java代码中创建Animation对象并播放 ：

       Button mButton = (Button) findViewById(R.id.Button);
        Animation translateAnimation = AnimationUtils.loadAnimation(this, R.anim.view_animation);
        mButton.startAnimation(translateAnimation)

• 补间动画显示效果如下：

    

 

3. 属性动画

• 属性动画（Property Animation）是在 Android 3.0（API 11）后才提供的一种全新动画模式

    

 3.1 插值器 & 估值器

    插值器（Interpolator）

• 定义：一个接口
• 作用：设置 属性值 从初始值过渡到结束值 的变化规律

1. 如匀速、加速 & 减速 等等
2. 即确定了 动画效果变化的模式，如匀速变化、加速变化 等等

• Android内置了 9 种内置的插值器实现：

    accelerate_interpolator （动画加速进行），accelerate_decelerate_interpolato （先加速后减速），

    anticipate_interpolator  （先退后再加速前进）， anticipate_overshoot_interpolator （先退后再加速前进，超出终点后再回终点），  bounce_interpolator （最后阶段弹球效果），cycle_interpolator （周期运动），decelerate_interpolator （减速） ，linear_interpolator    （匀速），overshoot_interpolator （快速完成动画，超出再回到结束样式）

如果上述9个插值器无法满足需求，还可以自定义插值器：

c. 自定义插值器

• 本质：根据动画的进度（0%-100%）计算出当前属性值改变的百分比
• 具体使用：自定义插值器需要实现 Interpolator / TimeInterpolator接口 & 复写getInterpolation（）方法

估值器（TypeEvaluator）

• 定义：一个接口
• 作用：设置 属性值 从初始值过渡到结束值 的变化具体数值

b. 自定义估值器

• 本质：根据 插值器计算出当前属性值改变的百分比 & 初始值 & 结束值 来计算 当前属性具体值

  两者区别:

1. 插值器（Interpolator）决定 值 的变化模式（匀速、加速blabla）
2. 估值器（TypeEvaluator）决定 值 的具体变化数值

3.2 属性动画两个核心类： 

•  ValueAnimator类 与 ObjectAnimator类

   ValueAnimator类

• 实现动画的原理：通过不断控制 值 的变化，再不断 手动 赋给对象的属性，从而实现动画效果。

 ValueAnimator类中有3个重要方法：

1. ValueAnimator.ofInt（int values）: (作用：将初始值 以整型数值的形式 过渡到结束值)
2. ValueAnimator.ofFloat（float values）:(作用：将初始值 以浮点型数值的形式 过渡到结束值)
3. ValueAnimator.ofObject（int values）: (作用：将初始值 以对象的形式 过渡到结束值)

  以 ValueAnimator.ofInt为例  

• 实现的动画效果：按钮的宽度从 150px 放大到 500px

   

   ObjectAnimator类

• 实现动画的原理：通过不断控制 值 的变化，再不断 自动 赋给对象的属性，从而实现动画效果。是 直接对象属性进行操作；
• 继承自ValueAnimator类，即底层的动画实现机制是基于ValueAnimator类
• 如果需要采用ObjectAnimator 类实现动画效果，那么需要操作的对象就必须有该属性的set（） & get（）

    由于 系统实现的四种动画Alpha，Translation，Scale，Rotation 对应属性set&get(),所以我们直接可以用使用：

   如下：

ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(view,"rotation",0f,180f,0f);
objectAnimator.setDuration(1000);
objectAnimator.setRepeatCount(3);
objectAnimator.start();

4. 动画开源库--- Lottie

4.1 Lottie简介 ：

•   Lottie 是Airbnb公司开源的一个面向 iOS、Android、React Native 的动画库， 能分析 Adobe After Effects 导出的动画并且能让原生 App 像使用静态素材一样使用这些动画，完美实现动画效果。

4.2  环境搭建 ：

• Adobe After Effects 
• Bodymovin插件

     

4.3  兼容性：

• Web ： 调用Bodymovin提供的js库 — bodymovin.js
• Android ：支持API 16及以上
• iOS/MacOS  ：支持iOS 8+和MacOS 10.10+
• React Native ： 要求Android支持库版本为26，即compileSdkVersion 26

4.4  Lottie动画库使用：

•  compile 'com.airbnb.android:lottie:2.1.0'   引入依赖
• 将我们所需要的动画文件XX.json保存在app/src/main/assets文件里
• 布局中添加 LottieAnimationView ：

     

•    代码中运行：

        animationView.setAnimation("love.json");
        animationView.loop(true);
        animationView.playAnimation();

•     运行效果如下：

   

 

4.5 文件校验 及 官方社区精选动画下载

• 在线校验：针对UE提供没有图片资源的JSON动画文件校验。

    https://www.lottiefiles.com/preview

• 官方社区精选动画：https://lottiefiles.com/featured

4.6、解析绘制

4.7、性能

1. 在未开启硬件加速的情况下，帧率、内存，CPU都比属性动画差，开启硬件加速后，性能差不多。
2. 如果没有遮罩、阴影和蒙版，那么性能和内存非常好，没有bitmap创建，大部分操作都是简单的cavas绘制。