補間動畫
補間動畫的分類和Interpolator
Andoird所支援的補間動畫效果有如下這五種,或者說四種吧,第五種是前面幾種的組合而已~
- AlphaAnimation:透明度漸變效果,建立時許指定開始以及結束透明度,還有動畫的持續 時間,透明度的變化範圍(0,1),0是完全透明,1是完全不透明;對應<alpha/>標籤!
- ScaleAnimation:縮放漸變效果,建立時需指定開始以及結束的縮放比,以及縮放參考點, 還有動畫的持續時間;對應<scale/>標籤!
- TranslateAnimation:位移漸變效果,建立時指定起始以及結束位置,並指定動畫的持續 時間即可;對應<translate/>標籤!
- RotateAnimation:旋轉漸變效果,建立時指定動畫起始以及結束的旋轉角度,以及動畫 持續時間和旋轉的軸心;對應<rotate/>標籤
- AnimationSet:組合漸變,就是前面多種漸變的組合,對應<set/>標籤
先要來了解一個東西:Interpolator
用來控制動畫的變化速度,可以理解成動畫渲染器,當然我們也可以自己實現Interpolator 介面,自行來控制動畫的變化速度,而Android中已經為我們提供了五個可供選擇的實現類:
- LinearInterpolator:動畫以均勻的速度改變
- AccelerateInterpolator:在動畫開始的地方改變速度較慢,然後開始加速
- AccelerateDecelerateInterpolator:在動畫開始、結束的地方改變速度較慢,中間時加速
- CycleInterpolator:動畫迴圈播放特定次數,變化速度按正弦曲線改變: Math.sin(2 * mCycles * Math.PI * input)
- DecelerateInterpolator:在動畫開始的地方改變速度較快,然後開始減速
- AnticipateInterpolator:反向,先向相反方向改變一段再加速播放
- AnticipateOvershootInterpolator:開始的時候向後然後向前甩一定值後返回最後的值
- BounceInterpolator: 跳躍,快到目的值時值會跳躍,如目的值100,後面的值可能依次為85,77,70,80,90,100
- OvershottInterpolator:回彈,最後超出目的值然後緩慢改變到目的值
而這個東東,我們一般是在寫動畫xml檔案時會用到,屬性是:android:interpolator, 而上面對應的值是:@android:anim/linear_interpolator,其實就是駝峰命名法變下劃線而已 AccelerateDecelerateInterpolator對應:@android:anim/accelerate_decelerate_interpolator!
各種動畫的詳細講解
動畫的xml檔案都是建在res下的anim資料夾內
這裡的android:duration都是動畫的持續時間,單位是毫秒~
AlphaAnimation(透明度漸變)
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:fromAlpha="1.0"
android:toAlpha="0.1"
android:duration="2000"/>
屬性解釋:
- fromAlpha :起始透明度
- toAlpha:結束透明度
- 透明度的範圍為:0-1,完全透明-完全不透明
ScaleAnimation(縮放漸變)
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator"
android:fromXScale="0.2"
android:toXScale="1.5"
android:fromYScale="0.2"
android:toYScale="1.5"
android:pivotX="50%"
android:pivotY="50%"
android:duration="2000"/>
屬性解釋:
- fromXScale/fromYScale:沿著X軸/Y軸縮放的起始比例
- toXScale/toYScale:沿著X軸/Y軸縮放的結束比例
- pivotX/pivotY:縮放的中軸點X/Y座標,即距離自身左邊緣的位置,比如50%就是以影象的 中心為中軸點
TranslateAnimation(位移漸變)
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:fromXDelta="0"
android:toXDelta="320"
android:fromYDelta="0"
android:toYDelta="0"
android:duration="2000"/>
屬性解釋:
- fromXDelta/fromYDelta:動畫起始位置的X/Y座標
- toXDelta/toYDelta:動畫結束位置的X/Y座標
RotateAnimation(旋轉漸變)
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:fromDegrees="0"
android:toDegrees="360"
android:duration="1000"
android:repeatCount="1"
android:pivotX="50.0%"
android:pivotY="50.0%"
android:repeatMode="reverse"/>
屬性解釋:
- fromDegrees/toDegrees:旋轉的起始/結束角度
- repeatCount:旋轉的次數,預設值為0,代表一次,假如是其他值,比如3,則旋轉4次 另外,值為-1或者infinite時,表示動畫永不停止
- repeatMode:設定重複模式,預設restart,但只有當repeatCount大於0或者infinite或-1時 才有效。還可以設定成reverse,表示偶數次顯示動畫時會做方向相反的運動!
AnimationSet(組合漸變)
非常簡單,就是前面幾個動畫組合到一起而已~
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/decelerate_interpolator"
android:shareInterpolator="true" >
<scale
android:duration="2000"
android:fromXScale="0.2"
android:fromYScale="0.2"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="1.5"
android:toYScale="1.5" />
<rotate
android:duration="1000"
android:fromDegrees="0"
android:repeatCount="1"
android:repeatMode="reverse"
android:toDegrees="360" />
<translate
android:duration="2000"
android:fromXDelta="0"
android:fromYDelta="0"
android:toXDelta="320"
android:toYDelta="0" />
<alpha
android:duration="2000"
android:fromAlpha="1.0"
android:toAlpha="0.1" />
</set>
動畫呼叫:
@Override
public void onClick(View v) {
switch (v.getId()){
case R.id.btn_alpha:
Animation animation = AnimationUtils.loadAnimation(this,
R.anim.anim_alpha);
img_show.startAnimation(animation);
break;
case R.id.btn_scale:
Animation animation = AnimationUtils.loadAnimation(this,
R.anim.anim_scale);
img_show.startAnimation(animation);
break;
case R.id.btn_tran:
Animation animation = AnimationUtils.loadAnimation(this,
R.anim.anim_translate);
img_show.startAnimation(animation);
break;
case R.id.btn_rotate:
Animation animation = AnimationUtils.loadAnimation(this,
R.anim.anim_rotate);
img_show.startAnimation(animation);
break;
case R.id.btn_set:
Animation animation = AnimationUtils.loadAnimation(this,
R.anim.anim_set);
img_show.startAnimation(animation);
break;
}
}
動畫狀態的監聽
我們可以對動畫的執行狀態進行監聽,呼叫動畫物件的:
setAnimationListener(new AnimationListener())方法,重寫下面的三個方法:
- onAnimationStart():動畫開始
- onAnimtaionRepeat():動畫重複
- onAnimationEnd():動畫結束
即可完成動畫執行狀態的監聽~
為View動態設定動畫效果
先呼叫AnimationUtils.loadAnimation(動畫xml檔案),然後View控制元件呼叫startAnimation(anim) 開始動畫~這是靜態載入的方式,當然你也可以直接建立一個動畫物件,用Java程式碼完成設定,再呼叫 startAnimation開啟動畫~
注意
補間動畫位置改變後,其位置還是在原來的地方只是檢視位置改變了,像按鈕的點選事件還是在原來的地方!
相關文章
- Flutter補間動畫Flutter動畫
- Android 補間動畫Android動畫
- Flutter——動畫基礎(補間動畫)Flutter動畫
- 【Android 動畫】動畫詳解之補間動畫(一)Android動畫
- Android 補間動畫學習Android動畫
- 學習 PixiJS — 補間動畫JS動畫
- Android備忘錄《View動畫(補間動畫)》AndroidView動畫
- 網易2022GDC | AI動畫師:實時動作補全系統AI動畫
- 每日一畫--day36(補)
- js正則格式化日期時間自動補0JS
- 如何用matlab畫bode圖——自動控制原理基礎補充(一)Matlab
- Android 動畫詳解:屬性動畫、View 動畫和幀動畫Android動畫View
- View動畫、幀動畫View動畫
- 看動畫輕鬆理解時間複雜度(一)動畫時間複雜度
- 看動畫輕鬆理解時間複雜度(二)動畫時間複雜度
- iOS 動畫之Spring動畫、Block動畫、GIF圖iOS動畫SpringBloC
- 【Android 動畫】動畫詳解之屬性動畫(三)Android動畫
- 【Android 動畫】動畫詳解之屬性動畫(五)Android動畫
- 抽獎動畫 - 播放svga動畫動畫SVG
- CSS動畫篇之404動畫CSS動畫
- 《Flutter 動畫系列》組合動畫Flutter動畫
- Android 動畫之屬性動畫Android動畫
- Java 給PPT新增動畫效果(預設動畫/自定義動畫)Java動畫
- 動畫動畫
- JavaScript時間輪盤:js元素圓形佈局製作時間輪盤動畫JavaScriptJS動畫
- JS動畫效果——多物體動畫JS動畫
- jQuery 動畫效果 與 動畫佇列jQuery動畫佇列
- 表空間利用率及表空間的補充
- CSS3動畫實戰之多關鍵幀實現無限迴圈動效的時間間隔CSSS3動畫
- iOS動畫專題·UIView二維形變動畫與CAAnimation核心動畫(transform動畫,基礎,關鍵幀,組動畫,路徑動畫,貝塞爾曲線)iOS動畫UIViewORM
- Flutter動畫例項——4缸發動機動畫Flutter動畫
- python時間序列缺失值補零Python
- 給 AI 講故事,如何教它腦補畫面?AI
- Flutter動畫 5 - Flutter內建動畫元件Flutter動畫元件
- Flutter動畫之自定義動畫元件-FlutterLayoutFlutter動畫元件
- jQuery: 動畫佇列與停止動畫 stopjQuery動畫佇列
- CSS3動畫之逐幀動畫CSSS3動畫
- 【動畫】看動畫輕鬆理解「Trie樹」動畫