1. 程式人生 > >Android 彈性動畫的三種實現方式

Android 彈性動畫的三種實現方式

640?wx_fmt=png&wxfrom=5&wx_lazy=1

今日科技快訊

9月19日訊息,百度宣佈,餘正鈞加盟百度出任集團公司首席財務官(CFO),全面領導百度財務體系的構建、發展和運營。餘正鈞將直接向百度創始人、董事長兼執行長李彥巨集彙報。在加入百度前,餘正鈞在新浪集團及微博有13年的工作經歷,2007年至2014年擔任新浪首席財務官,自2015年起擔任微博首席財務官,在新浪集團融資、微博上市等方面做出了貢獻。加入新浪前,餘正鈞曾在矽谷服務於 Adobe Systems 等公司。餘正鈞擁有加州 CPA,美國南加州大學財會專業碩士學位及加州大學經濟學學士學位。

作者簡介

本篇來自 qq_34902522 的投稿,詳細地講解了彈性動畫的多種實現方式,希望大家喜歡!

qq_34902522

 的部落格地址:

http://blog.csdn.net/qq_34902522

前言

現在的 android 開發提出的需求是越來越接近現實真實感,提高使用者體驗感。就拿動畫效果來說,之前設計給的需求大都比較直接,縮放、旋轉、移動等動畫效果都執行完就結束了。現在的話,為了追求現實 生活中的那種真實感,往往都會有一個回彈的效果,稱之為彈性動畫。

非彈性動畫體驗

非彈性動畫的效果圖:

0?wx_fmt=gif&wxfrom=5&wx_lazy=1

我們來看一下實現該效果的程式碼:

0?wx_fmt=jpeg

通過效果圖,我們會覺得不 real,我們想讓他 Q 一點,有彈性效果  

那該怎麼實現呢?往下看。

彈性動畫的三種實現方式

way 1:

通過 interpolator(差值器)實現彈性效果。

這裡給大家一個關於差值器網站:

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

在這個網站上可以線上看每種 interpolator 的效果,從而選擇所需要的 interpolator。這裡我們選擇 scaling,library 選擇 spring。如下圖:

0?wx_fmt=jpeg

然後重寫 interpolator 類,程式碼如下:

0?wx_fmt=png

接下來就是把我們重寫的差值器設定進去,看程式碼:

0?wx_fmt=png

這裡重寫的 interpolator 的構造方法中我穿的引數是因子,它的值越大,它回彈效果越慢。讓我們來看看效果吧:

0?wx_fmt=gif

確實達到了我們要的彈性效果,如果覺得彈性不夠的話,可以修改彈性因數即可。這裡我用的是屬性動畫,用補間動畫設定自己重寫的 interpolator 也是同樣可以的。

 

way 2:

第二種實現彈性動畫的方式是使用 Facebook 推出的 rebound

如何使用的呢?首先我們要在 build.gradle 中引入如下依賴:  

compile 'com.facebook.rebound:rebound:0.3.8' 

然後我們先上程式碼,根據程式碼來講解使用:

0?wx_fmt=png

使用 rebound 我們需要初始化 SpringSystem 物件和 Spring 物件。通過 Spring 我們可以設定動畫屬性的初始值、結束值。 Spring 需要新增一個 SpringListener 介面,程式碼中我用的 SimpleSpringListener 是 Springlistener 的實現類。(ps:addListener 這裡如果 new 一個 SpringListener 的話要重寫全部的方法,沒必要,需要哪個寫哪個)。我們看下 SpringListener 介面的定義

0?wx_fmt=png

我們需要什麼樣的需求就重寫對應方法就好。上面的程式碼中有 SpringConfig 這個物件,通過看原始碼發現他的建構函式接受兩個變數:1.tension(拉力)、2.friction(摩擦力)。作用是什麼呢?很好理解 tension 拉力越大,彈性越大,friction 摩擦力越大,彈性效果越小。預設的 tension 值,friction 值如下:

0?wx_fmt=png

下面讓我們看下通過 rebound 實現的彈性效果是什麼樣的:

0?wx_fmt=gif

彈性效果可以通過修改 tension 和 friction 的值來改變,大家可以試試。

way 3:

下面我們說一說最後一種實現方式。通過引入官方提供的 SpringAnimation 來實現。上面第二種方式我們是用的 Facebook 推出的框架,現在我們看看 Google 官方的效果吧。

首先我們在 build.gradle 檔案中引入依賴:  

compile 'com.android.support:support-dynamic-animation:25.3.1'

接下來上程式碼:

0?wx_fmt=png

這裡面具體的一些用法,我就不細說了,可以參考:

http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2017/0330/7757.html

這個連結裡面說的還挺詳細的。那我們看下通過 SpringAnimation 實現的效果是怎麼樣的。

0?wx_fmt=gif

同 rebound,這邊如果你對彈性動畫的彈性效果不滿意可以通過 setStiffness() 和 setDampingRatio() 方法來實現你想要的效果。注意哦,stiffness 的值越小,彈性效果越好,彈時間越長。DampingRatio 的值越大,彈性效果越差。  

區別

這三種方式都可以實現彈性效果,那到底選擇什麼方式呢,這裡說一下 rebound 和 SpringAnimation 。SpringAnimation 的話在對一個控制元件多個屬性的動畫效果設定比如一個 view 我既設定縮放動畫又設定 平移動畫。就會會出現程式碼量多的問題,而 rebound 則相對好些。

下面附上一張完整的效果圖:

0?wx_fmt=gif

好了,到這裡彈性動畫主要的實現點都講完了。想了解完整流程的可閱閱讀原始碼:

http://blog.csdn.net/qq_34902522/article/details/77651799

謝謝閱讀,歡迎 star。

更多

每天學習累了,看些搞笑的段子放鬆一下吧。關注最具娛樂精神的公眾號,每天都有好心情。

640?wx_fmt=gif

如果你有好的技術文章想和大家分享,歡迎向我的公眾號投稿,投稿具體細節請在公眾號主頁點選“投稿”選單檢視。

歡迎長按下圖 -> 識別圖中二維碼或者掃一掃關注我的公眾號:

640?wx_fmt=jpeg