Interpolator插值器

动画的基本原理是从开始时间到结束时间一帧一帧的播放静态图像。Interpolator插值器来指定动画如何变化的东东。Interpolator本质上讲是一种数学函数,参数是0.0到1.0之间的浮点数,输出值也是0.0到1.0的浮点数,曲线的斜率是速度。


Android系统的插值器有9种:

这里写图片描述

Interpolators的使用方式有两种:一种是通过xml文件来设置,另一种在代码中设置
xml中的使用

<?xml version="1.0" encoding="utf-8"?>
<linearInterpolator       xmlns:android="http://schemas.android.com/apk/res/android"
    android:factor="2"
  />
<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromAlpha="0.0"
    android:toAlpha="1.0"
    android:interpolator="@anim/linearpolator_alpha"
    />


本篇文章使用的动画效果是在平移动画上进行的说明,关于alpha scale rotate上的效果与此类似,开动你的脑筋自己想象吧。

1.LinearInterpolator 线性插值器

资源ID:@android:anim/linear_interpolator
xml标签:linearInterpolator
函数公式:y = t

坐标系解释:x轴表示的是动画的进度,取值范围是[0.0,1.0],y轴表示的得到的值,取值可以为正可以为负,1.0是他的目标值,下面的坐标图表示的含义都相同


这里写图片描述
      
这里写图片描述

2.AccelerateInterpolator加速插值器

资源ID: @android:anim/accelerate_interpolator
XML标记: accelerateInterpolator
函数公式: y=t^(2f)
有参构造函数:public AccelerateInterpolator(float factor) xml中属性:android:factor
描述:起始速度是0,速度越来越快,加速运动。factor的大小对曲线的影响看图吧。


这里写图片描述
    
这里写图片描述
 
关键源码:

 public AccelerateInterpolator(float factor) {
        mFactor = factor;
        mDoubleFactor = 2 * mFactor;
    }
 public float getInterpolation(float input) {
        if (mFactor == 1.0f) {
            return input * input;
        } else {
            return (float)Math.pow(input, mDoubleFactor);//幂函数y = input^mDoubleFactor  
        }
    }

3.DecelerateInterpolator减速插值器

资源ID: @android:anim/decelerate_interpolator
XML标记: decelerateInterpolator
函数公式: y=1-(1-t)^(2f)
有参构造函数:public DecelerateInterpolator(float factor) xml中属性:android:factor
描述:起始速度不为0,速度越来越慢,最后速度为0,减速运动。factor的大小对曲线的影响看图吧。


这里写图片描述
      
这里写图片描述

关键源码:

 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;
    }

4.AccelerateDecelerateInterpolator先加速后减速插值器

资源ID: @android:anim/accelerate_decelerate_interpolator
XML标记: accelerateDecelerateInterpolator
函数公式: y=cos((t+1)π)/2+0.5
描述:速度从0开始,先加速后加速,最后速度为0


这里写图片描述
      
这里写图片描述

关键源码:

public float getInterpolation(float input) {
        return (float)(Math.cos((input + 1) * Math.PI) / 2.0f) + 0.5f;
    }

5.AnticipateInterpolator

资源ID: @android:anim/anticipate_interpolator
XML标记: anticipateInterpolator
函数公式: y=(T+1)×t3–T×t2
有参的构造函数:public AnticipateInterpolator(float tension) xml中的属性:android:tension
描述:第一步运动,反方向运动,先加速后减速至0,此时运动到的位置为负值,第二步运动,正方向加速运动,速度越来越快。就像跳远一样,先向后退几步,增大助跑距离。tension大小对曲线的影响请看图


这里写图片描述
      
这里写图片描述

关键源码:

 public float getInterpolation(float t) {
        return t * t * ((mTension + 1) * t - mTension);
    }

6.OvershootInterpolator

资源ID: @android:anim/overshoot_interpolator
XML标记: overshootInterpolator
函数公式: y=(T+1)x(t1)3+T×(t1)2 +1
有参的构造函数:public OvershootInterpolator(float tension) xml中的属性:android:tension
描述:第一步正方向运动,速度从0开始,先加速后减速至0,此时y的值大于1了,第二步反方向运动至y值为1。就像跑步速度过快一样,没有留住,跑过终点了,然后再往回跑,回到终点。tension对曲线的影响看图。


这里写图片描述
      
这里写图片描述

关键源码:

 public float getInterpolation(float t) {      
        t -= 1.0f;
        return t * t * ((mTension + 1) * t + mTension) + 1.0f;
    }

7.AnticipateOvershootInterpolator

资源ID: @android:anim/anticipate_overshoot_interpolator
XML标记: anticipateOvershootInterpolator
函数公式: 

这里写图片描述

有参的构造函数:
public AnticipateOvershootInterpolator(float tension)
public AnticipateOvershootInterpolator(float tension, float extraTension)
描述:效果是AnticipateInterpolator 和OvershootInterpolator两个加起来的效果,T的值为tension*extraTension


这里写图片描述
      
这里写图片描述

关键源码:

 public AnticipateOvershootInterpolator(float tension, float extraTension) {
        mTension = tension * extraTension;
    }
     public AnticipateOvershootInterpolator(Resources res, Theme theme, AttributeSet attrs) {
        TypedArray a;
        ....
        mTension = a.getFloat(AnticipateOvershootInterpolator_tension, 2.0f) *
                a.getFloat(AnticipateOvershootInterpolator_extraTension, 1.5f);
        ...
    }
     private static float a(float t, float s) {
        return t * t * ((s + 1) * t - s);
    }

    private static float o(float t, float s) {
        return t * t * ((s + 1) * t + s);
    }
 public float getInterpolation(float t) {        
        if (t < 0.5f) {
            return 0.5f * a(t * 2.0f, mTension);
        }else {
            return 0.5f * (o(t * 2.0f - 2.0f, mTension) + 2.0f);
         }
    }

8.BounceInterpolator弹跳插值器

资源ID: @android:anim/bounce_interpolator
XML标记: bounceInterpolator
函数公式:  

这里写图片描述

描述:就像跳跳球掉落在地面一样的效果


这里写图片描述
      
这里写图片描述

关键源码:

  private static float bounce(float t) {
        return t * t * 8.0f;
    }

    public float getInterpolation(float t) {        
        t *= 1.1226f;
        if (t < 0.3535f) return bounce(t);
        else if (t < 0.7408f) return bounce(t - 0.54719f) + 0.7f;
        else if (t < 0.9644f) return bounce(t - 0.8526f) + 0.9f;
        else return bounce(t - 1.0435f) + 0.95f;
    }

9.CycleInterpolator周期插值器

资源ID: @android:anim/cycle_interpolator
XML标记: cycleInterpolator
函数公式: y=sin(2π×C×t)
有参构造函数: public CycleInterpolator(float cycles) xml中属性:android:cycles
描述:cycles是周期值,默认为1,cycles=2表示动画会执行两次


这里写图片描述
     
这里写图片描述

关键源码:

  public float getInterpolation(float input) {
        return (float)(Math.sin(2 * mCycles * Math.PI * input));
    }

10.自定义插值器

想要实现的函数公式: 
这里写图片描述
public class MyInterpolator implements Interpolator {

    @Override
    public float getInterpolation(float input) {
        float x=2.0f*input-1.0f;
        return 0.5f*(x*x*x + 1.0f);
    }
}

这里写图片描述

      
这里写图片描述

自定义插值器要实现Interpolator ,Interpolator直接继承TimeInterpolator(注意源码版本有些改动,但是实现思路是没变的)
TimeInterpolator源码:

package android.animation;

/**
 * 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);
}

参数 input:input 参数是一个 float 类型,它取值范围是 0 到 1,表示当前动画的进度,取 0 时表示动画刚开始,取 1 时表示动画结束,取 0.5 时表示动画中间的位置,其它类推。 返回值:表示当前实际想要显示的进度。取值可以超过 1 也可以小于 0,超过 1 表示已经超过目标值,小于 0 表示小于开始位置。 对于 input 参数,它表示的是当前动画的进度,匀速增加的。什么叫动画的进度,动画的进度就是动画在时间上的进度,与我们的任何设置无关,随着时间的增长,动画的进度自然的增加,从 0 到 1;input 参数相当于时间的概念,我们通过 setDuration()指定了动画的时长,在这个时间范围内,动画进度肯定是一点点增加的;

原文来自我的CSDN:http://blog.csdn.net/xiaochuanding/article/details/73200149

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,179评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,229评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,032评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,533评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,531评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,539评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,916评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,574评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,813评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,568评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,654评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,354评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,937评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,918评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,152评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,852评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,378评论 2 342

推荐阅读更多精彩内容

  • 这是我这个系列的目录,有兴趣的可以看下: android 动画系列 - 目录 首先要了解为什么需要插值器,因为在补...
    前行的乌龟阅读 5,908评论 0 4
  • 1 背景 不能只分析源码呀,分析的同时也要整理归纳基础知识,刚好有人微博私信让全面说说Android的动画,所以今...
    未聞椛洺阅读 2,688评论 0 10
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,386评论 25 707
  • [太阳]如果一个孩子在愉悦中度过童年,那么他会自然生发几乎所有的人类美好品质:独立思想、创造力、热情专注、同理心。...
    育麟阅读 179评论 0 3
  • 这两天都是高考的主题,社区还推荐了一名记者来采访我,要我谈谈当年高考的体会,我拒绝了。虽然当年考得还不错...
    东观阅读 479评论 0 3