1. 程式人生 > >Android三種動畫實現原理及使用

Android三種動畫實現原理及使用

  • Android動畫目前分為三種:
    1. Frame Animation 幀動畫,通過順序播放一系列影象從而產生動畫效果,。圖片過多時容易造成OOM(Out Of Memory記憶體用完)異常。
    2. Tween Animation 補間動畫(又叫view動畫),是通過對場景裡的物件不斷做影象變換(透明度、縮放、平移、旋轉)從而產生動畫效果,是一種漸進式動畫,並且View動畫支援自定義。
    3. Accribute Animation 屬性動畫,這也是在android3.0之後引進的動畫,在手機的版本上是android4.0就可以使用這個動 畫,通過動態的改變物件的屬性從而達到動畫效果。
  • 補間動畫和屬性動畫的區別

補間動畫只是改變了View的顯示效果而已,並不會真正的改變View的屬性。而屬性動畫可以改變View的顯示效果和屬性。舉個例子:例如螢幕左上角有一個Button按鈕,使用補間動畫將其移動到右下角,此刻你去點選右下角的Button,它是絕對不會響應點選事件的,因此其作用區域依然還在左上角。只不過是補間動畫將其繪製在右下角而已,而屬性動畫則不會。

  • 接下來就來詳細瞭解一下這三種動畫效果的用法:

FrameAnimation

幀動畫是順序播放一組預先定義好的圖片,類似於電影播放,系統提供了一個類AnimationDrawable來使用幀動畫,首先看一下效果演示:

1、首先在drawable裡建立一個animation-list型別的xml檔案,命名為frame_animation:其中oneshot是設定動畫是否重複播放,設定false為確定重複播放。drawable設定不同的圖片,duration設定圖片的顯示時間(即按每幀多少毫秒播放)。

<?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/img0"
        android:duration="50"/>
    <item
        android:drawable="@mipmap/img1"
        android:duration="50"/>
    <item
        android:drawable="@mipmap/img2"
        android:duration="50"/>
    <item
        android:drawable="@mipmap/img3"
        android:duration="50"/>
    <item
        android:drawable="@mipmap/img4"
        android:duration="50"/>
    <item
        android:drawable="@mipmap/img5"
        android:duration="50"/>
    <item
        android:drawable="@mipmap/img6"
        android:duration="50"/>
</animation-list>

2、設定佈局檔案activity_frame:定義開始播放和停止按鈕和顯示動畫的佈局。

<?xml version="1.0" encoding="utf-8"?>
<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/start"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="開始" />

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

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/view"/>
</LinearLayout>

3、在FrameActivity中實現以下程式碼:

/**
 * 幀動畫
 */
public class FrameActivity extends AppCompatActivity implements View.OnClickListener {
    private Button start;
    private Button stop;
    private ImageView view;
    private AnimationDrawable animationDrawable;//宣告AnimationDrawable類

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_frame);
        initView();
    }

    private void initView() {
        start = findViewById(R.id.start);
        stop = findViewById(R.id.stop);
        view = findViewById(R.id.view);

        start.setOnClickListener(this);
        stop.setOnClickListener(this);

        // 通過逐幀動畫的資原始檔獲得AnimationDrawable示例
        animationDrawable=(AnimationDrawable) getResources().getDrawable(R.drawable.frame_animation);
        // 把AnimationDrawable設定為ImageView的背景
        view.setBackgroundDrawable(animationDrawable);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.start:
                start();
                break;
            case R.id.stop:
                stop();
                break;
        }
    }

    protected void start() {
        if (animationDrawable != null && !animationDrawable.isRunning()) {//判斷
            animationDrawable.start();
        }
    }

    protected void stop() {
        if (animationDrawable != null && animationDrawable.isRunning()) {
            animationDrawable.stop();
        }
    }
}

4、這樣便可實現幀動畫了,但幀動畫比較容易引起OOM,所以在使用幀動畫時,應儘量避免使用尺寸較大的圖片。

Tween Animation

補間動畫的四種變換效果對應Animation的四個子類:TranslateAnimation、ScaleAnimation、RotateAnimation、AlphaAnimation,這些動畫可以通過XML來定義,也可以通過程式碼動態定義,以下示例通過XML定義的。


1、在res下建立一個anim資料夾,建立alpha型別xml檔案用來實現動畫透明度:

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:fromAlpha="1"//動畫起始透明度
    android:toAlpha="0"//結束透明度
    android:duration="4000" />

2、建立scal型別xml檔案用來實現縮放動畫:

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:duration="4000"
    android:fromXScale="0"//動畫開始時的x座標的伸縮尺寸
    android:fromYScale="0"
    android:toXScale="1.5"//動畫結束時x座標上的伸縮尺寸
    android:toYScale="1.5"
    android:pivotX="50%"//表示縮放起點x座標,可以是整數值,百分數或者小數三種樣式
    android:pivotY="0%"
    >
</scale>
3、建立scal型別xml檔案用來實現位移動畫:
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:duration="4000"
    android:fromXDelta="0%"//動畫起始時 X座標上的位置 
    android:fromYDelta="100%"
    android:toXDelta="0%"//動畫結束時 X座標上的位置
    android:toYDelta="0%"
    >
</translate>

4、建立rotate型別xml檔案用來實現旋轉動畫:    

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:duration="4000"
    android:fromDegrees="0"//動畫起始時物件的角度
    android:toDegrees="90"//動畫結束時物件旋轉的角度 可以大於360度
    android:pivotX="50%"//動畫相對於物件的X座標的開始位置
    android:pivotY="50%"
    >
</rotate>

5、建立set型別xml檔案用來實現組合動畫:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/decelerate_interpolator"
    android:shareInterpolator="true" >
    <scale
        android:duration="4000"
        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="4000"
        android:fromDegrees="0"
        android:pivotY="50%"
        android:pivotX="50%"
        android:toDegrees="360" />
    <translate
        android:duration="4000"
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="320"
        android:toYDelta="0" />
    <alpha
        android:duration="4000"
        android:fromAlpha="1.0"
        android:toAlpha="0.1" />
</set>

6、建立佈局檔案

<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="OnAlpha"
        android:text="透明度漸變AlphaAnimation" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:onClick="OnScale"
        android:text="縮放動畫ScaleAnimation" />
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:onClick="OnTranslate"
        android:text="位移動畫TranslateAnimation" />
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:onClick="OnRotate"
        android:text="旋轉動畫RotateAnimation" />
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:onClick="OnSet"
        android:text="組合動畫SetAnimation" />

    <ImageView
        android:id="@+id/tween_img"
        android:layout_gravity="center"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@mipmap/img"/>
</LinearLayout>

7、實現TweenActivityde中的程式碼

/**
 * Created by CXB on 2018/6/6.
 */

public class TweenActivity extends AppCompatActivity {
    private ImageView img;
    private Animation animation;//宣告Animation類

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tween);
        img = findViewById(R.id.tween_img);
    }

    /**
     * 透明度漸變
     *
     * @param view
     */
    public void OnAlpha(View view) {
        animation = AnimationUtils.loadAnimation(TweenActivity.this, R.anim.tween_alpha);
        img.startAnimation(animation);
    }

    /**
     * 縮放漸變
     *
     * @param view
     */
    public void OnScale(View view) {
        animation = AnimationUtils.loadAnimation(TweenActivity.this, R.anim.tween_scale);
        img.startAnimation(animation);
    }

    /**
     * 位移動畫
     *
     * @param view
     */
    public void OnTranslate(View view) {
        animation = AnimationUtils.loadAnimation(TweenActivity.this, R.anim.tween_translate);
        img.startAnimation(animation);
    }

    /**
     * 旋轉動畫
     *
     * @param view
     */
    public void OnRotate(View view) {
        animation = AnimationUtils.loadAnimation(TweenActivity.this, R.anim.tween_rotate);
        img.startAnimation(animation);
    }

    /**
     * 組合動畫
     *
     * @param view
     */
    public void OnSet(View view) {
        animation = AnimationUtils.loadAnimation(TweenActivity.this, R.anim.tween_set);
        img.startAnimation(animation);
    }
}

Attribute Animation

屬性動畫和View動畫不同,它對作用物件進行了擴充套件,屬性動畫可以對任何物件做動畫,動畫的效果也也得到了加強,可以實現更加絢麗的動畫效果。


1、設定佈局檔案

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/attri_root"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="OnAlpha"
        android:text="透明度漸變" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="OnScale"
        android:text="縮放" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="OnTranslate"
        android:text="位移" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="OnRotate"
        android:text="旋轉" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="OnSet"
        android:text="組合動畫" />

    <Button
        android:id="@+id/attri_show"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="屬性動畫的效果顯示" />
</LinearLayout>

2、實現AttributeActivity中的程式碼:

/**
 * Created by CXB on 2018/6/7.
 */

public class AttributeActivity extends AppCompatActivity {
    private Button btn_show;
    private ObjectAnimator objectAnimator;//宣告ObjectAimator類
    private LinearLayout ll_root;
    private float rotateDu = 0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_attribute);
        btn_show = findViewById(R.id.attri_show);
        ll_root = findViewById(R.id.attri_root);

    }

    /**
     * 透明度漸變
     *
     * @param view
     */
    public void OnAlpha(View view) {
        objectAnimator = ObjectAnimator.ofFloat(btn_show, "alpha", 1f, 0.8f, 0.7f, 0.2f, 0.1f);//佈局,型別,漸變程度
        objectAnimator.setDuration(4000);
        objectAnimator.start();

    }

    /**
     * 縮放
     *
     * @param view
     */
    public void OnScale(View view) {
        objectAnimator = ObjectAnimator.ofFloat(btn_show, "scaleY", 1f, 2f, 3f, 4f, 3f, 2f, 1f);
        objectAnimator.setDuration(4000);
        objectAnimator.start();

    }

    /**
     * 位移
     *
     * @param view
     */
    public void OnTranslate(View view) {
        float width = ll_root.getWidth();//獲取當前手機的的螢幕寬高
        objectAnimator = ObjectAnimator.ofFloat(btn_show, "translationX", width / 10, width / 9, width / 4, width / 3, width / 2, width);
        objectAnimator.setDuration(4000);
        objectAnimator.start();

    }

    /**
     * 旋轉
     *
     * @param view
     */
    public void OnRotate(View view) {
        objectAnimator = ObjectAnimator.ofFloat(btn_show, "rotation", rotateDu, 360);
        objectAnimator.setDuration(2000);
        objectAnimator.setRepeatCount(100);//設定動畫重複次數
        objectAnimator.setRepeatMode(ValueAnimator.RESTART);//動畫重複模式
        objectAnimator.start();
    }

    /**
     * 組合動畫
     *
     * @param view
     */
    public void OnSet(View view) {
        float height = ll_root.getHeight();
        ObjectAnimator objectAnimatorRotate = ObjectAnimator.ofFloat(btn_show, "rotation", rotateDu, 360);
        ObjectAnimator objectAnimatorTr = ObjectAnimator.ofFloat(btn_show, "translationY", height, height / 2, height / 3, height / 4, height / 5, height / 6);
        AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.setDuration(4000);
        animatorSet.play(objectAnimatorRotate).with(objectAnimatorTr);
        animatorSet.start();
    }
}

原始碼下載:https://download.csdn.net/download/weixin_39001306/10465643

相關推薦

Android動畫實現原理使用

Android動畫目前分為三種:Frame Animation 幀動畫,通過順序播放一系列影象從而產生動畫效果,。圖片過多時容易造成OOM(Out Of Memory記憶體用完)異常。Tween Animation 補間動畫(又叫view動畫),是通過對場景裡的物件不斷做影象

Android 常用實現自定義圓形進度條 ProgressBar demo

           Android 自定義 進度條,一般有三種方式,最早一般使用UI給的圖片使用幀動畫,完成,後面兩種,一種是使用自定義顏色,另外一種是使用帶相近色的圖片加動畫完成。 下面具體 說一下三種方式,推薦使用第二種方式,如果這種達不到效果,或者比較高也可使用第一

Android動畫之()屬性動畫

 分享自Carson_Ho的簡書,這篇寫的很詳細,我就不浪費時間寫了 目錄 目錄 1. 屬性動畫出現的原因 屬性動畫(Property Animation)是在 Android 3.0(API 11)後才提供的一種全新動畫模式 那麼為什麼要提供屬性動畫

Android動畫之(二)補間動畫

介紹說明:補間動畫是一種定義開始狀態和結束狀態,其中播放的時候還能新增設定的一種動畫,它的動畫方式有平移(TranslateAnimation)、縮放(ScaleAnimation)、旋轉(RotateAnimation)、透明度(AlphaAnimation)四個子類,四種變化,也可以將這

Android動畫之(一)幀動畫

幀動畫介紹:就是將原有的照片一幀一幀的排列好按照一定的順序播放而達到動畫的效果 技術實現:實現的方式有兩種,一種是在資原始檔中新增圖片,一種是直接在程式碼中新增圖片 第一種:在資原始檔中新增圖片 1.在drawable裡面新建檔案frame_animation.xml&nb

併發程式設計()—— ReentrantLock實現原理原始碼分析

  ReentrantLock是Java併發包中提供的一個可重入的互斥鎖。ReentrantLock和synchronized在基本用法,行為語義上都是類似的,同樣都具有可重入性。只不過相比原生的Synchronized,ReentrantLock增加了一些高階的擴充套件功能,比如它可以實現公平鎖,同時也可以

Android動畫的對比與簡單理解

Android三種動畫分別為幀動畫(Frame Animation)補間動畫(Tween Animation)屬性動畫(Property Animation) 動畫分為傳統動畫和屬性動畫 傳統動畫分為幀動畫和補間動畫 Android3.0之後出現的屬性動畫   幀動畫

android動畫的認識

Android包含三種動畫:View Animation(補間)、 Drawable Animation(幀動畫)、Property Animation(屬性動畫)。 View Animation: 基於View的漸變動畫,她只改變了View的繪製效果,而實際屬性值未變。比如動畫

Android動畫View Animation(補間動畫) 、Drawable Animation(幀動畫) 、Property Animation(屬性動畫)(下)

轉載:http://blog.csdn.net/lmj623565791/article/details/38092093 三種動畫的優缺點: (1)Frame Animation(幀動畫)主要用於播放一幀幀準備好的圖片,類似GIF圖片,優點是使用簡單

Android 方式實現圓形ImageView

所有方式均繼承了ImageView 圓形圖片實現一:BitmapShader package com.open.widget; import android.content.Context; import android.graphics.Bitmap; impor

android方法實現監聽事件

Android實現監聽事件的四種方式(匿名內部內實現,外部類實現,介面實現,繫結到標籤) 1. 使用匿名內部類的方式實現監聽事件 使用方法: 首先為要實現監聽的物件繫結監聽器,例如為一個Button物件繫結一個監聽器botton.setOnClickListener();。

Android中三級快取實現原理LruCache 原始碼分析

介紹 oom異常:大圖片導致 圖片的三級快取:記憶體、磁碟、網路 下面通過一張圖來了解下三級快取原理: 程式碼: public class Davince { //使用固定執行緒池優化 private static Exec

android 網路通訊介面各個介面的程式碼示例

第一部分 Android網路基礎    Android平臺瀏覽器採用了WeBKit引擎,這款名為Chorme Lite的Web瀏覽器擁有強大擴充套件特性,每個開發者都以為編寫自己的外掛,使得瀏覽器的功能更加完善。    目前Android平臺有3種網路介面。   第

android方式實現自由移動的view

public class MoveView extends ImageView { private int x, y; private int r, l, t, b; public MoveView(Context context) { this(context, n

Android方法實現按鈕點選事件

0.我們都知道Java在開發介面的時候,需要使用監聽事件,只有在寫過監聽事件之後才能夠完整的使用軟體,比如說,我們在寫了一個button之後,想點選button,然後在文字標籤中變換字型該怎麼做呢?那麼我們就需要對button這個view進行新增監聽事件,新增完監聽事件之後,

Android Dialog 實現方式

Dialog 風格 這是AppCompantActivity 中的高版本Dialog風格 <!-- Dialog型別的Activity 開始--> <style name="MyDialogTheme" paren

Android 方式實現自定義圓形頁面載入中效果的進度條

一、通過動畫實現定義res/anim/loading.xml如下:<?xml version="1.0" encoding="UTF-8"?>  <animation-list android:oneshot="false"xmlns:android="ht

Android動畫之 幀動畫筆記

Android系統中的動畫主要可分為三類 1.幀動畫 (傳送門) 2.補間動畫(傳送門) 3.屬性動畫(傳送門) 注:下圖來源其他博主,僅此一張 1.幀動畫(Frame Animation) 幀動畫    幀動畫是一種常見的動畫形式(Frame By Fra

Android 動畫詳解

1 背景 不能只分析原始碼呀,分析的同時也要整理歸納基礎知識,剛好有人微博私信讓全面說說Android的動畫,所以今天來一發Android應用的各種Animation大集合。英文厲害的請直接移步參考Android Developer。 Androi

Android 方式實現三角形氣泡效果、自定義View、shape、點9圖

背景 這期需求中,專案需要這樣一個情況,就是二級選單上面有個三角形 乍一看,用個圖片就可以解決,一個線性佈局、垂直襬下去,所以一開始我是這樣嘗試的,後來發現美工給我切的圖很不合適,不同手機顯示效果也不一樣,所以後來放棄了。以下是解決方案 使用.9圖