Android動(dòng)畫實(shí)現(xiàn)原理和代碼
我們都知道，漂亮的用戶界面是衡量一款應(yīng)用”好壞”很重要的依據(jù)，因?yàn)槿硕际且曈X動(dòng)物，就好比說花容月貌總有男人為之傾倒，英俊瀟灑總能博得芳心。這是一個(gè)不容置疑的事實(shí)，那么我們的應(yīng)用也是如此，一個(gè)漂亮的用戶交互界面能提升用戶對應(yīng)用的好感，提升用戶體驗(yàn)。而動(dòng)畫是提升用戶體驗(yàn)的一個(gè)重要因素，好的動(dòng)畫交互讓人用著更舒心，那么今天的這篇文章就是介紹Android中動(dòng)畫實(shí)現(xiàn)，讓我們的應(yīng)用動(dòng)起來。
Android動(dòng)畫分類
在Android中我們一般將動(dòng)畫分為兩類，一類是View Animation(視圖動(dòng)畫)，一類是Property Animation,當(dāng)然也有說分為三種，F(xiàn)rame Animation，Tween Animation，和Property Animation,由于前兩種一般都是作用于整個(gè)View的，所以就統(tǒng)稱為View Animation。在谷歌官方文檔中也是按兩種分類來講解的。
在Android 5.0開始增加了Material Design ，Material Design 中實(shí)現(xiàn)了一些動(dòng)畫為用戶提供操作反饋并在用戶與您的應(yīng)用進(jìn)行互動(dòng)時(shí)提供視覺連續(xù)性。 它將為按鈕與操作行為轉(zhuǎn)換提供一些默認(rèn)動(dòng)畫，我們可以定制觸摸反饋，使用揭露效果，定制操作行為轉(zhuǎn)換，指定定制轉(zhuǎn)換，使用轉(zhuǎn)換啟動(dòng)一個(gè)操作行為，以共享元素啟動(dòng)一個(gè)操作行為等等。
Frame Animation
由于Frame Animation，Tween Animation的實(shí)現(xiàn)還是有區(qū)別的，暫且就將這兩種方式實(shí)現(xiàn)分開介紹，F(xiàn)rame Animation其實(shí)就是將一系列的圖片一張一張的展示出來，這個(gè)和我們看電影是類似的，由于人眼有一個(gè)可接收的暫留時(shí)間，這也就是為什么人在線看視頻會(huì)感覺卡頓。當(dāng)然我們實(shí)現(xiàn)Frame Animation就是這個(gè)依據(jù)，當(dāng)播放相同的圖片張數(shù)用時(shí)越短也就越流暢，自然人就會(huì)感覺是一個(gè)動(dòng)畫。我們常見的Gif其實(shí)也是幀動(dòng)畫，如果你用PhotoShop打開Gif動(dòng)畫，會(huì)發(fā)現(xiàn)里面是有很多圖層的也就是很多幀。
對于Frame動(dòng)畫有兩種實(shí)現(xiàn)方式，第一種方式就是在drawable文件夾下創(chuàng)建一個(gè)xml文件。它的語法很簡單，如下
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot=["true" | "false"] >
<item
android:drawable="@[package:]drawable/drawable_resource_name"
android:duration="integer" />
</animation-list>
看了上面你會(huì)發(fā)現(xiàn)實(shí)現(xiàn)Frame動(dòng)畫很簡單，屬性很少，animation-list 是動(dòng)畫的根元素，在根元素中的oneshot屬性表示動(dòng)畫執(zhí)行次數(shù)，如果設(shè)置為true表示只播放一次，如果false則表示會(huì)一直循環(huán)執(zhí)行。在根元素下有item元素，該元素就是我們要添加的圖片，每一個(gè)item表示一幀，item下的drawable就是我們的圖片資源，duration就是該幀動(dòng)畫執(zhí)行的時(shí)間。例如
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="@mipmap/run1"
android:duration="200" />
<item
android:drawable="@mipmap/run2"
android:duration="200" />
<item
android:drawable="@mipmap/run3"
android:duration="200" />
<item
android:drawable="@mipmap/run4"
android:duration="200" />
<item
android:drawable="@mipmap/run5"
android:duration="200" />
<item
android:drawable="@mipmap/run6"
android:duration="200" />
<item
android:drawable="@mipmap/run7"
android:duration="200" />
<item
android:drawable="@mipmap/run8"
android:duration="200" />
</animation-list>
使用方法如下
//可以在xml中設(shè)置background imageView.setBackgroundResource(R.drawable.frame_run_animation); AnimationDrawable animationDrawable = (AnimationDrawable) imageView.getBackground(); animationDrawable.start();
運(yùn)行效果圖如上，在上面我們沒有添加oneshot屬性，則該屬性默認(rèn)false,也就是說該動(dòng)畫會(huì)一直循環(huán)執(zhí)行，當(dāng)我們設(shè)置true后則播放到最后一幀時(shí)動(dòng)畫停止，當(dāng)我們想停止時(shí)可以使用AnimationDrawable 的stop方法，它還提供了isRunning()方法判斷是否已經(jīng)在執(zhí)行動(dòng)畫。另外我們還需要注意的是小心OOM。
當(dāng)然用代碼實(shí)現(xiàn)也很簡單，如下
private void addFrame() {
AnimationDrawable animationDrawable = new AnimationDrawable();
int[] mipmaps = new int[]{R.mipmap.run1, R.mipmap.run2, R.mipmap.run3,
R.mipmap.run4, R.mipmap.run5, R.mipmap.run6, R.mipmap.run7, R.mipmap.run8,};
for (int i = 1; i <= 8; i++) {
int id=mipmaps[i-1];
//或者使用下面方式,注意如果圖片資源放在drawable下時(shí)將mipmap修改下
//int id = getResources().getIdentifier("run" + i, "mipmap", getPackageName());
Drawable drawable = getResources().getDrawable(id);
animationDrawable.addFrame(drawable, 200);
}
animationDrawable.setOneShot(false);
imageView.setBackgroundDrawable(animationDrawable);
animationDrawable.start();
}
Tween Animation
Tween Animation即補(bǔ)間動(dòng)畫，主要分為四種，分別是平移、縮放、旋轉(zhuǎn)、透明度，直接上語法
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
//插值器
android:interpolator="@[package:]anim/interpolator_resource"
//動(dòng)畫結(jié)束后View是否停留在結(jié)束的位置
android:fillAfter=["true" | "false"]
//重復(fù)的模式,默認(rèn)為restart,即重頭開始重新運(yùn)行,reverse即從結(jié)束開始向前重新運(yùn)行
android:repeatMode="restart/reverse"
//子元素是否共用此插值器
android:shareInterpolator=["true" | "false"] >
<alpha
//開始透明度0.0（全透明）到1.0（完全不透明）
android:fromAlpha="float"
android:toAlpha="float"
//動(dòng)畫執(zhí)行時(shí)間
android:duration="integer" />
<scale
//其實(shí)X縮放大于0,1的時(shí)候表示不縮放，小于1縮小，大于1放大
android:fromXScale="float"
android:toXScale="float"
android:fromYScale="float"
android:toYScale="float"
//縮放中心，也可以穿fraction值
android:pivotX="float"
android:pivotY="float"
android:duration="integer" />
<translate
//表示 x 的起始值
android:fromXDelta="float/fraction"
android:toXDelta="float"
android:fromYDelta="float"
android:toYDelta="float"
android:duration="integer" />
<rotate
//起始的旋轉(zhuǎn)角度
android:fromDegrees="float"
android:toDegrees="float"
android:pivotX="float"
android:pivotY="float"
android:duration="integer" />
<set>
...
</set>
</set>
這是官方給的語法，set 是一個(gè)動(dòng)畫集合，內(nèi)部可以是多個(gè)動(dòng)畫的組合，也可以嵌套set，這里包含了動(dòng)畫實(shí)現(xiàn)的所有屬性。在上面的語法中我們需要注意的是平移的時(shí)候其實(shí)位置接受百分比數(shù)值:從-100到100的值，以“%”結(jié)尾，表示百分比相對于自身;從-100到100的值，以“%p”結(jié)尾，表示百分比相對于父容器。例如平移開始位置在自身中間則是50%,如平時(shí)開始位置在父容器的則是50%p.
例如有些人給我們的Activity會(huì)加一些從左邊進(jìn)右邊出的動(dòng)畫，那么當(dāng)我們打開Activity時(shí)將Activity布局的fromXDelta值-100%p并將toXDelta為0%p,那么我們看到的效果就是從左邊進(jìn)入了。
插值器
在動(dòng)畫插值器起的作用主要是改變動(dòng)畫的執(zhí)行速率，一般情況我們不需要自己實(shí)現(xiàn)插值器，因?yàn)樵贏ndroid中已經(jīng)給我們提供了9種插值器，應(yīng)該夠我們使用了，我們使用插值器后會(huì)讓動(dòng)畫執(zhí)行的效果更酷炫，當(dāng)然想自定義插值器也不難，可以查看已經(jīng)實(shí)現(xiàn)插值器源碼做參考。
accelerate_decelerate_interpolator：先加速后減速accelerate_interpolator：一直加速anticipate_interpolator： 開始的時(shí)候先向后甩一點(diǎn)然后向前，就好比人扔?xùn)|西會(huì)先向后甩一下，這樣才能拋的遠(yuǎn)anticipate_overshoot_interpolator：和上一種插值器相似，先向后拋然后向前，到達(dá)終點(diǎn)后會(huì)有回彈一下效果，好比我們將球拋到墻上，然后反彈回來bounce_interpolator：動(dòng)畫結(jié)束的時(shí)候彈起，類似皮球落地，會(huì)彈幾下才停止cycle_interpolator：動(dòng)畫循環(huán)播放特定的次數(shù)回到原點(diǎn)，速率改變沿著正弦曲線decelerate_interpolator：減速的插值器，剛開始速度快，然后越來越慢直到停止linear_interpolator：線性的插值器。從開始到結(jié)束勻速運(yùn)動(dòng)overshoot_interpolator：向前超過設(shè)定值一點(diǎn)然后返回
下面簡單實(shí)現(xiàn)一個(gè)動(dòng)畫，動(dòng)畫效果如下面截圖，是一個(gè)透明度，平移，縮放的動(dòng)畫同時(shí)執(zhí)行的動(dòng)畫。
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/bounce_interpolator"
android:shareInterpolator="true">
<translate
android:duration="400"
android:fromXDelta="50%p"
android:fromYDelta="-50%p"
android:toXDelta="0%"
android:toYDelta="0%" />
<scale
android:duration="400"
android:fromXScale="0.0"
android:fromYScale="0.0"
android:toXScale="1.0"
android:toYScale="1.0" />
<alpha
android:duration="400"
android:fromAlpha="0.0"
android:toAlpha="1.0" />
</set>
然后使用下面代碼給ImageView加入動(dòng)畫。
Animation animation= AnimationUtils.loadAnimation(this,R.anim.anim_in_left_top); imageView.startAnimation(animation);
當(dāng)然我們也可給動(dòng)畫加上監(jiān)聽。如
animation.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
}
@Override
public void onAnimationEnd(Animation animation) {
}
@Override
public void onAnimationRepeat(Animation animation) {
}
});
上面的監(jiān)聽分別是動(dòng)畫開始結(jié)束和更新時(shí)候的回調(diào)。我們在回調(diào)中做一些額外的操作。在代碼中實(shí)現(xiàn)動(dòng)畫就不在細(xì)說，主要對應(yīng)AnimationSet， TranslateAnimation，ScaleAnimation，AlphaAnimation，RotateAnimation。
Propterty Animation
屬性動(dòng)畫是3.0之后引入的，在View動(dòng)畫中雖然我們看到了我們的控件位置發(fā)生發(fā)生變化，比如Button雖然位置變化了，但是點(diǎn)擊響應(yīng)區(qū)域還在原來的位置。而屬性動(dòng)畫就可以解決這種問題。它可以作用于View的屬性。
語法
<set
//執(zhí)行的順序together同時(shí)執(zhí)行，sequentially連續(xù)執(zhí)行
android:ordering=["together" | "sequentially"]>
<objectAnimator
//屬性動(dòng)畫名字，例如alpha" 或者"backgroundColor"等
android:propertyName="string"
android:duration="int"
//屬性的開始值
android:valueFrom="float | int | color"
android:valueTo="float | int | color"
//該動(dòng)畫開始的延遲時(shí)間
android:startOffset="int"
//動(dòng)畫重復(fù)次數(shù)，-1表示一直循環(huán)，1表示循環(huán)一次也就是播放兩次，默認(rèn)0，播放一次
android:repeatCount="int"
//repeatCount設(shè)置-1時(shí)才會(huì)有效果
android:repeatMode=["repeat" | "reverse"]
//如果值是顏色，則不用使用此屬性
android:valueType=["intType" | "floatType"]/>
<animator
android:duration="int"
android:valueFrom="float | int | color"
android:valueTo="float | int | color"
android:startOffset="int"
android:repeatCount="int"
android:repeatMode=["repeat" | "reverse"]
android:valueType=["intType" | "floatType"]/>
<set>
...
</set>
</set>
下面列出了常見的屬性名字，另外需要注意的是，使用屬性動(dòng)畫時(shí)，必須有相應(yīng)屬性的set/get方法，否則屬性動(dòng)畫沒有效果的。
translationX 和 translationY : 控制View距離左邊和頂部的距離的增加值。是一個(gè)相對值。相對于自身位置的具體。
rotation 、 rotationX 和 rotationY : rotation 是控制View圍繞其支點(diǎn)進(jìn)行旋轉(zhuǎn)。 rotationX 和 rotationY 分別是圍繞X軸和Y軸旋轉(zhuǎn)。
scaleX 和 scaleY : 控制View的縮放。
pivotX 和 pivotY : 控制View的支點(diǎn)位置，進(jìn)行旋轉(zhuǎn)和縮放，默認(rèn)是View的中點(diǎn)。它們都是 float 值， 0 表示View的最左邊和最頂端， 1 表示最右端和最下端。
alpha : 控制View的透明度。
x 和 y : 控制View在布局容器中距離左邊和頂部的距離。是一個(gè)絕對值。
例如我們實(shí)現(xiàn)一個(gè)旋轉(zhuǎn)加透明度變化的動(dòng)畫,效果圖如下
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:ordering="sequentially">
<objectAnimator
android:duration="500"
android:propertyName="rotation"
android:valueFrom="0"
android:valueTo="180" />
<objectAnimator
android:duration="500"
android:propertyName="alpha"
android:valueFrom="1.0f"
android:valueTo="0.5f" />
</set>
然后
AnimatorSet set = (AnimatorSet) AnimatorInflater.loadAnimator(this,
R.animator.property_animator);
set.setTarget(imageView);
set.start();
當(dāng)然不用xml書寫也是很簡單的，如下代碼
ObjectAnimator.ofFloat(imageView,"rotation",0,180,90,180) .setDuration(2000).start();
代碼實(shí)現(xiàn)的效果就是在2秒內(nèi)先旋轉(zhuǎn)到180度，在回到90度在轉(zhuǎn)回180度
效果圖如
在上面代碼實(shí)現(xiàn)了一直屬性動(dòng)畫，那么如果我們想同時(shí)作用幾個(gè)屬性那該如何操作呢。此時(shí)我們有兩種實(shí)現(xiàn)方式分別是類PropertyValuesHolder和AnimatorSet，話不多說，先上圖再直接上代碼。
private void startPropertyAnimation3(){
PropertyValuesHolder translationX = PropertyValuesHolder.ofFloat("translationX", -200，-100,100, 200,300);
PropertyValuesHolder scaleX = PropertyValuesHolder.ofFloat("scaleX", 1.0f, 2.0f);
PropertyValuesHolder rotate = PropertyValuesHolder.ofFloat("rotation", 0f, 360f);
PropertyValuesHolder rotationY = PropertyValuesHolder.ofFloat("rotationX", 0f, 180f);
ObjectAnimator together = ObjectAnimator.ofPropertyValuesHolder(imageView, translationX,rotate, scaleX, rotationY);
together.setDuration(3000);
together.start();
}
//或者使用AnimatorSet,此方法使用的是按順序播放。
private void startPropertyAnimation4(){
ObjectAnimator translationX = ObjectAnimator.ofFloat(imageView, "translationX", -200,-100,100, 200,300);
ObjectAnimator scaleX = ObjectAnimator.ofFloat(imageView, "scaleX", 1.0f, 2.0f).setDuration(1000);
ObjectAnimator rotation = ObjectAnimator.ofFloat(imageView, "rotation", 0f, 360f).setDuration(1000);
ObjectAnimator rotationX=ObjectAnimator.ofFloat(imageView,"rotationX", 0f, 180f).setDuration(1000);
AnimatorSet set = new AnimatorSet();
set.playSequentially(translationX, scaleX, rotation,rotationX);
set.setDuration(4000);
set.start();
}
Fragment/Activity動(dòng)畫
其實(shí)實(shí)現(xiàn)Activity及Fragment切換動(dòng)畫也是很簡單的，具體的動(dòng)畫效果制作可以使用即使上面介紹的補(bǔ)間動(dòng)畫。例如我們Fragment動(dòng)畫。
FragmentTransaction transaction = fragmentManager.beginTransaction(); transaction.setCustomAnimations(R.anim.slide_in_left, R.anim.slide_out_right); transaction.replace(R.id.fragment_container, fragment, fragmentTag); transaction.commit();
Activity實(shí)現(xiàn)動(dòng)畫也很簡單，在Activity中提供了overridePendingTransition(int enterAnim, int exitAnim) 方法，該方法接收兩個(gè)參數(shù)，第一個(gè)參數(shù)是Activity進(jìn)入時(shí)的動(dòng)畫，第二個(gè)參數(shù)是Activity退出時(shí)的動(dòng)畫。該方法一般寫在startActivity()后和finish（）后，如果我們想打開或者退出不顯示動(dòng)畫，可將參數(shù)設(shè)置為0。
在上面的我們介紹了Activity/Fragment在代碼中實(shí)現(xiàn)動(dòng)畫的方法，當(dāng)然還有一種簡單的實(shí)現(xiàn)方式，那就是在主題中設(shè)置動(dòng)畫。
對于Activity
<style name="CustomeActivityStyle" parent="AppTheme">
<item name="android:windowAnimationStyle">@style/AnimationStyle</item>
</style>
<style name="AnimationStyle">
<item name="android:activityCloseEnterAnimation">@anim/slide_in_left</item>
<item name="android:activityCloseExitAnimation">@anim/slide_out_right</item>
<item name="android:activityOpenEnterAnimation">@anim/slide_in_left</item>
<item name="android:activityOpenExitAnimation">@anim/slide_out_right</item>
</style>
可能你不太理解為什么是設(shè)置了四種，假如有Activity1和Activity2。當(dāng)我們在Activity1中跳轉(zhuǎn)到Activity2時(shí)，Activity1在頁面上消失是執(zhí)行的:activityOpenExitAnimation動(dòng)畫，Activity2出現(xiàn)在屏幕上執(zhí)行的動(dòng)畫是activityOpenEnterAnimation。當(dāng)Activity2 finish返回Activity1時(shí)，Activity2執(zhí)行的動(dòng)畫是activityCloseExitAnimation，Activity1顯示在屏幕執(zhí)行的是activityCloseEnterAnimation。創(chuàng)建上面主題后我們需要將該主題應(yīng)用到我們的Activty中就可以了。
同理Fragment也可相應(yīng)設(shè)置，如activityCloseEnterAnimation改為fragmentCloseEnterAnimation即可。
除此之外我們也可以使用windowAnimation，它包括 windowEnterAnimation 和 windowExitAnimation。注意的一點(diǎn)就是WindowAnimation的控制權(quán)大于Activity/Fragment Animation的控制權(quán)。
除了上面介紹的動(dòng)畫實(shí)現(xiàn)，還有一些動(dòng)畫是從Android5.0增加的，你可以參考文末給出的鏈接文章，酷炫的Activity切換動(dòng)畫，打造更好的用戶體驗(yàn)。個(gè)人感覺這篇文章介紹的挺詳細(xì)。對本文缺少的內(nèi)容也做了一個(gè)補(bǔ)充。到這里該篇文章就暫時(shí)告一段落，有問題歡迎指出，Have a wonderful day.
定義定制動(dòng)畫
酷炫的Activity切換動(dòng)畫，打造更好的用戶體驗(yàn)
- 通過FancyView提供 Android 酷炫的開屏動(dòng)畫實(shí)例代碼
- Android自定義帶加載動(dòng)畫效果的環(huán)狀進(jìn)度條
- Android自定義viewGroup實(shí)現(xiàn)點(diǎn)擊動(dòng)畫效果
- Android仿打開微信紅包動(dòng)畫效果實(shí)現(xiàn)代碼
- Android仿硬幣轉(zhuǎn)動(dòng)微信紅包動(dòng)畫效果
- Android動(dòng)畫入門教程之kotlin
- Android實(shí)現(xiàn)過渡動(dòng)畫、引導(dǎo)頁 Android判斷是否第一次啟動(dòng)App
- Android 仿余額寶數(shù)字跳動(dòng)動(dòng)畫效果完整代碼
- Android開發(fā)簡單實(shí)現(xiàn)搖動(dòng)動(dòng)畫的方法
- Android開發(fā)之背景動(dòng)畫簡單實(shí)現(xiàn)方法
相關(guān)文章
android studio 使用adb 命令傳遞文件到android 設(shè)備的方法
這篇文章主要介紹了android studio 使用adb 命令傳遞文件到android 設(shè)備的相關(guān)資料，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2017-11-11
Android讀取手機(jī)通訊錄聯(lián)系人到自己項(xiàng)目
這篇文章主要為大家詳細(xì)介紹了Android讀取手機(jī)通訊錄聯(lián)系人到自己項(xiàng)目，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-07-07
ViewDragHelper實(shí)現(xiàn)QQ側(cè)滑效果
這篇文章主要為大家詳細(xì)介紹了ViewDragHelper實(shí)現(xiàn)QQ側(cè)滑效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
Intent的中文意思是“意圖，意向”， Intent對Android的核心和靈魂，是各組件之間的橋梁。四大組件分別為Activity 、Service、BroadcastReceiver、ContentProvider。而這四種組件是獨(dú)立的，它們之間可以互相調(diào)用，協(xié)調(diào)工作，最終組成一個(gè)真正的Android應(yīng)用2022-09-09
支付寶上有一個(gè)咻一咻的功能,就是點(diǎn)擊圖片后四周有水波紋的這種效果,今天就通過本文給大家分享實(shí)現(xiàn)此功能的思路及實(shí)例代碼，一起看看吧2016-12-12
這篇文章主要為大家詳細(xì)介紹了Android從圖片獲取二維碼的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
android開發(fā)之方形圓角listview代碼分享
我寫這篇文章受到了kiritor的專欄發(fā)表的博文Android UI控件之ListView實(shí)現(xiàn)圓角效果的啟發(fā)。2013-06-06
這篇文章主要介紹了Android Service類與生命周期詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下2017-03-03
這篇文章主要為大家詳細(xì)介紹了最簡單的SD卡文件遍歷Android程序，感興趣的小伙伴們可以參考一下2016-07-07
Android音頻開發(fā)之錄制音頻(WAV及MP3格式)
這篇文章主要為大家介紹了Android如何實(shí)現(xiàn)音頻文件的錄制（WAV及MP3格式）,文中代碼具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-12-12