Android動畫合集(幀動畫和補間動畫)

1.1幀動畫概念以及用法

幀動畫非常容易理解,其實就是簡單的由N張靜態圖片收集起來,然后我們通過控制依次顯示 這些圖片,因為人眼"視覺殘留"的原因,會讓我們造成動畫的"錯覺",跟放電影的原理一樣!

從本節開始我們來探究Android中的動畫,畢竟在APP中添加上一些動畫,會讓我們的應用變得 很炫,比如最簡單的關開Activity,當然自定義控件動畫肯定必不可少啦~而Android中的動畫 分為三大類,逐幀動畫(Frame)以及補間動畫(Tween),還有Android 3.0以后引入的屬性動畫 (Property),而本節給大家帶來的是第一種動畫——逐幀動畫的一個基本使用~

1.2使用示例:

示例一:最簡單的例子
運行效果圖

代碼實現:
首先編寫我們的動畫文件,非常簡單,先在res下創建一個anim目錄,接著開始擼我們的 動畫文件:miao_gif.xml: 這里的android:oneshot是設置動畫是否只是播放一次,true只播放一次,false循環播放!

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    <item
        android:drawable="@mipmap/img_miao1"
        android:duration="80" />
    <item
        android:drawable="@mipmap/img_miao2"
        android:duration="80" />
    <item
        android:drawable="@mipmap/img_miao3"
        android:duration="80" />
    <!--限于篇幅,省略其他item,自己補上-->
    ...
</animation-list>

動畫文件有了,接著到我們的布局文件:activity_main.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <Button
        android:id="@+id/btn_start"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="開始" />

    <Button
        android:id="@+id/btn_stop"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="停止" />

    <ImageView
        android:id="@+id/img_show"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:layout_gravity="center"
        android:background="@anim/miao_gif" />
    
</LinearLayout>

最后是我們的MainActivity.java,這里在這里控制動畫的開始以及暫停:

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private Button btn_start;
    private Button btn_stop;
    private ImageView img_show;
    private AnimationDrawable anim;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        bindViews();
        anim = (AnimationDrawable) img_show.getBackground();
    }

    private void bindViews() {
        btn_start = (Button) findViewById(R.id.btn_start);
        btn_stop = (Button) findViewById(R.id.btn_stop);
        img_show = (ImageView) findViewById(R.id.img_show);
        btn_start.setOnClickListener(this);
        btn_stop.setOnClickListener(this);
    }
    
    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.btn_start:
                anim.start();
                break;
            case R.id.btn_stop:
                anim.stop();
                break;
        }
    }
}

2.1補間動畫簡介

本節帶來的是Android三種動畫中的第二種——補間動畫(Tween),和前面學的幀動畫不同,幀動畫 是通過連續播放圖片來模擬動畫效果,而補間動畫開發者只需指定動畫開始,以及動畫結束"關鍵幀", 而動畫變化的"中間幀"則由系統計算并補齊!好了,開始本節學習~

2.2補間動畫的分類和Interpolator

Andoird所支持的補間動畫效果有如下這五種,或者說四種吧,第五種是前面幾種的組合而已~

  • AlphaAnimation:透明度漸變效果,創建時許指定開始以及結束透明度,還有動畫的持續 時間,透明度的變化范圍(0,1),0是完全透明,1是完全不透明;對應<alpha/>標簽!

  • ScaleAnimation:縮放漸變效果,創建時需指定開始以及結束的縮放比,以及縮放參考點, 還有動畫的持續時間;對應<scale/>標簽!

  • TranslateAnimation:位移漸變效果,創建時指定起始以及結束位置,并指定動畫的持續 時間即可;對應<translate/>標簽!

  • RotateAnimation:旋轉漸變效果,創建時指定動畫起始以及結束的旋轉角度,以及動畫 持續時間和旋轉的軸心;對應<rotate/>標簽

  • AnimationSet:組合漸變,就是前面多種漸變的組合,對應<set/>標簽

2.3在開始講解各種動畫的用法之前,我們先要來講解一個東西: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!

2.4各種動畫的詳細講解

1)AlphaAnimation(透明度漸變)

新建一個文件夾anim,創建anim_alpha.xml:文件

<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,完全透明-完全不透明

2)ScaleAnimation(縮放漸變)

anim_scale.xml:

<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%就是以圖像的 中心為中軸點

3)TranslateAnimation(位移漸變)

anim_translate.xml:

<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坐標

4)RotateAnimation(旋轉漸變)

anim_rotate.xml:

<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:repeatMode="reverse"/> 

屬性解釋:

  • fromDegrees/toDegrees:旋轉的起始/結束角度

  • repeatCount:旋轉的次數,默認值為0,代表一次,假如是其他值,比如3,則旋轉4次 另外,值為-1或者infinite時,表示動畫永不停止

  • repeatMode:設置重復模式,默認restart,但只有當repeatCount大于0或者infinite或-1時 才有效。還可以設置成reverse,表示偶數次顯示動畫時會做方向相反的運動!

5)AnimationSet(組合漸變)

非常簡單,就是前面幾個動畫組合到一起而已~
anim_set.xml:

<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>  

好噠,接著到我們的MainActivity.java,同樣非常簡單,只需調用AnimationUtils.loadAnimation() 加載動畫,然后我們的View控件調用startAnimation開啟動畫即可~
這里只貼一下主要實現方法

  public void onClick(View v) {
        switch (v.getId()){
            case R.id.btn_alpha:
                animation = AnimationUtils.loadAnimation(this,
                        R.anim.anim_alpha);
                img_show.startAnimation(animation);
                break;
            case R.id.btn_scale:
                animation = AnimationUtils.loadAnimation(this,
                        R.anim.anim_scale);
                img_show.startAnimation(animation);
                break;
            case R.id.btn_tran:
                animation = AnimationUtils.loadAnimation(this,
                        R.anim.anim_translate);
                img_show.startAnimation(animation);
                break;
            case R.id.btn_rotate:
                animation = AnimationUtils.loadAnimation(this,
                        R.anim.anim_rotate);
                img_show.startAnimation(animation);
                break;
            case R.id.btn_set:
                animation = AnimationUtils.loadAnimation(this,
                        R.anim.anim_set);
                img_show.startAnimation(animation);
                break;
        }

Animation animation= AnimationUtils.loadAnimation(this,實現的xml)
imageview.sstartAnimation(animation)
即可實現

3.動畫狀態的監聽

我們可以對動畫的執行狀態進行監聽,調用動畫對象的:

  • setAnimationListener(new AnimationListener())方法,重寫下面的三個方法:

  • onAnimationStart():動畫開始

  • onAnimtaionRepeat():動畫重復

  • onAnimationEnd():動畫結束

即可完成動畫執行狀態的監聽~

4.為View動態設置動畫效果

先調用AnimationUtils.loadAnimation(動畫xml文件),然后View控件調用**startAnimation(anim) **開始動畫~這是靜態加載的方式,當然你也可以直接創建一個動畫對象,用Java代碼完成設置,再調用 startAnimation開啟動畫~

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

推薦閱讀更多精彩內容