自定義差值器,在線“查看差值器”效果


title: 自定義差值器,在線“查看差值器”效果
tags: []
notebook: 實用工具


在線“查看差值器”效果

簡介

這個網站提供 可視化插值器以及演示動畫,而且預置了許多插值器公式

http://inloop.github.io/interpolator/

image

效果示例一:

factor = 0.15
Math.PI = 3.14
pow(2, -10 * x) * sin((x - factor / 4) * (2 * Math.PI) / factor) + 1

效果示例二:

factor = 0.4
pow(2, -10 * x) * sin((x - factor / 4) * (2 * 3.14) / factor) + 1

Android 差值器的簡單使用

官方內置了9鐘插值器:

  • LinearInterpolator(線性插值器:勻速)

  • AccelerateInterpolator(加速度插值器: 起始速度慢殖告,然后越來越快)

  • DecelerateInterpolator(減速插值器:起始速度快,然后越來越慢)

  • Accelerate Decelerate Interpolator / 先加速后減速插值器

image

什么是Interpolator雳锋?

通俗易懂的說黄绩,Interpolator(插值器)負責控制動畫變化的速率,使得基本的動畫效果能夠以勻速魄缚、加速宝与、減速焚廊、拋物線速率等各種速率變化。

示例代碼:

 private void move(){
//        PropertyValuesHolder welcomeTv_1 = PropertyValuesHolder.ofFloat("translationX", 0, 300);
        float [] x = {0f,60f,120f,180f};
        ValueAnimator animator = ObjectAnimator.ofFloat(redView, "translationX", x);
        animator.setInterpolator(new LinearInterpolator());
        animator.start();
    }

    private void scale(){
        PropertyValuesHolder welcomeTv_1 = PropertyValuesHolder.ofFloat("scaleX", 0.0f, 1f);
        PropertyValuesHolder welcomeTv_2 = PropertyValuesHolder.ofFloat("scaleY", 0.0f, 1f);
        ObjectAnimator animator = ObjectAnimator.ofPropertyValuesHolder(redView, welcomeTv_1, welcomeTv_2);

        animator.setInterpolator(new LinearInterpolator());
        animator.setDuration(2000);
//        pcrAnimator.setStartDelay(1000);
        animator.start();
    }

    private void rotation(){
        ValueAnimator animator = ObjectAnimator.ofFloat(redView, "rotation", -200f, 0f);
        animator.setInterpolator(new LinearInterpolator());
        animator.setDuration(2000);
        animator.start();
    }

    private void alpha(){
        ValueAnimator animator = ObjectAnimator.ofFloat(redView, "alpha", 0f, 1f);
        animator.setInterpolator(new LinearInterpolator());
        animator.setDuration(2000);
        animator.start();
    }

自定義差值器

  public class CustomInterpolator implements Interpolator {
  
      private float factor;//因素
  
  
      public CustomInterpolator() {
          this.factor = 0.15f;
      }
  
      @Override
      public float getInterpolation(float input) {
          return (float) (Math.pow(2, -10 * input) * Math.sin((input - factor / 4) * (2 * Math.PI) / factor) + 1);
      }
  }

插值器 和 估值器 的區(qū)別

  • 插值器Interpolator

    根據(jù)時間流失的百分比 計算當前屬性改變的百分比习劫。

  • 估值器Evaluator

    根據(jù)當前屬性改變的百分比來計算改變后的屬性值

    插值器決定屬性值隨時間變化的規(guī)律咆瘟;而具體變化屬性數(shù)值則交給估值器去計算。

自定義估值器

    // 實現(xiàn)TypeEvaluator接口
    public class PointEvaluator implements TypeEvaluator<Point> {
        // 復寫evaluate()
        // 在evaluate()里寫入對象動畫過渡的邏輯
        @Override
        public Point evaluate(float fraction, Point startValue, Point endValue) {
            // 根據(jù)fraction來計算當前動畫的x和y的值
            int x = (int) (startValue.x + fraction * (endValue.x - startValue.x));
            int y = (int) (startValue.y + fraction * (endValue.y - startValue.y));
            // 將計算后的坐標封裝到一個新的Point對象中并返回
            return new Point(x, y);
        }
    }

總結

插值器和估值器關系

屬性動畫是對屬性做動畫诽里,屬性要實現(xiàn)動畫袒餐。

  • 首先由插值器根據(jù)時間流逝的百分比計算出當前屬性值改變的百分比,然后由插值器將這個百分比返回谤狡。這個時候插值器的工作就完成了灸眼。

比如: 插值器 返回的值是0.5,很顯然我們要的不是0.5

  • 插值器算好屬性變化百分比之后墓懂,由估值器根據(jù)當前屬性改變的百分比來計算改變后的屬性值焰宣,根據(jù)這個屬性值,我們就可以對View設置當前的屬性值了捕仔。

參考資料

Android-貝塞爾插值器的使用

插值器匕积?估值器?傻傻分不清楚

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末榜跌,一起剝皮案震驚了整個濱河市闪唆,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌钓葫,老刑警劉巖悄蕾,帶你破解...
    沈念sama閱讀 206,968評論 6 482
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異础浮,居然都是意外死亡帆调,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,601評論 2 382
  • 文/潘曉璐 我一進店門霸旗,熙熙樓的掌柜王于貴愁眉苦臉地迎上來贷帮,“玉大人戚揭,你說我怎么就攤上這事诱告。” “怎么了民晒?”我有些...
    開封第一講書人閱讀 153,220評論 0 344
  • 文/不壞的土叔 我叫張陵精居,是天一觀的道長。 經常有香客問我潜必,道長靴姿,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,416評論 1 279
  • 正文 為了忘掉前任磁滚,我火速辦了婚禮佛吓,結果婚禮上宵晚,老公的妹妹穿的比我還像新娘。我一直安慰自己维雇,他們只是感情好淤刃,可當我...
    茶點故事閱讀 64,425評論 5 374
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著吱型,像睡著了一般逸贾。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上津滞,一...
    開封第一講書人閱讀 49,144評論 1 285
  • 那天铝侵,我揣著相機與錄音,去河邊找鬼触徐。 笑死咪鲜,一個胖子當著我的面吹牛,可吹牛的內容都是我干的撞鹉。 我是一名探鬼主播嗜诀,決...
    沈念sama閱讀 38,432評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼孔祸!你這毒婦竟也來了隆敢?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 37,088評論 0 261
  • 序言:老撾萬榮一對情侶失蹤崔慧,失蹤者是張志新(化名)和其女友劉穎拂蝎,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體惶室,經...
    沈念sama閱讀 43,586評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡温自,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,028評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了皇钞。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片悼泌。...
    茶點故事閱讀 38,137評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖夹界,靈堂內的尸體忽然破棺而出馆里,到底是詐尸還是另有隱情,我是刑警寧澤可柿,帶...
    沈念sama閱讀 33,783評論 4 324
  • 正文 年R本政府宣布鸠踪,位于F島的核電站,受9級特大地震影響复斥,放射性物質發(fā)生泄漏营密。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,343評論 3 307
  • 文/蒙蒙 一目锭、第九天 我趴在偏房一處隱蔽的房頂上張望评汰。 院中可真熱鬧纷捞,春花似錦、人聲如沸被去。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,333評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽编振。三九已至缀辩,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間踪央,已是汗流浹背臀玄。 一陣腳步聲響...
    開封第一講書人閱讀 31,559評論 1 262
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留畅蹂,地道東北人健无。 一個月前我還...
    沈念sama閱讀 45,595評論 2 355
  • 正文 我出身青樓,卻偏偏與公主長得像液斜,于是被迫代替她去往敵國和親累贤。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 42,901評論 2 345

推薦閱讀更多精彩內容