Google I/O '17 新推出的物理动画库

4,506 阅读6分钟
原文链接: url.cn

Google I/O ‘17 新推出的物理动画库

Original 2017-07-18 HuYounger 码个蛋 码个蛋 码个蛋

WeChat ID codeegg

Intro 每天更新优质文章:Android、职场干货,不定期大神语音分享。

作者博客

http://rkhcy.github.io/

源码地址

https://github.com/Rkhcy/PhysicsBasedAnimation

目录

  1. 概述

  2. 它是什么?

  3. 它有什么好处?

  4. 它怎么用?

    1. Fling Animation

    2. Spring Animation

    3. 创建自定义的动画属性

    4. 动画监听

1

概述

Google I/O ‘17推出了许多新的特性,在动画这一块又有新的API供开发者使用,具体视频请见Android Animations Spring to Life (Google I/O ‘17)(https://www.youtube.com/watch?v=BNcODK-Ju0g),主要介绍了Physics-based Animations,在动画API中引入了DynamicAnimation,并介绍了它的两个子类FlingAnimation和SpringAnimation的使用,开发者可以使用新的API创建更加动态化的动画。

2

它是什么?

Physics-based Animations,翻译过来就是基于物理的动画,官网上有很详细的介绍,在日常生活中当一个事物发生变化的时候,物理性的过渡或者说符合自然性的过渡,更容易让我们感知察觉,同样,更自然、不间断、有良好发展趋势的动画会给我们带来更好的用户体验。Physics-based Animations是根据物理学的基本原理构建的动画,动画由力产生,当力趋于平衡时动画处于静止。让我们重新捡起高中半吊子水平的物理知识,比如给物体在某个方向上施加一个力,物体有了速度,会在该方向上运动,如果停止施力,最后物体会由于摩擦力的影响,速度逐渐减小,运动一段时间后处于静止状态。Physics-based Animations概括起来就是下面几点:

  • 动画由力驱动

  • 力决定了动画的加速和减速

  • 在每一帧中动画值和速度都会更新

  • 当受力达到平衡时动画停止

3

它有什么好处?

使用Physics-based Animations api创建的动画可以追踪速度,在运动过程中动态地改变动画的目标值,正确规划路线,使动画看起来更加自然。看下两组动画

使用ObjectAnimator创建的动画1

使用physics-based APIs创建的动画2

对比了两组动画的差别,图1动画无法追踪速度,在进行下一帧的时候它的速度几乎还是从0开始的,速度值突然的变化给用户不连贯的视觉体验。图2动画可以追踪速度,在第二阶段力的方向改变,导致原先的速度发生变化,图片看起来很自然地移动到新的位置

动画1的速度曲线图

动画2的速度曲线图

4

它怎么用?

  • Android Studio 3.0 Canary 4

  • 在Android Studio的build.gradle中添加依赖


Fling Animation

看下怎样创建FlingAnimation:

效果如下:

解释下上面的代码:
创建一个FlingAnimation实例,默认情况下该实例的初速度是0pixels/s,因此我们需要调用setStartVelocity()方法给它赋予一个大于0的初速度,否则它是不会动的;另外这里介绍下 Friction,翻译过来就是摩擦力的意思,在现实生活中如果一个物体保持一个速度在无摩擦力的情况下会一直运动下去,这里也是(比如这里设置Fraction为0.01f,发现小球滚到屏幕外了),我们需要给该实例设置一个摩擦系数,设置的值越大,说明摩擦力越大,动画越快停下来,默认该值为1;最后调用start()方法开始动画。

Spring Animation

看下怎样创建SpringAnimation:

效果如下:

解释下上面的代码:
和FlingAnimation一样,创建完SpringAnimation后我们需要设置初速度,接着创建了一个
SpringForce实例,并设置了 DampingRatio(弹性阻尼)和Stiffness(生硬度),
DampingRatio可以理解成反弹次数,系统中有以下几个可选,

默认设置为DAMPING_RATIO_MEDIUM_BOUNCY,在官网上贴了四张很Q弹的图片,分别对应不同值的效果,该值越大,反弹次数越少,值为1时不反弹。
Stiffness可以理解成要恢复成未拉伸状态所需的时间,系统中有以下几个可选,

默认设置为STIFFNESS_MEDIUM,在官网同样贴了四张对应不同值得对比图,该值越大,恢复到之前状态的时间就越短。可以修改DampingRatio或 Stiffness查看效果

setFinalPosition()方法指定最后静止时的位置。

创建自定义的动画属性

SpringAniamtion和FlingAnimation的构造函数只能接收一个可动画属性参数,如ALPHA、ROTATION、 SCALE等,如果要同时为多个属性生成动画,一种方法是创建多个对应类的实例,然后传入要改变的动画值,这种做法比较麻烦,我们可以创建一个新的属性,该属性封装了我们想改变的其他动画属性值,做法如下:

创建FloatPropertyCompat实例,在setValue()方法中更新要修改的动画属性,在getValue()方法中返回当前属性值,示例代码统一改变了SCALE_X和SCALE_Y属性,自定义属性创建好之后可以像其他动画属性一样使用它,

在创建使用自定义属性的动画时,最好也调用setMinimumVisibleChange()方法并传递一个有意义的值,以确保动画不会消耗太多的CPU性能

效果如下:

动画监听

DynamicAnimation提供了两个动画监听器OnAnimationUpdateListener和 OnAnimationEndListener,从名字也可以猜到前者监听动画值改变,后者监听动画结束状态。添加动画变化监听需要调用 addUpdateListener()方法,重写onAnimationUpdate()方法执行具体操作;添加动画结束监听需要调用 addEndListener()方法,重写 onAnimationEnd()方法执行具体操作;若要移除动画监听,则需要调用removeUpdateListener()和 removeEndListener()。监听动画结束的使用场景:

当动画结束时变换表情,效果如下:

监听动画变化的使用场景:

我们可以结合animateToFinalPosition()方法实现链式弹力动画效果,即一个View的动画依赖于另一个,效果如下:

Thanks to

Adding Physics-Based Animations to Android Apps

Physics-based Animations

Spring Animation

Fling Animation

官方Demo

今日推荐

Android Studio 实用小技巧

如果文章对您有用,请随意赞赏。

Reward

people gave a reward

长按二维码向我转账

如果文章对您有用,请随意赞赏。

受苹果公司新规定影响,微信 iOS 版的赞赏功能被关闭,可通过二维码转账支持公众号。

Read more Views Report

Scan QR Code via WeChat to follow Official Account

即将打开""小程序 取消 打开