Android 應用的動畫實踐--View Animation篇

嘗試搜索了一下android 動畫的中文資料,很多都是一些枯燥的翻譯api的一些文檔,很少有系統講解如何利用動畫開發一個應用的資料,忽然,發現很多應用也不怎麼注重動畫在app的應用,想了想,自己嘗試總結一下吧。因爲,本人也不是什麼動畫製作師,沒法把動畫做得很絢麗,只好,利用內置的效果,進行簡單加工,如何發揮,由各位的創意來定。鑑於,很多有關的android的動畫資料裏面,都是堆代碼的,所以,全部代碼均放在了github上面,查看完整代碼可以移步到github上面去

特地說明一下,由於android 模擬器和錄製工具的原因,例子展示中的gif 的抽筋播放效果不等同於實際效果,自己腦補把抽筋的部分去掉

在Android 裏你能夠使用的動畫效果:

  • 平移

  • 縮放

  • 旋轉

  • 透明

以上動畫的基本使用就是本文的內容了。由於,本人的能力問題,實在搞不出讓人眼前一亮的動畫,就湊合着看着吧。不過,那些令人讚歎的動畫效果的基礎就是這些。

一般而言,要做動畫的,需要封裝點物理公式,用作爲計算幀與幀間的數值計算,不過,如果,只是,爲了搞些動畫讓app好用一些,倒不需要搞得這麼複雜,android 官方api 已經封裝好了一些常用的動畫插值器。

默認內置7種類型的插值器,個人覺得,如果只是應用裏面的一些動畫的話這7個就夠用了。

  1. AccelerateInterpolator

    加速          
    AccelerateInterpolator

  2. Decelerate

    減速          
    decelerate

  3. AccelerateDecelerateInterpolator

    開始,和結尾都很慢,但是,中間加速          
    accelerate_decelerate

  4. AnticipateInterpolator

    開始向後一點,然後,往前拋          
    AccelerateInterpolator

  5. OvershootInterpolator

    往前拋超過一點,然後返回來          
    overshoot

  6. AnticipateOvershootInterpolator

    開始向後一點,往前拋過點,然後返回來          
    anticipate_overshoot

  7. BounceInterpolator

    結束的時候彈一下          
    bounce

  8. LinearInterpolator

    勻速

以上動畫都源自android官方api demo,用eclipse adt android 選擇例子項目導航,然後,選擇APIDEMOS 就能創建(什麼沒聽說過?現在知道了吧。。。)

好了,雖然截取的gif 動畫播放起來有點抽筋的感覺,接下來我們該如何在應用中使用這些知識呢?

目前講解動畫api 的資料比較多,這裏就不在重複那些基礎的知識了!

現在讓我們學習一下,如何利用,平移,縮放,旋轉創造出讓人眼前一亮的動畫.

爲了,更有目的的使用動畫,下面假想一個使用場景。

假想:商品購物車案例

Notice :爲了方便看效果,動畫延時時間將會設置的比較長。特地說明一下:假想就是隨便想,切勿對號入座。

任務:

爲了,讓商城app有更好的交互效果,決定對購物車控件和商品控件上面加一些動畫效果。

購物車動畫設計方案:

利用,透明,平移,對購物車的出現和離開增加動畫交互效果。

經過一番努力效果如下(湊合着看吧。。):

anim1

相關知識點

一些動畫常用的通用基礎屬性:

Notice: 所謂通用就是說所有動畫標籤都適用於這些屬性

  • android:duration 設置動畫播放的時間

  • android:startOffset 設置動畫的開始播放時間

  • andorid:interpolator 設置動畫的插值器

  • android:repeatCount 動畫播放的常用次數

  • android:repeatMode 動畫重播的模式,即從頭到尾,從頭到尾,還是從頭到尾,在從尾到頭。

透明的使用:

<alpha />

value 從 0 (透明) 到 1 (不透明)在android中透明主要用於對view 淡入,淡出的效果控制主要有兩個屬性

  • android:fromAlpha view在動畫開始的透明度。

  • android:toAlpha view在動畫結束的透明度。

平移的使用:

<translate />

支持使用 %,如 “50%“ 獲取的是這個view的百分之50,除此之外還有另外一種寫法:”50%p“ 意思是獲取這個view的上一級view的百分之50 當然,指定特定值也是支持的“22.2”,不過爲了兼容更多的android設備建議還是使用百分比的值。

  • android:fromXDelta

  • android:fromYDelta

    from?Delta 意思是開始的軸線

  • android:toXDelta

  • android:toYDelta

    to?Delta 意思是結束的軸線

這次的方案展示了兩個插值器的使用:

用於出現的:BounceInterpolator

用於離開的: AnticipateInterpolator

所謂插值器就是用於數值的起始間的變化,就是相當於一個類似於物理引擎的東西。android官方內置了一些簡單常用的數值變換,讓我們,不需要去學習相關的物理知識。

例如:

開始值爲1,結束值爲 100.那麼我們如何控制變化這個值的變化過程呢?這裏就是插值器的使用。

一般勻速的話就是:

1,2,3,4,5...100。 然後我們就會看到物體以一個勻速的速度進行平移操作。

那麼我們需要物體像汽車那樣加速度的前進,我們可以用加速插值器,我們從1到100的過程,就會是:

1,2,4,5,8,16.。。。。100 展示在我們面前的view對象就會以一個加速度的形式進行平移。

有很多應用開發者並不熟悉動畫製作的一些基礎知識,可能不太明白。現在,通過對源碼進行分析,來徹底搞明白這個概念。

我們分析一些Interpolator 類樹:

從api文檔TimeInterpolator 我們可以知道,這個插值器的實現只有一個方法:

getInterpolation(float t);

然後我們挑選前面用過的BounceInterpolator 看下,它是如何實現這個方法。如果感興趣的,可以按照這種方法,把其他幾個插值器的實現都看一遍。

最後我們會發現,插值器的作用就是返回值。

接着我們來看下Animation line:869 是怎麼用這個接口的.

看完這這幾個地方,相信應該對android 動畫框架怎麼對值進行變換的原理應該有所瞭解。

有了以上知識,我們對android的動畫框架基本上已經完全瞭解,現在,我們利用學到的知識,進行更好的動畫設計。

我們接着剛纔的案例,着手設計商品控件的動畫設計

商品動畫設計:

這次,我們學習一個新的動畫標籤縮放(<scale>)

效果如下:

shop1

<scale />

使view 大點或者小點

  • android:fromXScale

  • android:fromYScale

    from?Scale 意思是開始軸線的縮放比例(默認 1.0)

  • android:toXScale

  • android:toYScale

    to?Scale 意思是結束軸線的縮放比例(默認 1.0)

  • android:pivotX

  • android:pivotX

    旋轉用的軸點座標

最後我們把購物車的動畫,和商品的動畫在組合起來。效果如下:

添加商品的時候,如果購物車還沒出現,先出現購物車顯示的動畫,在進行商品的動畫播放。

具體實現 line: 77 -104


shop2

這次我們學習一下如何監聽動畫的動作,對於AnimationListener()主要有三個

  • onAnimationStart(Animation animation)

  • onAnimationRepeat(Animation animation)

  • onAnimationEnd(Animation animation)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章