========================================================
作者:qiujuer
博客:blog.csdn.net/qiujuer
网站:www.qiujuer.net
开源库:Genius-Android
转载请注明出处:http://blog.csdn.net/qiujuer/article/details/42430269
========================================================

  • 一个好的动画一定是用心做出来的,何为用心?其中一点我认为定义适当的 Interpolator 就是一种用心的表现;这点在 google material design 中尤为明显。
  • 一个好的动画一定要符合实际,一句老的话就是:石头下落一定要受重力才优雅,不然一颗石头像羽毛一样在风中还飘啊飘的那就不行了。

介绍

Interpolator 是个什么东西?

说到 Interpolator 啊,这个要从3年前说起,话说当年谷歌、诺基亚、Qiujuer 三分天下.... 哈哈,开个玩笑~

Interpolator 这个时间插值类,其主要使用在动画中,其作用主要是控制目标变量的变化值进行对应的变化。

你可以这么理解,现在小明去买酱油,规定时间是1个小时到达,里程是1公里;现在小明心里唯恐无法达到,所以先跑起来了,但因为体力消耗所以逐渐的慢下来了;然后成功到达。这样的一个过程中把小明逐渐慢下来的这个过程抽象出来也就是 Interpolator  的工作;当然 Interpolator 也可以控制小明先慢慢热身然后越跑越快最后达到。

这些都是 Interpolator 能完成的工作,同样 Interpolator 还能控制一个弹球掉在地上弹起来逐渐降低的过程,这些都是可以控制的。

Interpolator 的原理?

public interface Interpolator extends TimeInterpolator {
}

可以看见这个类其是是一个空的类,那么其操作在哪里?

/*** A time interpolator defines the rate of change of an animation. This allows animations* to have non-linear motion, such as acceleration and deceleration.*/
public interface TimeInterpolator {/*** Maps a value representing the elapsed fraction of an animation to a value that represents* the interpolated fraction. This interpolated value is then multiplied by the change in* value of an animation to derive the animated value at the current elapsed animation time.** @param input A value between 0 and 1.0 indicating our current point*        in the animation where 0 represents the start and 1.0 represents*        the end* @return The interpolation value. This value can be more than 1.0 for*         interpolators which overshoot their targets, or less than 0 for*         interpolators that undershoot their targets.*/float getInterpolation(float input);
}

其操作在所继承的接口中,在所继承的接口中有一个方法  float getInterpolation(float input);

在这个方法中,传入的值是一个0.0~1.0的值,返回值可以小于0.0也可以大于1.0。

你可以这么理解:在Animation中时间是正常的走的,你设置了200ms,现在走到了100ms了,那么按照线性来说现在应该是走了一半的路程也就是0.5;现在就把这0.5传递给Interpolator 让 Interpolator 告诉我走到一半时间的时候此时小明在哪里;这也就是 Interpolator 的原理。

常用类

哎呀我的天天啊,访问不了谷歌就是麻烦,只能从源码截图了:


Android 官方提供的就是这么十种,是9种还是10种啊,没有数错吧。分别是:

  1. AccelerateDecelerateInterpolator 在动画开始与结束的地方速率改变比较慢,在中间的时候加速
  2. AccelerateInterpolator  在动画开始的地方速率改变比较慢,然后开始加速
  3. AnticipateInterpolator 开始的时候向后然后向前甩
  4. AnticipateOvershootInterpolator 开始的时候向后然后向前甩一定值后返回最后的值
  5. BounceInterpolator   动画结束的时候弹起
  6. CycleInterpolator 动画循环播放特定的次数,速率改变沿着正弦曲线
  7. DecelerateInterpolator 在动画开始的地方快然后慢
  8. LinearInterpolator   以常量速率改变
  9. OvershootInterpolator    向前甩一定值后再回到原来位置
  10. PathInterpolator 这个是新增的我说原来怎么记得是9个,这个顾名思义就是可以定义路径坐标,然后可以按照路径坐标来跑动;注意其坐标并不是 XY,而是单方向,也就是我可以从0~1,然后弹回0.5 然后又弹到0.7 有到0.3,直到最后时间结束。(这个后面单独说说)

源码

这里说几个简单的源码

LinearInterpolator

@HasNativeInterpolator
public class LinearInterpolator implements Interpolator, NativeInterpolatorFactory {public LinearInterpolator() {}public LinearInterpolator(Context context, AttributeSet attrs) {}public float getInterpolation(float input) {return input;}/** @hide */@Overridepublic long createNativeInterpolator() {return NativeInterpolatorFactoryHelper.createLinearInterpolator();}
}

最简单的一个由于是线性,所以直接返回。

DecelerateInterpolator

public class DecelerateInterpolator implements Interpolator, NativeInterpolatorFactory {public DecelerateInterpolator() {}/*** Constructor** @param factor Degree to which the animation should be eased. Setting factor to 1.0f produces*        an upside-down y=x^2 parabola. Increasing factor above 1.0f makes exaggerates the*        ease-out effect (i.e., it starts even faster and ends evens slower)*/public DecelerateInterpolator(float factor) {mFactor = factor;}public DecelerateInterpolator(Context context, AttributeSet attrs) {this(context.getResources(), context.getTheme(), attrs);}/** @hide */public DecelerateInterpolator(Resources res, Theme theme, AttributeSet attrs) {TypedArray a;if (theme != null) {a = theme.obtainStyledAttributes(attrs, R.styleable.DecelerateInterpolator, 0, 0);} else {a = res.obtainAttributes(attrs, R.styleable.DecelerateInterpolator);}mFactor = a.getFloat(R.styleable.DecelerateInterpolator_factor, 1.0f);a.recycle();}public float getInterpolation(float input) {float result;if (mFactor == 1.0f) {result = (float)(1.0f - (1.0f - input) * (1.0f - input));} else {result = (float)(1.0f - Math.pow((1.0f - input), 2 * mFactor));}return result;}private float mFactor = 1.0f;/** @hide */@Overridepublic long createNativeInterpolator() {return NativeInterpolatorFactoryHelper.createDecelerateInterpolator(mFactor);}
}

从其中可以看出,其并不是一个简单的类,其是是可以通过 XML 进行设置的类,通过 XML 可以设置其中的 mFactor 变量,其值默认是1.0; 值越大其变化越快;得到的结果就是,开始的时候更加的快,其结果就是更加的慢,好比一个人开始跑的很快,但是换来的就是后面的路程将会花更多时间慢慢走。

在方法

    public float getInterpolation(float input) {float result;if (mFactor == 1.0f) {result = (float)(1.0f - (1.0f - input) * (1.0f - input));} else {result = (float)(1.0f - Math.pow((1.0f - input), 2 * mFactor));}return result;}

其描述的是一个初中学的抛物方程(话说是初中吧),y = x^2 我擦不知道怎么弄上去,就这样吧;意思懂就OK。

由于篇幅就说这么两个;下面说说其他东西。

动画表

这个图片相信前段时间看的不少吧?前段时间 material design 刚刚出来的时候好多人说这个啊,但是好像都是说图,但是没有说说其如何实现吧。

实现

这里送上福利,其是最开始我发现的是 C++ 的版本:

float Elastic::easeIn (float t,float b , float c, float d) {if (t==0) return b;  if ((t/=d)==1) return b+c;  float p=d*.3f;float a=c; float s=p/4;float postFix =a*pow(2,10*(t-=1)); // this is a fix, again, with post-increment operatorsreturn -(postFix * sin((t*d-s)*(2*PI)/p )) + b;
}float Elastic::easeOut(float t,float b , float c, float d) {if (t==0) return b;  if ((t/=d)==1) return b+c;  float p=d*.3f;float a=c; float s=p/4;return (a*pow(2,-10*t) * sin( (t*d-s)*(2*PI)/p ) + c + b);
}float Elastic::easeInOut(float t,float b , float c, float d) {if (t==0) return b;  if ((t/=d/2)==2) return b+c; float p=d*(.3f*1.5f);float a=c; float s=p/4;if (t < 1) {float postFix =a*pow(2,10*(t-=1)); // postIncrement is evilreturn -.5f*(postFix* sin( (t*d-s)*(2*PI)/p )) + b;} float postFix =  a*pow(2,-10*(t-=1)); // postIncrement is evilreturn postFix * sin( (t*d-s)*(2*PI)/p )*.5f + c + b;
}

参数的意思:

  • t – 动画中当前的时间
  • b – 开始值
  • c – 结束值
  • d – 动画的总时间

看看 Java 的 第一行前三个的:

public class Sine {public static float  easeIn(float t,float b , float c, float d) {return -c * (float)Math.cos(t/d * (Math.PI/2)) + c + b;}public static float  easeOut(float t,float b , float c, float d) {return c * (float)Math.sin(t/d * (Math.PI/2)) + b;  }public static float  easeInOut(float t,float b , float c, float d) {return -c/2 * ((float)Math.cos(Math.PI*t/d) - 1) + b;}}

虽然 Java 的也有了,但是话说这个怎么用啊,跟上面的Interpolator如何联系起来啊?

一个简单的方法:首先把 d 总时间设置为固定值 1.0 ,把 b 开始值设置为 0.0 把结束值设置为1.0,然后把 t 当作上面 Interpolator 中的 float getInterpolation(float input);传入值,此时不就能用上了?对不?

举个Case

/*** Created by Qiujuer on 2015/1/5.*/
public class InSineInterpolator implements Interpolator{public static float  easeIn(float t,float b , float c, float d) {return -c * (float)Math.cos(t/d * (Math.PI/2)) + c + b;}@Overridepublic float getInterpolation(float input) {return easeIn(input, 0, 1, 1);}
}

使用

        //AnimatorSetmAnimatorSet = new AnimatorSet();mAnimatorSet.playTogether(aPaintX, aPaintY, aRadius, aBackground);mAnimatorSet.setInterpolator(new InSineInterpolator());mAnimatorSet.start();

可以看出使用与上面 Android 自带的完全一样,当然这个只是一个 Case ,具体使用中你可以随意封装,前提是别改动了主要部分。

好了,完成了,擦又是三个小时过去了,我的 LOL 又没法打了。

最后送上福利,全部的实现类:

下载地址

Animation Interpolator.zip

愿大家都能做出自己满意的动画!

——学之开源,用于开源;初学者的心态,与君共勉!

========================================================
作者:qiujuer
博客:blog.csdn.net/qiujuer
网站:www.qiujuer.net
开源库:Genius-Android
转载请注明出处:http://blog.csdn.net/qiujuer/article/details/42430269
========================================================

渗透理解Animation时间插值Interpolator类相关推荐

  1. Android Animation时间插入器Interpolator

    http://blog.csdn.net/lixiang0522/article/details/7893239 属性动画系统是非常强健的框架,允许你移动几乎任何东西.你可以定义一个动画去改变任何对象 ...

  2. 深刻理解Python中的元类(metaclass)以及元类实现单例模式

    在看一些框架源代码的过程中碰到很多元类的实例,看起来很吃力很晦涩:在看python cookbook中关于元类创建单例模式的那一节有些疑惑.因此花了几天时间研究下元类这个概念.通过学习元类,我对pyt ...

  3. php连接电脑,PHP_深入理解php的MySQL连接类,无意间在电脑里发现还有这么 - phpStudy...

    深入理解php的MySQL连接类 无意间在电脑里发现还有这么个Mysql的连接类,也不记得哪里收藏的了,贴上来吧. 后面几个show_databases和show_tables....等方法都用了一堆 ...

  4. Silverlight实例教程 - 理解Navigation导航框架Frame类

    通过"Navigation导航框架开篇"的介绍,可以了解到Silverlight导航框架可被应用于多种场合,最为常见的是实现Silverlight项目内部页面切换.在Silverl ...

  5. (ICLR-2022)TADA!用于视频理解的时间自适应卷积

    TADA!用于视频理解的时间自适应卷积 paper题目:TADA! TEMPORALLY-ADAPTIVE CONVOLUTIONS FOR VIDEO UNDERSTANDING paper是NUS ...

  6. Pr进阶:时间重映射与时间插值

    视频素材的录制速率已经是固定下来了,所以改变剪辑的速度指的是改变回放速率. 其它有关改变持续时间和速度的方法请参阅<Pr入门之七:改变剪辑的播放速度>. 所谓时间重映射,就是将录制速率映射 ...

  7. 【Java 19】反射 - 反射机制概述、获取Class实例、类的加载与ClassLoader的理解、创建运行时类的对象、获取运行时类的完整结构、调用运行时类的指定结构、动态代理

    反射机制概述.获取Class实例.类的加载与ClassLoader的理解.创建运行时类的对象.获取运行时类的完整结构.调用运行时类的指定结构.动态代理 反射 1 Java反射机制概述 1.1 Java ...

  8. Java格式化日期用斜杠_[java工具类01]__构建格式化输出日期和时间的工具类

    在之前的学习中,我写过一篇关于字符串格式化的,就主要设计到了时间以及日期的各种格式化显示的设置,其主要时通过String类的fomat()方法实现的. 我们可以通过使用不同的转换符来实现格式化显示不同 ...

  9. calendar当前时间整点_时间处理相关类

    时间处理相关类 在计算机世界,我们把1970 年 1 月 1 日 00:00:00定为基准时间,每个度量单位是毫秒(1秒的千分之一). 时间相关类有如下 Date时间类(java.util.Date) ...

  10. Java的知识点22——时间处理相关类、Date时间类(java.util.Date)、DateFormat类和SimpleDateFormat类、Calendar日历类

    时间处理相关类 用long类型的变量来表示时间,获得现在时刻的"时刻数值":long now = System.currentTimeMillis(); Date时间类(java. ...

最新文章

  1. (转)uml 静态视图依赖
  2. 13.MongoDB 连接命令格式
  3. C#窗体之间事件传值
  4. 莫烦Matplotlib可视化第五章动画代码学习
  5. angular 字符串转换成数字_Python成为专业人士笔记–String字符串方法
  6. filters获取data中的数据
  7. Docker详解(五)——Docker基本使用
  8. 基于wincc的虚拟电梯设计_PLC基于WinCC的四层电梯监控系统设计+梯形图
  9. 北京到济南的长途汽车一览表
  10. torch.atan2函数详细解答
  11. Linux下用户账号管理基础
  12. LM7805使用总结
  13. double类型的输出方式
  14. data augment
  15. css:html元素的定位
  16. Proteus使用教程详细入门版(适用于 MCS-51等)
  17. JavaScript实现摩斯密码加密/解密
  18. 中健长生露祝贺中国奥运健儿东京凯旋
  19. ABBYY FineReader 12完整功能列表汇总(一)
  20. 网页关键字自动高亮,网页高亮批注,保存网页为单文件--浏览器拓展

热门文章

  1. 联想微型计算机beta2,联想上网本升级IdeaPad S10-2
  2. mysql卸载注意问题_mysql卸载注意事项
  3. python必须知道的三个概念_关于python编码,你真的明白了吗
  4. Chladni Figure CodeForces - 1162D (暴力,真香啊~)
  5. ubuntu 14.04 gitlab 的搭建
  6. nodejs,webpack安装以及初步运用
  7. SSH(六)hibernate持久层模板于事务管理
  8. 给Chrome和Firefox添加js脚本作为插件的方法
  9. hihocoder-13892016北京网赛07 Sewage Treatment(二分+网络流)
  10. Lucene的分析过程