當數學遇上動畫（3）

當數學遇上動畫：講述 ValueAnimator、TypeEvaluator和TimeInterpolator之間的恩恩怨怨（3）

上一節我們得到一個重要的結論，藉助TimeInterpolator或者TypeEvaluator“單獨” 來控制動畫所產生的動畫效果殊途同歸！

此外，上一節結尾我們還說到，專案AnimationEasingFunctions和專案EaseInterpolator本質上是差不多的，都是定義了一些動畫效果對應的函式曲線。前者是將其封裝成了TypeEvaluator，後者是將其封裝成了Interpolator！

這一節我們來研究下這些函式曲線。

1 緩動函式曲線

下圖顯示了常見的這些函式曲線，到底這些函式曲線都是什麼鬼呢？

這些函式曲線最早是由Robert Penner提出來用於實現補間動畫的"Penner easing functions"，這些曲線主要分成10類，包括"BACK", "BOUNCE", "CIRCULAR", "ELASTIC", "EXPO", "QUAD", "CUBIC", "QUART", "QUINT", "SINE"，每一類下面都有緩動進入、緩動退出以及緩動進入和退出三種效果，所以共有30個。這些效果對照著函式曲線來看其實也挺好理解，"QUAD", "CUBIC", "QUART", "QUINT"分別對應著二次、三次、四次以及五次曲線，"SINE"對應正弦函式曲線，"EXPO"對應指數函式曲線等等。其中"BACK"

和"ELASTIC"有上衝和下衝的效果。

這些版本的實現都是4個引數的，分別是起始值b、數值間隔c（結束值-起始值）、當前時間t、時間間隔d。

Java

//不帶緩動，也就是前面說的“線性”估值器
function noEasing (t, b, c, d) {
	return c * (t / d) + b;
}

//帶緩動效果，例如二次曲線形式
easeInQuad: function (t, b, c, d) { //緩動進入
	return c*(t/=d)*t + b;
},
easeOutQuad: function (t, b, c, d) {//緩動退出
	return -c *(t/=d)*(t-2) + b;
},
easeInOutQuad: function (t, b, c, d) {//緩動進入和退出
	if ((t/=d/2) < 1) return c/2*t*t + b;
	return -c/2 * ((--t)*(t-2) - 1) + b;
},
那為什麼與之殊途同歸的EaseInterpolator是1個引數的呢？

//QuadInOut Interpolator
public float getInterpolation(float input) {
  if((input /= 0.5f) < 1) {
    return 0.5f * input * input;
  }
  return -0.5f * ((--input) * (input - 2) - 1);
}

12345678910111213141516171819202122232425

//不帶緩動，也就是前面說的“線性”估值器functionnoEasing(t,b,c,d){returnc*(t/d)+b;}//帶緩動效果，例如二次曲線形式easeInQuad:function(t,b,c,d){//緩動進入returnc*(t/=d)*t+b;},easeOutQuad:function(t,b,c,d){//緩動退出return-c*(t/=d)*(t-2)+b;},easeInOutQuad:function(t,b,c,d){//緩動進入和退出if((t/=d/2)<1)returnc/2*t*t+b;return-c/2*((--t)*(t-2)-1)+b;},那為什麼與之殊途同歸的EaseInterpolator是1個引數的呢？//QuadInOut InterpolatorpublicfloatgetInterpolation(floatinput){if((input/=0.5f)<1){return0.5f*input*input;}return-0.5f*((--input)*(input-2)-1);}

這是因為當Interpolator傳入到後面的TypeEvaluator的時候就有了起始值、結束值以及時間間隔（時間間隔定義在緩動函式內部，只有部分緩動函式需要這個引數）這3個引數，可以參考下面的程式碼來理解，所以說，它們在本質上還是一樣的！

Java

fraction = getInterpolation(input)  ==> 這種1個引數形式其實也可以等效於 easingfunction(currentTime, 0, 1, totalTime)
value = evaluate(fraction, startValue, endValue) = startValue + fraction * (endValue - startValue)

12	fraction=getInterpolation(input)==>這種1個引數形式其實也可以等效於easingfunction(currentTime,0,1,totalTime)value=evaluate(fraction,startValue,endValue)=startValue+fraction*(endValue-startValue)

2 One more thing

看到這裡的話，我們就會想啦，如果我們把函式曲線抽象出來，然後再提供相應的轉換方法，使其輕輕鬆鬆地轉換成Interpolator和TypeEvaluator的話，如此，豈不善哉？

所以，我就站在眾多巨人們的肩膀上，寫了一個新專案Yava，專案程式碼非常簡單，而且程式碼很少只有4個重要的類，它實現的功能就是將抽象的函式曲線輕鬆轉換成立即可用的Interpolator和TypeEvaluator，並且提供了常見的30個緩動函式(Easing Functions)的實現，它們既可以當做Interpolator來用，又可以當做TypeEvaluator來用，非常方便。

這裡我直接把這4個重要類的程式碼貼出來吧。

(1) IFunction介面

Java

/**
 * 函式介面：給定輸入，得到輸出
 */
public interface IFunction {
    float getValue(float input);
}

123456

/** * 函式介面：給定輸入，得到輸出 */publicinterfaceIFunction{floatgetValue(floatinput);}

(2)AbstractFunction抽象類

Java

/**
 * 抽象函式實現，既可以當做簡單函式使用，也可以當做Interpolator或者TypeEvaluator去用於製作動畫
 */
public abstract class AbstractFunction implements IFunction, Interpolator, TypeEvaluator<Float> {

    @Override
    public float getInterpolation(float input) {
        return getValue(input);
    }

    @Override
    public Float evaluate(float fraction, Float startValue, Float endValue) {
        return startValue + getValue(fraction) * (endValue - startValue);
    }
}

123456789101112131415

/** * 抽象函式實現，既可以當做簡單函式使用，也可以當做Interpolator或者TypeEvaluator去用於製作動畫 */publicabstractclassAbstractFunction implementsIFunction,Interpolator,TypeEvaluator<Float>{@OverridepublicfloatgetInterpolation(floatinput){returngetValue(input);}@OverridepublicFloatevaluate(floatfraction,FloatstartValue,FloatendValue){returnstartValue+getValue(fraction)*(endValue-startValue);}}

(3)Functions類

Java

/**
 * 工具類，將自定義的函式快速封裝成AbstractFunction
 */
class Functions {

    public static AbstractFunction with(final IFunction function) {
        return new AbstractFunction() {
            @Override
            public float getValue(float input) {
                return function.getValue(input);
            }
        };
    }
}

1234567891011121314

/** * 工具類，將自定義的函式快速封裝成AbstractFunction */classFunctions{publicstaticAbstractFunction with(finalIFunction function){returnnewAbstractFunction(){@OverridepublicfloatgetValue(floatinput){returnfunction.getValue(input);}};}}

(4)EasingFunction列舉：包含了30個常見的緩動函式

Java

/**
 * 常見的30個緩動函式的實現
 */
public enum EasingFunction implements IFunction, Interpolator, TypeEvaluator<Float> {

    /* ------------------------------------------------------------------------------------------- */
    /* BACK
    /* ------------------------------------------------------------------------------------------- */
    BACK_IN {
        @Override
        public float getValue(float input) {
            return input * input * ((1.70158f + 1) * input - 1.70158f);
        }
    },
    BACK_OUT {
        @Override
        public float getValue(float input) {
            return ((input = input - 1) * input * ((1.70158f + 1) * input + 1.70158f) + 1);
        }
    },
    BACK_INOUT {
        @Override
        public float getValue(float input) {
            float s = 1.70158f;
            if ((input *= 2) < 1) {
                return 0.5f * (input * input * (((s *= (1.525f)) + 1) * input - s));
            }
            return 0.5f * ((input -= 2) * input * (((s *= (1.525f)) + 1) * input + s) + 2);
        }
    },

    //other easing functions ......

    //如果這個function在求值的時候需要duration作為引數的話，那麼可以通過setDuration來設定，否則使用預設值
    private float duration = 1000f;//目前只有ELASTIC***這三個是需要duration的，其他的都不需要

    public float getDuration() {
        return duration;
    }

    public EasingFunction setDuration(float duration) {
        this.duration = duration;
        return this;
    }

    //將Function當做Interpolator使用，預設的實現，不需要列舉元素去重新實現
    @Override
    public float getInterpolation(float input) {
        return getValue(input);
    }

    //將Function當做TypeEvaluator使用，預設的實現，不需要列舉元素去重新實現
    @Override
    public Float evaluate(float fraction, Float startValue, Float endValue) {
        return startValue + getValue(fraction) * (endValue - startValue);
    }

    //幾個數學常量
    public static final float PI = (float) Math.PI;
    public static float TWO_PI = PI * 2.0f;
    public static float HALF_PI = PI * 0.5f;
}

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162

/** * 常見的30個緩動函式的實現 */publicenumEasingFunction implementsIFunction,Interpolator,TypeEvaluator<Float>{/* ------------------------------------------------------------------------------------------- *//* BACK /* ------------------------------------------------------------------------------------------- */BACK_IN{@OverridepublicfloatgetValue(floatinput){returninput*input*((1.70158f+1)*input-1.70158f);}},BACK_OUT{@OverridepublicfloatgetValue(floatinput){return((input=input-1)*input*((1.70158f+1)*input+1.70158f)+1);}},BACK_INOUT{@OverridepublicfloatgetValue(floatinput){floats=1.70158f;if((input*=2)<1){return0.5f*(input*input*(((s*=(1.525f))+1)*input-s));}return0.5f*((input-=2)*input*(((s*=(1.525f))+1)*input+s)+2);}},//other easing functions ......//如果這個function在求值的時候需要duration作為引數的話，那麼可以通過setDuration來設定，否則使用預設值privatefloatduration=1000f;//目前只有ELASTIC***這三個是需要duration的，其他的都不需要publicfloatgetDuration(){returnduration;}publicEasingFunction setDuration(floatduration){this.duration=duration;returnthis;}//將Function當做Interpolator使用，預設的實現，不需要列舉元素去重新實現@OverridepublicfloatgetInterpolation(floatinput){returngetValue(input);}//將Function當做TypeEvaluator使用，預設的實現，不需要列舉元素去重新實現@OverridepublicFloatevaluate(floatfraction,FloatstartValue,FloatendValue){returnstartValue+getValue(fraction)*(endValue-startValue);}//幾個數學常量publicstaticfinalfloatPI=(float)Math.PI;publicstaticfloatTWO_PI=PI*2.0f;publicstaticfloatHALF_PI=PI*0.5f;}

這個專案的緩動函式的實現參考自EaseInterpolator中的實現，但是這個專案的程式碼和EaseInterpolator以及AnimationEasingFunctions這兩個專案都完全不一樣，非常簡單易懂，既保留了原有專案應有的功能，同時為專案的使用場景提供了更多的可能，任何你想使用Interpolator或者TypeEvaluator都能使用它。

舉個例子，以上一節中的彈跳動畫效果為例，現在可以直接使用EasingFunction.BOUNCE_OUT作為Interpolator或者TypeEvaluator來使用：

第一種方式：使用線性插值器和自定義的TypeEvaluator

Java

ObjectAnimator animator1 = new ObjectAnimator();
animator1.setTarget(textView1);
animator1.setPropertyName("translationY");
animator1.setFloatValues(0f, -100f);
animator1.setDuration(1000);
animator1.setInterpolator(new LinearInterpolator());
animator1.setEvaluator(EasingFunction.BOUNCE_OUT); //這裡將EasingFunction.BOUNCE_OUT作為TypeEvaluator來使用
animator1.start();

12345678

ObjectAnimator animator1=newObjectAnimator();animator1.setTarget(textView1);animator1.setPropertyName("translationY");animator1.setFloatValues(0f,-100f);animator1.setDuration(1000);animator1.setInterpolator(newLinearInterpolator()

當數學遇上動畫（3）

當數學遇上動畫：講述 ValueAnimator、TypeEvaluator和TimeInterpolator之間的恩恩怨怨（3）上一節我們得到一個重要的結論，藉助TimeInterpolator或者TypeEvaluator“單獨” 來控制動畫所產生的動畫效果殊途同歸！此

當數學遇上動畫（2）

當數學遇上動畫：講述 ValueAnimator、TypeEvaluator和TimeInterpolator之間的恩恩怨怨（2）上一節的結論是，ValueAnimator就是由TimeInterpolator和TypeEvaluator這兩個簡單函式組合而成的一個複合函式。如下圖所示：上一節我們還將

當數學遇上動畫（1）

當數學遇上動畫：講述 ValueAnimator、TypeEvaluator和TimeInterpolator之間的恩恩怨怨（1）其實關於 ValueAnimator 的內部工作原理大家也都清楚，本文只是選擇從數學函式的角度來解析這個原理，方便理解。看完了本節之後我們就更加清楚如何藉助 TypeEvalu

20180813視頻筆記深度學習基礎上篇（1）之必備基礎知識點深度學習基礎上篇（2）神經網絡模型視頻筆記：深度學習基礎上篇（3）神經網絡案例實戰和深度學習基礎下篇

計算概念人臉識別大量 png 技巧表現 lex github 深度學習基礎上篇（3）神經網絡案例實戰 https://www.bilibili.com/video/av27935126/?p=1 第一課:開發環境的配置 Anaconda的安裝庫的安裝 Windo

從零開始學Android自定義View之動畫系列——屬性動畫（3）

屬性動畫對補間動畫進行了很大幅度的改進，之前補間動畫可以做到的屬性動畫也能做到，補間動畫做不到的現在屬性動畫也可以做到了。因此，今天我們就來學習一下屬性動畫的高階用法，看看如何實現一些補間動畫所無法實現的功能。 ValueAnimator的高階用法補間

WPF中繪畫和動畫（3）

1．矩形矩形由筆觸（Stroke，即邊線）和填充（Fill）構成。Stroke屬性的設置於Line一樣，Fill屬性的資料型別是Brush。Brush是個抽象類，所以我們不可能拿一個Brush類的例項為Fill屬性賦值而只能用Brush派生類的例項進行賦值。 WPF的繪

Leetcode遇上C++（一）

前言：為了鍛鍊自己的程式設計能力，決定嘗試著刷下Leetcode題庫，也為自己畢業時找軟體開發崗位打下基礎，當然咯，作為非科班出身的我，在程式設計上面還有很大的問題，甚至連最基本的知識都未掌握好，但是，我相信功夫不負有心人。通過動手程式設計來學習是我感覺最舒

css3動畫（animation）效果3-正方體合成

per rip relative java tom gpo 介紹 ack rotate <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

Azure技術12-高可用--在Azure上創建典型高可用架構應用（3）

azure php mysql 負載平衡器高可用等待安裝完成將PHPBB的文件夾中的數據復制到相應的目錄中，我這裏為了方便直接放到了wwwroot文件夾中，就不需要另外建網站，直接用默認網站然後我們展開至Install文件夾，找到index.html瀏覽來安裝PHPBB論壇根據提示一步

Android項目實戰（四）：ViewPager切換動畫（3.0版本以上有效果）

技術 code info utf-8 play draw pos support addview 原文:Android項目實戰（四）：ViewPager切換動畫（3.0版本以上有效果）學習內容來自“慕課網” 一般APP進去之後都會有幾張圖片來導航，

資料庫路由中介軟體MyCat - 使用篇（3）上篇

此文已由作者張鎬薪授權網易雲社群釋出。歡迎訪問網易雲社群，瞭解更多網易技術產品運營經驗。全域性序列號資料切分後，原有的關係資料庫中的主鍵約束在分散式條件下將無法使用，因此需要引入外部機制保證資料唯一性標識，這種保證全域性性的資料唯一標識的機制就是全域性序列號（sequence）。 1. 本地檔案方式 c

springboot上傳下載檔案（3）--java api 操作HDFS叢集+叢集配置

只有光頭才能變強! 前一篇文章講了nginx+ftp搭建獨立的檔案伺服器但這個伺服器宕機了怎麼辦？我們用hdfs分散式檔案系統來解決這個問題（同時也為hadoop系列開個頭）目錄 1、Ubuntu14.04下配置Hadoop(2.8.5)叢集環境詳解(完全分

Collection原始碼之路（3）——HashMap 上篇

首先糾正一個錯誤，HashMap不屬於Collection，而是屬於Map，之所以本篇文章叫Collection原始碼之路，是為了和之前的文章呼應。之前的兩篇文章介紹我的我們實際開發中用到最多的ArrayList或者結構簡單的LinkedList，但是找工作面試問得最

打地鼠遊戲（3）之動畫效果

rand pre 繼續 ood 擴展 child timeout cti java 在第一篇中，我們已經實現了單擊開始後遊戲的倒計時，那麽下面，我們需要繼續在Game這個簡直對對象中進行擴展屬性和方法：首先我們需要在Game中添加幾組初始鍵值對： //所有的地鼠dom元

藍的成長記——追逐DBA（1）：奔波於路上，挺進山東藍的成長記——追逐DBA（3）：古董上操作，資料匯入匯出成了問題藍的成長記——追逐DBA（8）：重拾SP報告，回憶oracle的STATSPACK實驗藍的成長記— —追逐DBA（9）：國慶漸去，追逐DBA，新規劃，新啟程

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！

當數學遇上動畫（3）

當數學遇上動畫：講述 ValueAnimator、TypeEvaluator和TimeInterpolator之間的恩恩怨怨（3）

1 緩動函式曲線

當數學遇上動畫（3）

當數學遇上動畫（2）

當數學遇上動畫（1）

20180813視頻筆記深度學習基礎上篇（1）之必備基礎知識點深度學習基礎上篇（2）神經網絡模型視頻筆記：深度學習基礎上篇（3）神經網絡案例實戰和深度學習基礎下篇

從零開始學Android自定義View之動畫系列——屬性動畫（3）

WPF中繪畫和動畫（3）

Leetcode遇上C++（一）

css3動畫（animation）效果3-正方體合成

Azure技術12-高可用--在Azure上創建典型高可用架構應用（3）

Android項目實戰（四）：ViewPager切換動畫（3.0版本以上有效果）

資料庫路由中介軟體MyCat - 使用篇（3）上篇

springboot上傳下載檔案（3）--java api 操作HDFS叢集+叢集配置

Collection原始碼之路（3）——HashMap 上篇

打地鼠遊戲（3）之動畫效果

TensorFlow學習筆記（3）——CNN在CIFAR10上的實現

牛客網線上程式設計題——句子反轉（3）

Leetcode題解之數學問題（3） 3的冪

springmvc基礎：（3）攔截器與檔案上傳

jquery知識點總結（3）---動畫效果+外掛機制

當數學遇上動畫（3）

當數學遇上動畫：講述 ValueAnimator、TypeEvaluator和TimeInterpolator之間的恩恩怨怨（3）

1 緩動函式曲線

相關推薦