Android開發——動畫使用篇章(幀動畫,補間動畫)(一)
Android 動畫分為 view動畫,幀動畫,屬性動畫,本片文章是參考多篇動畫介紹部落格,總結動畫使用API,使用場景。適合日常開發 搬磚使用。
幀動畫
幀動畫是最容易實現的一種動畫,這種動畫更多的依賴於完善的UI資源,他的原理就是將一張張單獨的圖片連貫的進行播放,從而在視覺上產生一種動畫的效果;有點類似於某些軟體製作gif動畫的方式。
幀動畫的實現方式有兩種:
- XML方式實現:
首先在res/drawable資料夾下建立 xml檔案,然後在drawable中新增你要順序播放的圖片
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="false"
>
<!-- oneshot 設定是否迴圈播放,預設是迴圈播放,false是隻執行一次的意思-->
<item
android:drawable="@drawable/f_static_000"
android:duration="100"/>
<item
android:drawable ="@drawable/f_static_001"
android:duration="100"/>
<item
android:drawable="@drawable/f_static_002"
android:duration="100"/>
</animation-list>
xml方式設定幀動畫,需要在java程式碼執行:
ImageView imageView = (ImageView) findViewById(R.id.iv_image);
imageView.setImageResource (R.drawable.animtor);
// 把寫drawable的xml動畫設定imageview空間的背景。
AnimationDrawable animationDrawable = (AnimationDrawable) imageView.getDrawable();
animationDrawable.start();
// 播放動畫
animationDrawable.stop();
//關閉動畫
- java程式碼實現:
public void setartAnimationDrawable() {
AnimationDrawable anim = new AnimationDrawable();
for (int i = 1; i <= 6; i++) {
int id = getResources().getIdentifier("lottery_" + i, "mipmap", getPackageName());
Drawable drawable = getResources().getDrawable(id);
anim.addFrame(drawable, 200);
}
anim.setOneShot(false);
// 設定播放次數,false迴圈播放true播放一次
mImageView.setImageDrawable(anim);
anim.start();
}
幀動畫API介紹:
void start() - 開始播放動畫
void stop() - 停止播放動畫
addFrame(Drawable frame, int duration) - 新增一幀,並設定該幀顯示的持續時間
void setOneShoe(boolean flag) - false為迴圈播放,true為僅播放一次
boolean isRunning() - 是否正在播放
Tween Animation(補間動畫)
Tween動畫,通過對View的內容進行一系列的圖形變換 (包括平移、縮放、旋轉、改變透明度)來實現動畫效果。
XML實現方式
- alpha漸變透明度動畫效果
<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="500"
android:fillAfter="false"
android:fromAlpha="1.0"
android:toAlpha="0.0"/>
<!--
fromAlpha:開始時透明度
toAlpha: 結束時透明度
duration:動畫持續時間
fillAfter:設定動畫結束後保持當前的位置
-->
XML方式載入方式通過AnimationUtils.loadAnimation(this, R.anim.anim_alpha)獲取Animation
Animation alphaAnimation = AnimationUtils.loadAnimation(this, R.anim.anim_alpha);
imageView.startAnimation(alphaAnimation);
Java程式碼方式:
Animation alphaAnimation = new AlphaAnimation(1.0f, 0.0f);
alphaAnimation.setDuration(500);//設定動畫持續時間為500毫秒
alphaAnimation.setFillAfter(false);//設定動畫結束後保持當前的位置(即不返回到動畫開始前的位置)
imageView.startAnimation(alphaAnimation);
2.scale漸變尺寸縮放動畫效果
<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="500"
android:fromXScale="0.0"
android:fromYScale="0.0"
android:interpolator="@android:anim/decelerate_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="1"
android:repeatMode="reverse"
android:startOffset="0"
android:toXScale="1.5"
android:toYScale="1.5"/>
<!--
duration,一次動畫效果消耗的時間,單位毫秒,值越小動畫速度越快
fromXScale,fromYScale, 動畫開始前X,Y的縮放,0.0為不顯示, 1.0為正常大小
fromXDelta,fromYDelta 起始時X,Y座標,螢幕右下角的座標是X:320,Y:480
toXDelta, toYDelta 動畫結束時X,Y的座標
interpolator 指定動畫插入器
toXScale,toYScale, 動畫最終縮放的倍數, 1.0為正常大小,大於1.0放大
pivotX, pivotY 動畫起始位置,相對於螢幕的百分比,兩個都為50%表示動畫從自身中間開始
startOffset, 動畫多次執行的間隔時間,如果只執行一次,執行前會暫停這段時間,單位毫秒
repeatCount,動畫重複的計數,動畫將會執行該值+1次
repeatMode,動畫重複的模式,reverse為反向,當第偶次執行時,動畫
Java方式:
Animation scaleAnimation = new ScaleAnimation(0.0f, 1.5f, 0.0f, 1.5f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
scaleAnimation.setDuration(500);//設定動畫持續時間為500毫秒
scaleAnimation.setFillAfter(true);//如果fillAfter的值為true,則動畫執行後,控制元件將停留在執行結束的狀態
scaleAnimation.setFillBefore(false);//如果fillBefore的值為true,則動畫執行後,控制元件將回到動畫執行之前的狀態
scaleAnimation.setRepeatCount(3);//設定動畫迴圈次數
scaleAnimation.setRepeatMode(Animation.REVERSE);
scaleAnimation.setStartOffset(0);
scaleAnimation.setInterpolator(this, android.R.anim.decelerate_interpolator);//設定動畫插入器
imageView.startAnimation(scaleAnimation);
3.rotate畫面旋轉動畫效果
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="500"
android:fromDegrees="0"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="-360"/>
<!--
fromDegrees 動畫開始時的角度
toDegrees 動畫結束時物件的旋轉角度,正代表順時針
pivotX 屬性為動畫相對於物件的X座標的開始位置
pivotY 屬性為動畫相對於物件的Y座標的開始位置-->
Java方式:
Animation rotateAnimation = new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
rotateAnimation.setDuration(500);
rotateAnimation.setFillAfter(true);
rotateAnimation.setInterpolator(this, android.R.anim.accelerate_decelerate_interpolator);//設定動畫插入器,後面會講解插入器
imageView.startAnimation(rotateAnimation);
4.translate畫面位置移動動畫效果
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="500"
android:fromXDelta="100"
android:fromYDelta="0"
android:interpolator="@android:anim/cycle_interpolator"
android:toXDelta="0"
android:toYDelta="0"/>
<!--
fromXDelta,fromYDelta 起始時X,Y座標,螢幕右下角的座標是X:320,Y:480
toXDelta, toYDelta 動畫結束時X,Y的座標-->
java程式碼實現:
Animation translateAnimation = new TranslateAnimation(0, 100, 0, 0);
translateAnimation.setDuration(500);
translateAnimation.setInterpolator(this, android.R.anim.cycle_interpolator);//設定動畫插入器
translateAnimation.setFillAfter(true);//設定動畫結束後保持當前的位置(即不返回到動畫開始前的位置)
imageView.startAnimation(translateAnimation);
5.set組合動畫效果
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha
android:duration="500"
android:fromAlpha="1.0"
android:toAlpha="0.0" />
<scale
android:duration="500"
android:fromXScale="0.0"
android:fromYScale="0.0"
android:interpolator="@android:anim/decelerate_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="1"
android:repeatMode="reverse"
android:startOffset="0"
android:toXScale="1.5"
android:toYScale="1.5" />
</set>
如何使用
AnimationSet animationSet = (AnimationSet) AnimationUtils.loadAnimation(this, R.anim.anim_set);
imageView.startAnimation(animationSet);
Java方式
AnimationSet animationSet = new AnimationSet(true);
Animation alphaAnimation = new AlphaAnimation(1.0f, 0.1f);
alphaAnimation.setDuration(500);//設定動畫持續時間為500毫秒
Animation scaleAnimation = new ScaleAnimation(0.0f, 1.5f, 0.0f, 1.5f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
scaleAnimation.setDuration(500);//設定動畫持續時間為500毫秒
scaleAnimation.setRepeatMode(Animation.REVERSE);
scaleAnimation.setStartOffset(0);
scaleAnimation.setInterpolator(this, android.R.anim.decelerate_interpolator);//設定動畫插入器
animationSet.addAnimation(alphaAnimation);
animationSet.addAnimation(scaleAnimation);
imageView.startAnimation(animationSet);
動畫監聽器Animation.AnimationListener:有時可能我們要在動畫的每個週期裡面做不同的操作,這時候就要藉助動畫監聽器了
“`
alphaAnimation.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
//動畫開始時呼叫
}
@Override
public void onAnimationEnd(Animation animation) {
//動畫結束時呼叫
}
@Override
public void onAnimationRepeat(Animation animation) {
//動畫重複時呼叫
}
});
`
幾種自帶的動畫插入器
AccelerateInterpolator 加速,開始時慢中間加速
DecelerateInterpolator 減速,開始時快然後減速
AccelerateDecelerateInterolator 先加速後減速,開始結束時慢,中間加速
AnticipateInterpolator 反向,先向相反方向改變一段再加速播放
AnticipateOvershootInterpolator 反向加超越,先向相反方向改變,再加速播放,會超出目的值然後緩慢移動至目的值
BounceInterpolator 跳躍,快到目的值時值會跳躍,如目的值100,後面的值可能依次為85,77,70,80,90,100
CycleIinterpolator 迴圈,動畫迴圈一定次數,值的改變為一正弦函式:Math.sin(2* mCycles* Math.PI* input)
LinearInterpolator 線性,線性均勻改變
OvershootInterpolator超越,最後超出目的值然後緩慢改變到目的值
站在巨人的肩膀上看世界——
Android動畫總結(屬性動畫,補間動畫,幀動畫)