Google I/O ‘17 推出的物理动画库PhysicsBasedAnimation
来源:互联网 发布:怎么优化 编辑:程序博客网 时间:2024/04/30 14:41
概述
Google I/O ‘17推出了许多新的特性,在动画这一块又有新的API供开发者使用,具体视频请见Android Animations Spring to Life (Google I/O ‘17),主要介绍了Physics-based Animations,在动画API中引入了DynamicAnimation
,并介绍了它的两个子类FlingAnimation
和SpringAnimation
的使用,开发者可以使用新的API创建更加动态化的动画。
是什么
Physics-based Animations,翻译过来就是基于物理的动画,官网上有很详细的介绍,在日常生活中当一个事物发生变化的时候,物理性的过渡或者说符合自然性的过渡,更容易让我们感知察觉,同样,更自然、不间断、有良好发展趋势的动画会给我们带来更好的用户体验。Physics-based Animations是根据物理学的基本原理构建的动画,动画由力产生,当力趋于平衡时动画处于静止。让我们重新捡起高中半吊子水平的物理知识,比如给物体在某个方向上施加一个力,物体有了速度,会在该方向上运动,如果停止施力,最后物体会由于摩擦力的影响,速度逐渐减小,运动一段时间后处于静止状态。Physics-based Animations概括起来就是下面几点:
- 动画由力驱动
- 力决定了动画的加速和减速
- 在每一帧中动画值和速度都会更新
- 当受力达到平衡时动画停止
好处
使用Physics-based Animations api创建的动画可以追踪速度,在运动过程中动态地改变动画的目标值,正确规划路线,使动画看起来更加自然。看下两组动画
对比了两组动画的差别,图1动画无法追踪速度,在进行下一帧的时候它的速度几乎还是从0开始的,速度值突然的变化给用户不连贯的视觉体验。图2动画可以追踪速度,在第二阶段力的方向改变,导致原先的速度发生变化,图片看起来很自然地移动到新的位置
怎么用
- Android Studio 3.0 Canary 4
- 在Android Studio的build.gradle中添加依赖
1234
dependencies {...implementation 'com.android.support:support-dynamic-animation:26.0.0-beta2'}
Fling Animation
看下怎样创建FlingAnimation:
12345
ImageView img = root.findViewById(R.id.img_simple_fling);FlingAnimation flingAnimation = new FlingAnimation(img, DynamicAnimation.X);flingAnimation.setStartVelocity(500f);flingAnimation.setFriction(0.5f);flingAnimation.start();
效果如下:
解释下上面的代码:
创建一个FlingAnimation实例,默认情况下该实例的初速度是0pixels/s,因此我们需要调用setStartVelocity()
方法给它赋予一个大于0的初速度,否则它是不会动的;另外这里介绍下Friction
,翻译过来就是摩擦力的意思,在现实生活中如果一个物体保持一个速度在无摩擦力的情况下会一直运动下去,这里也是(比如这里设置Fraction为0.01f,发现小球滚到屏幕外了),我们需要给该实例设置一个摩擦系数,设置的值越大,说明摩擦力越大,动画越快停下来,默认该值为1;最后调用start()方法开始动画。
Spring Animation
看下怎样创建SpringAnimation:
1234567891011
ImageView img = root.findViewById(R.id.img_simple_spring);SpringAnimation springAnimation = new SpringAnimation(img, DynamicAnimation.X);springAnimation.setStartVelocity(2000);SpringForce springForce = new SpringForce();springForce.setDampingRatio(SpringForce.DAMPING_RATIO_HIGH_BOUNCY);springForce.setStiffness(SpringForce.STIFFNESS_LOW);springForce.setFinalPosition(img.getX());springAnimation.setSpring(springForce);springAnimation.start();
效果如下:
解释下上面的代码:
和FlingAnimation一样,创建完SpringAnimation后我们需要设置初速度,接着创建了一个SpringForce
实例,并设置了DampingRatio
(弹性阻尼)和Stiffness
(生硬度),DampingRatio
可以理解成反弹次数,系统中有以下几个可选,
1234
public static final float DAMPING_RATIO_HIGH_BOUNCY = 0.2F;public static final float DAMPING_RATIO_MEDIUM_BOUNCY = 0.5F;public static final float DAMPING_RATIO_LOW_BOUNCY = 0.75F;public static final float DAMPING_RATIO_NO_BOUNCY = 1.0F;
默认设置为DAMPING_RATIO_MEDIUM_BOUNCY
,在官网上贴了四张很Q弹的图片,分别对应不同值的效果,该值越大,反弹次数越少,值为1时不反弹。Stiffness
可以理解成要恢复成未拉伸状态所需的时间,系统中有以下几个可选,
1234
public static final float STIFFNESS_HIGH = 10000.0F;public static final float STIFFNESS_MEDIUM = 1500.0F;public static final float STIFFNESS_LOW = 200.0F;public static final float STIFFNESS_VERY_LOW = 50.0F;
默认设置为STIFFNESS_MEDIUM
,在官网同样贴了四张对应不同值得对比图,该值越大,恢复到之前状态的时间就越短。可以修改DampingRatio
或Stiffness
查看效果
setFinalPosition()
方法指定最后静止时的位置。
创建自定义的动画属性
SpringAniamtion和FlingAnimation的构造函数只能接收一个可动画属性参数,如ALPHA
、ROTATION
、SCALE
等,如果要同时为多个属性生成动画,一种方法是创建多个对应类的实例,然后传入要改变的动画值,这种做法比较麻烦,我们可以创建一个新的属性,该属性封装了我们想改变的其他动画属性值,做法如下:
123456789101112131415
FloatPropertyCompat<View> scale =new FloatPropertyCompat<View>("scale") {@Overridepublic float getValue(View view) {// return the value of any one propertyreturn view.getScaleX();}@Overridepublic void setValue(View view, float value) {// Apply the same value to two propertiesview.setScaleX(value);view.setScaleY(value);}};
创建FloatPropertyCompat
实例,在setValue()
方法中更新要修改的动画属性,在getValue()
方法中返回当前属性值,示例代码统一改变了SCALE_X
和SCALE_Y
属性,自定义属性创建好之后可以像其他动画属性一样使用它,
12
SpringAnimation stretchAnimation =new SpringAnimation(emoji, scale);
在创建使用自定义属性的动画时,最好也调用setMinimumVisibleChange()
方法并传递一个有意义的值,以确保动画不会消耗太多的CPU性能
12
stretchAnimation.setMinimumVisibleChange(DynamicAnimation.MIN_VISIBLE_CHANGE_SCALE);
效果如下:
动画监听
DynamicAnimation
提供了两个动画监听器OnAnimationUpdateListener
和 OnAnimationEndListener
,从名字也可以猜到前者监听动画值改变,后者监听动画结束状态。添加动画变化监听需要调用addUpdateListener()
方法,重写onAnimationUpdate()
方法执行具体操作;添加动画结束监听需要调用addEndListener()
方法,重写onAnimationEnd()
方法执行具体操作;若要移除动画监听,则需要调用removeUpdateListener()
和removeEndListener()
。监听动画结束的使用场景:
123456789101112131415161718
// Change icon before animation startsemoji.setImageResource(R.drawable.ic_sentiment_very_satisfied_black_56dp);// Start animationspringAnimation.start();springAnimation.addEndListener(new DynamicAnimation.OnAnimationEndListener() {@Overridepublic void onAnimationEnd(DynamicAnimation animation,boolean canceled,float value, float velocity) {// Change icon after animation endsemoji.setImageResource(R.drawable.ic_sentiment_neutral_black_56dp);}});
当动画结束时变换表情,效果如下:
监听动画变化的使用场景:
123456789101112131415161718192021222324252627282930313233
// Creating two views to demonstrate the registration of the update listener.final View view1 = findViewById(R.id.view1);final View view2 = findViewById(R.id.view2);// Setting up a spring animation to animate the view1 and view2 translationX and translationY propertiesfinal SpringAnimation anim1X = new SpringAnimation(view1,DynamicAnimation.TRANSLATION_X);final SpringAnimation anim1Y = new SpringAnimation(view1,DynamicAnimation.TRANSLATION_Y);final SpringAnimation anim2X = new SpringAnimation(view2,DynamicAnimation.TRANSLATION_X);final SpringAnimation anim2Y = new SpringAnimation(view2,DynamicAnimation.TRANSLATION_Y);// Registering the update listeneranim1X.addUpdateListener(new DynamicAnimation.OnAnimationUpdateListener() {// Overriding the method to notify view2 about the change in the view1’s property.@Overridepublic void onAnimationUpdate(DynamicAnimation dynamicAnimation, float value,float velocity) {anim2X.animateToFinalPosition(value);}});anim1Y.addUpdateListener(new DynamicAnimation.OnAnimationUpdateListener() {@Overridepublic void onAnimationUpdate(DynamicAnimation dynamicAnimation, float value,float velocity) {anim2Y.animateToFinalPosition(value);}});
我们可以结合animateToFinalPosition()
方法实现链式弹力动画效果,即一个View的动画依赖于另一个,效果如下:
- Google I/O ‘17 推出的物理动画库PhysicsBasedAnimation
- Google I/O 2017上推出的新 GC 算法的原理
- Google推出Developers Live为I/O开发者大会预热
- Android 新推出基于物理的动画库SpringAnimation,完全诠释什么叫做弹簧效果
- 谷歌推出 Google Home,对标亚马逊 Echo | Google I/O
- Google I/O site
- Google I/O 2017
- 明晚的Google I/O,这6大看点值得期待 | Google I/O 2017
- Google推出全球分布式关系数据库服务Cloud Spanner,为I/O 2017大会献上了一道开胃小菜
- Google I/O 2014 New
- Google I/O 大会将近
- Google I/O 2015 倒计时
- Google 2016 i/o 大会
- Google I/O大会相关
- 从Google I/O 2012看 Android 4.1的变化
- Google I/O 2015对于开发者的福利
- Google I/O 2016 笔记:APK 瘦身的正确姿势
- Google公布I\/O 2017 for Android的源代码
- 01 字典树模板 求XOR最大值
- APP测试工具使用
- 项目发布到Tomcat的三种方法
- Flood Fill Algorithm
- Maven开发Android指南 3 使用Android Maven Archetypes 创建新项目
- Google I/O ‘17 推出的物理动画库PhysicsBasedAnimation
- Maven开发Android指南 4 与Eclipse整合(m2e-android )
- NodeJS服务器篇之简单静态文件合并
- Jsp9个内置对象详解
- Maven开发Android指南 5 调试
- Apache CXF开发Web Service 开发Web Service之Kick Start
- plot画图时可以设定线条参数
- java实现2048小游戏
- 考研数学——高数18讲