Android 動畫

一、Drawable目錄(res/drawable)

1、bitmap ,位圖

<bitmap xmlns:android="http://schemas.android.com/apk/res/android"

android:antialias="true"

android:dither="true"

android:src="@drawable/wang"

android:tileMode="mirror"> ??</bitmap>

tileMode: 平鋪屬性? antialias:抗鋸齒? dither:抗抖動

mirror 鏡像? 圖片有倒立面 ? ?repeat 重復? 圖片重復填充

clamp? 邊緣拉伸? 效果奇怪? disable 默認 圖片默認顯示


2、clip,圖片裁剪

<clip xmlns:android="http://schemas.android.com/apk/res/android"

android:drawable="@color/colorPrimary"

android:clipOrientation="horizontal"

android:gravity="left"> </clip>

clipOrientation:裁剪方向? gravity:裁剪起始位置

在代碼實現裁剪,通過調用setLevel(),取值0~10000,0完全不見,10000完全顯示

mDrawable= (ClipDrawable)mImageView.getDrawable();

mDrawable.setLevel(5000);


3、inset,插入圖片

<inset xmlns:android="http://schemas.android.com/apk/res/android"

android:drawable="@color/colorPrimary"

android:insetLeft="50dp"

android:insetRight="50dp"

android:insetTop="50dp"

android:insetBottom="50dp"> </inset>

邊距:insetLeft,insetRight,insetTop,insetBottom


4、layer,圖層,列表最后一個繪制在最上層

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<item android:left="20dp" android:top="20dp">??

<bitmap ??android:gravity="center" ??android:src="@drawable/wang"/>

</item>

<item android:left="20dp" android:top="20dp">

<bitmapandroid:gravity="center"android:src="@drawable/wang"/>

</item> ? </layer-list>


5、lever-list ,等級列,顯示對應等級的圖片

<level-list xmlns:android="http://schemas.android.com/apk/res/android">

<item?android:drawable="@drawable/close"?android:minLevel="6"?android:maxLevel="10" />

<item?android:drawable="@drawable/open"?android:minLevel="12"?android:maxLevel="20"/>

</level-list> ?

代碼實現:

<ImageView ??android:id="@+id/level" ??android:src="@drawable/level"

android:layout_width="wrap_content" ? ?android:layout_height="wrap_content" />

mImageView.setImageLevel(8);


6、scale,圖片縮放

<scale xmlns:android="http://schemas.android.com/apk/res/android"

android:drawable="@drawable/wang" android:scaleGravity="center"

android:scaleWidth="50%" ??android:scaleHeight="50%" ?> </scale>


7、shape,圖片形狀

<shape xmlns:android="http://schemas.android.com/apk/res/android"

android:shape="rectangle">

<solid ?android:color="@color/colorAccent"/>

<corners ?android:radius="32dp"/>

<stroke ??android:width="12dp" ??android:color="@color/colorPrimary"

android:dashGap="12dp" ? ?android:dashWidth="12dp"/> ?</shape>


8、selector,監聽控件狀態

<selector ?xmlns:android="http://schemas.android.com/apk/res/android">

<item ?android:state_pressed="true" ?android:drawable="@drawable/wang0"/>

<item ?android:state_focused="true" ?android:drawable="@drawable/wang5"/>

<item ?android:drawable="@color/colorPrimary"/> ? </selector>


9、shape和selector結合使用

<?xml version="1.0" encoding="utf-8"? >

<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item>

<shape android:shape="rectangle">

<corners /> <stroke /> <solid />

</shape>

</item>

</selector>

10、transition ,兩張圖片間透明度的漸變

<transition ?xmlns:android="http://schemas.android.com/apk/res/android">

<item ?android:drawable="@drawable/close">

<item ?android:drawable="@drawable/open"> </transition>


11、animation-list 逐幀動畫

<animation-list ?xmlns:android="http://schemas.android.com/apk/res/android">

<item ?android:drawable="@drawable/v_anim1" ?android:duration="300"/>

<item ?android:drawable="@drawable/v_anim2" ?android:duration="300"/>

<item ?android:drawable="@drawable/v_anim3" ?android:duration="300"/>

</animation-list>

代碼實現:

播放動畫


控制動畫的播放與暫停

二、Interpolator 補間動畫(res/anim)

1、AlphaAnimation

xml實現


代碼實現

2、ScaleAnimation


xml實現
代碼實現

3、TranslateAnimation


xml實現
代碼實現

4、RotateAnimation


xml實現
代碼實現

5、插值器(負責補間動畫的平滑過渡)

xml文件:android:interpolator="@android:anim/accelerate_decelerate_interpolator"


插值器家族
Interpolator負責控制動畫的變化速度

6、直接使用插值器

為動畫設置插值器

7、動畫執行監聽回調

設置動畫執行監聽器

8、ViewPropertyAnimator的用法

view中的方法,例如:textview.animate().alpha(0f);?

注意:在xml里配置動畫屬性的時候,有很多屬性沒有在輸入參數列里提示,需要自己手寫輸入,例如時間 android:duration="",單位毫秒,根據自己的需求手動輸入各種隱藏屬性。


三、Property Animator 屬性動畫(res/animator)

1、ValueAnimator

基本用法,四種類型 of(int,float,argb,object):

ValueAnimator valueAnimator = ValueAnimator.ofInt(0, 100);

這里引入TypeEvaluator(實現類IntEvaluator ,FloatEvaluator,ArgbEvaluator),Evaluator用來控制屬性動畫如何計算每時刻的屬性值

2、ObjectAnimator (ValueAnimator子類)

ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(viewGroup, "translationY", toY);

objectAnimator.setDuration(500).start();

xml中定義的動畫
在代碼中調用xml中的動畫效果

3、動畫同時執行

同時執行動畫方案一
同時執行動畫方案二

4、動畫執行監聽回調

設置動畫執行監聽器

4、自定義動畫效果

泛型動畫效果

四、Transistion Animation 過渡動畫(res/transition )

簡介:本質是屬性動畫,實現了二次封裝,方便開發者實現Activity或View的過渡動畫效果,過渡動畫的使用很簡單,首先需要準備過渡動畫前后兩個不同的布局文件,這兩個布局文件的根布局具有相同的id屬性值。

1、過渡動畫


過渡動畫Manager
過渡動畫效果

2、實現步驟:


代碼實現

五、ColorSelect(res/color)

<xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android" android:enterFadeDuration="500">

<item android:state_pressed="true"?android:color="@color/color_fff" />

</selector>


六、漣漪效果(Ripple)

有邊界的漣漪效果:

android:background="?android:attr/selectableItemBackground"

無邊界的漣漪效果:

android:background="?android:attr/selectableItemBackgroundBorderless"

自定義漣漪效果:

<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="@color/color_333">

<item>

????<shape android:shape="rectangle">

????????<corners android:radius="@dimen/dimen_px_60" />

????????<solid android:color="@color/color_fff"/>

????????<stroke android:color="@color/color_c70017"?

????????????????????android:width="@dimen/dimen_px_01"/>

????</shape>

</item>

記得設置控件為可點擊狀態:

android:clickable="true"


七、顯示效果(Reveal)

Animator animator = ViewAnimationUtils.createCircularReveal(mImageView,centerX,centerY,startRadius,endRadius);

animator.setDuration(1000);

animator.start();


八、常見問題

Selector的item狀態失效,情況1:item的順序問題,默認的顯示效果需要放在最后。情況2:View的本身是否有item中監聽的狀態,如state_check,Checkbox有該屬性,而Button沒有該屬性,所以Checkbox生效,而Button則不生效。情況3:view的本身有item中監聽的狀態,但設置后不生效,需要為View設置對應的監聽,如state_press,TextView本身有該屬性,但按下沒有反應,為TextView設置View.OnClickListener后,TextView的state_press狀態監聽生效,或者在控件添加android:clickable="true"屬性。

動畫執行后遺留問題,建議使用最新的動畫API,如:Animator(三) > Animation(四) > Interpolator(二)。

動畫移動的參數坐標是以控件左上角坐標為基準。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,333評論 6 531
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,491評論 3 416
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,263評論 0 374
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,946評論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,708評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,186評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,255評論 3 441
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,409評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,939評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,774評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,976評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,518評論 5 359
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,209評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,641評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,872評論 1 286
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,650評論 3 391
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,958評論 2 373

推薦閱讀更多精彩內容