探索阻尼动画优雅的实现方式

type

status

date

slug

summary

简述

本文探讨下如何在 Android 上实现阻尼动画，首先 wiki 下阻尼的定义：是指任何振动系统在振动中，由于外界作用（如流体阻力、摩擦力等）和/或系统本身固有的原因引起的振动幅度逐渐下降的特性，也就是阻尼系统由两个子系统组成（振子系统、阻力系统），先前写过一篇 {% post_link 如何优雅地在Android上实现iOS的图片预览如何优雅地在Android上实现iOS的图片预览 %} ，就是一套阻尼动画的实现

不知道阻尼动画效果的同学可以去玩玩 iOS，iOS 的 UI 系统内置一套物理引擎，几乎所有的滚动界面都有阻尼动画效果（越界回弹）

在讨论阻尼动画之前，我先讲一下本人编写动画的历程，分为 3 个阶段（位置突变动画，位置不突变动画，速度不突变的动画）

位置突变动画

此动画是 Android 里面最简单的动画，我们平常写的 ValueAnimator 动画、xml 动画，其实都是位置突变的动画，为什么叫它位置突变的动画呢，比如我要把一个 View 渐变出来，那么 alpha 数值应该是从 0 -> 1，但是假如在渐变动画还没有结束的时候（假如刚好播放到 0.5），我又想把 View 给渐隐掉，此时一般会播放一个 1 -> 0 的动画，这里就产生了位置突变效应（从 0.5 突变成了 1），造成的视觉效果就是视图闪动（等同于游戏里面的跳帧）

位置不突变动画

在上述动画的基础上，对于第二段的渐隐动画，我不从 1 -> 0 开始变化，我在播放渐隐动画前先获取 View 的透明度(0.5)，然后让动画从 0.5 -> 0 开始变化（视觉上没有了闪动现象）

速度不突变动画

位置不突变动画一般都能满足要求了(系统自带的 ViewPropertyAnimator 就是位置不突变动画)，但是为什么 iOS 的动画就看起来这么舒服，而安卓的动画看起来有点死板呢？这边就存在一个速度突变的问题

速度突变动画↓

速度不突变动画↓

图片来自谷歌动画文档

我想，应该可以很明显的看出这两者的动画区别，当动画的目标位置发生变化之后，动画1 给人一种非常突兀的感觉，而动画2 给人一种丝一般的顺滑

速度不突变最理想的编写方式就是引入一套物理引擎，然后基于这套物理引擎开发动画，但是成本很大，这也是为什么 iOS 的动画这么丝滑的原因（内置物理引擎）

实现

谷歌大佬也发现了这个问题的，所以它在 support 26 版本中加入了 DynamicAnimation，这是一套基于物理状态的动画系统，顾明思议，他内置了一套简单的物理引擎，它有默认的两个子类实现 SpringAnimation（弹簧动画）、FlingAnimation（滑动动画），下面我就用这两个动画来实现我想要的阻尼动画

先看一个简单的 demo

思考一下，如何实现这个动画，最容易想到的就是用系统的 OverScroller，但是此类的定制性比较差，和阻尼效果差别很大。另一种方式就是分段动画，滚动的时候用 Scroller 实现，越界的时候用 ValueAnimator 来实现，这种方式首先编码很麻烦：至少要分成 3 段动画（滑动 -> 越界 -> 回弹），其次它是一个速度突变的动画，表现上来说总会给人一种违和感

自定义阻尼系统

此方案就是自己模拟物理引擎，理论上可以实现物理引擎所支持的动画，但是需要了解一定的物理知识和数学知识，代码实现繁琐，但是很有意思，有兴趣的同学可以看我之前写的一篇文章 {% post_link 如何优雅地在Android上实现iOS的图片预览如何优雅地在Android上实现iOS的图片预览 %}

借用 `DynamicAnimation`

这个是谷歌为了解决物理动画而出的一个 support 库，对它的描述叫 Physics-based motion。它的其中一个子类 SpringAnimation 其实就是弹簧动画，也就是我想要的阻尼系统。但是要实现 demo 中的动画，只有 SpringAnimation 是不够的，还需要一个 fling 动画，用于滑动，刚好 DynamicAnimation 还有一个子类就是 FlingAnimation

那么接下来的问题就是如何结合这两个动画，撸出一个 SpringFlingAnimation

物理动画的实现方式，无非就是逐帧计算，每一帧根据当前的（位置、速度、加速度）计算出下一帧的（位置、速度、加速度），所以我只需要在越界的时候用 SpringAnimation 的逻辑去计算，非越界的时候用 FlingAnimation 的逻辑去计算，就可以达到我们想要的效果

例:

如图所示，黑框是父布局，可以看做一个 ScrollView，橘色的框为内部的子 View，1 的时候上滑采用 FlingAnimation 去计算帧，2 的时候因为越界了所以用 SpringAnimaiton 的逻辑来计算帧，3 的时候继续采用 FlingAnimation

思路理清楚后是不是感觉很简单，其实实现方式也很简单，SpringAnimation 和 FlingAnimation 里面的代码本来就没多少，阻尼系统的逻辑运算都封装在 SpringForce 里面了，我们只需要继承自 DynamicAnimation，复合一下两个动画的计算帧逻辑就可以了

PS: DynamicAnimation 的虚方法都是包权限的，也就是只有包权限的类才可以继承

具体实现可以看我的 Github 项目 SpringFlingAnimation.java，上述 demo 的简单实现代码 SampleDampNestedScrollView.java

简述

位置突变动画

位置不突变动画

速度不突变动画

实现

自定义阻尼系统

借用 DynamicAnimation

借用 `DynamicAnimation`