Day34-Animation 動畫

根據人眼視覺殘留現象，連續播放一些列的圖像，形成動畫效果。

Android中的動畫:

游戲：利用自定義View的繪制方法，開啟線程頻繁的刷新界面，形成動畫； Android 視圖動畫：針對 View 以及View的子類。 Android 屬性動畫：針對定義的屬性，大部分可以操作View

補間動畫

Android根據起始狀態和結束狀態，進行控件的移動、旋轉、縮放等顯示效果的變化，形成一個動畫

實現方式

XML 定義動畫 (Android官方推薦)
xml 定義在 res/anim/ 文件夾下面； 這種 anim動畫，需要通過 AnimationUtils 來加載

代碼實現動畫（可擴展性差）

補間動畫，就是指定開始狀態，並且指定結束狀態，Android系統自動的在這兩個狀態之間進行填充，形成連續的動畫，就被稱為補間動畫

代碼從XML中加載 動畫對象； 給需要處理的控件，設置動畫就可以播放了；

補間動畫特點

通過指定時間、起始狀態、結束狀態，通過Android系統API，來進行動態效果的呈現； 補間動畫，播放完成執行，控件將會還原為原始的位置、狀態； 可以根據動畫的播放情況，進行動畫的播放狀態的監聽， 通過監聽器可以監測：動畫的開始、循環、停止； 當動畫還在播放的時候，如果再次設置控件的動畫，那麼當前的動畫將會終止；

關於動畫的平滑

Android系統，播放補間動畫時，根據時間，起始狀態、結束狀態，生成動畫效果 插值器 interpolator: Android系統根據插值器，在每一個等分的時間中，來設置不同的數值

組合變化

translate + scale 在 中，寫入多個動畫效果就可以將多種效果同時組合在一起播放。 如果希望動畫是串行執行，那麼後續動畫的起始播放時間，需要延後！！！ 補間動畫的 set 最終相當於線程池，內部的每一個動畫效果實際上是由一個線程執行的，所有即使一個效果無限循環，其他效果也能夠執行。

補間動畫的重點

！！！ 任何動畫的操作都不會影響實際控件的狀態。因為實際上補間動畫只是把控件的外觀進行了各種處理，相當於控件還在原來的位置，還是原來的尺寸 嘗試 translate + rotate 就可以重現控件狀態。 補間動畫 通過 AnimationUtils.loadAnimation 進行加載的。給控件 View startAnimation(Animation) 就可以執行控件的動畫了。

關於動畫的接口

動畫播放的時候是有狀態了，例如 開始動畫、動畫結束
AnimationListener 包含動畫三種狀態的回調：

onAnimationStart 動畫開始執行 onAnimationEnd 動畫執行完成 onAnimationRepeat 動畫重復執行。

幾種動畫效果

xml文件
res/anim/

旋轉:

移動:

縮放:

set集合

java 代碼文件

public void btnRotateClick(View view) {
        //圖片旋轉
        Animation animation = AnimationUtils.loadAnimation(this, R.anim.anim_rotate);
        animation.setRepeatMode(Animation.INFINITE);

        //設置插值器 平滑旋轉
        animation.setInterpolator(new LinearInterpolator());

        view.startAnimation(animation);


    }

    public void btMoveInterpolator(View view) {
        //帶有插值器的移動
        Animation animation = AnimationUtils.loadAnimation(this, R.anim.anim_move);
        animation.setDuration(1000);
//        animation.setInterpolator(new OvershootInterpolator(20));
        animation.setInterpolator(new SimpleInterpolator());

        view.startAnimation(animation);
    }

    public void btnScale(View view) {
        ImageView imageView = (ImageView) findViewById(R.id.image_view);
        if (imageView != null) {
            Animation animation = AnimationUtils.loadAnimation(this, R.anim.anim_heartbeat);
            animation.setDuration(1000);
            AnimationSet animationSet = (AnimationSet) animation;
            List animations = animationSet.getAnimations();
            Animation anim = animations.get(0);

            //設置第一次執行完成之後, 循環播放的次數
            anim.setRepeatMode(Animation.REVERSE);
            anim.setRepeatCount(Animation.INFINITE);
            imageView.startAnimation(animation);
        }
    }

動畫的監聽

設置動畫監聽: 當動畫開始, 完成, 重復時, 進行回調
        animation.setAnimationListener(this);

 //////////////Animaition監聽/////start/////////////
   @Override
    public void onAnimationStart(Animation animation) {

    }

    @Override
    public void onAnimationEnd(Animation animation) {
        tvInc.setVisibility(View.INVISIBLE);

        tvZan.setText("贊" + zanCount);
    }

    @Override
    public void onAnimationRepeat(Animation animation) {

    }
    //////////////Animaition監聽///////end/////////////

逐幀動畫

！！！ 逐幀動畫是一個 drawable 可以認為是一個圖片；和 shape 相似都是用 xml 寫出來的。 當中，從 xml 順序加載圖片，最上面的 最先顯示。 可以指定 oneshoot 屬性，控制動畫是否只播放一次。如果為 true,那麼只播放一次，即使播放完成， 如果不進行stop的話，依然是 running的狀態。代表直接start()是不會執行的，只有stop之後才可以重新start

逐幀動畫的使用

准備圖片資源 在drawable中編寫 xml，指定每一幀的顯示圖片內容 ImageView 或者 其他View 的background屬性，指定資源，方式：@drawable/名稱 代碼獲取ImageView ，並且獲取到 background ，檢查是否是 AnimationDrawable ，進行強制類型轉換 AnimationDrawable start(), stop(); 進行播放的控制 start() 不支持繼續播放，每次從頭開始。

應用場景

重復的，有動畫效果的提示性內容，例如：京東客戶端下拉刷新的時候“快遞小哥”的動畫 一些小的動畫，不能夠使用補間動畫的情況，或者顯示現實世界中的人物、動畫的動態效果。 主要是配合一些事件的操作，如下拉刷新、圓圈進度條的處理

代碼示例

    
         .....
    

    public void btnPlayFrame(View view) {
        //TODO: 播放動畫
        //1. 因為逐幀動畫是圖片, 所以要從ImageView中取出來, 才能進行控制
        ImageView imageGift = (ImageView) findViewById(R.id.image_gift);
        //獲取src屬性
        Drawable drawable = imageGift.getDrawable();

        //shape -> ShapeDrawable
        //animation-list -> AnimationDrawable
        if (drawable != null && drawable instanceof AnimationDrawable) {
            //2. 播放動畫
            AnimationDrawable animationDrawable = (AnimationDrawable) drawable;
            animationDrawable.start();
        }



//        imageGift.setImageDrawable();
    }


    public void btnStopFrame(View view) {
        //TODO: 停止動畫
        //1. 獲取圖像 逐幀動畫

        ImageView imageGift = (ImageView) findViewById(R.id.image_gift);
        Drawable drawable = imageGift.getDrawable();
        if (drawable != null && drawable instanceof AnimationDrawable) {
            AnimationDrawable animationDrawable = (AnimationDrawable) drawable;

            //Stop會將動畫暫停, 但是下一次, start的時候, 會從頭開始播放
            animationDrawable.stop();

            //Gif 如何顯示: GifDrawable庫  WebView

        }
    }

屬性動畫

屬性動畫定義在 res/animator/ 這個資源目錄下； 屬性動畫：實現按時間進行控件屬性的變化； 實際改變控件的屬性，整個布局重新排版，而且不會還原。

objectAnimator標記

能夠以動畫的方式修改任意對象的屬性； 能夠通過 setXxxx 這種方法的自動調用，來實現對屬性“xxxx” 來進行修改； 這個標記可以通過 指定屬性的名稱，來進行設置。

原理

執行原理<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4NCkFuaW1hdG9yIM2ouf0geG1sIMC0vNPU2KOsu/HIodDo0qrQ3rjEtcTK9NDUtcTD+7PGoaLA4NDNoaLK/da1o7sgQW5pbWF0b3JJbmZsYXRvciDAtLzT1Nh4bWwsINauuvPJ6NbDwcsgc2V0VGFyZ2V0KE9iamVjdCkgo6zWuLao0OjSqtDeuMTK9NDUtcTE2sjdtcS21M/zo7sgzai5/b2ryvTQ1LXEw/uzxteqzqogSmF2YUJlYW4gyvTQ1Le9t6jJ6NbDw/zD+7nm1PKjusr00NTD+8rX19bEuLTz0LSjrMeww+bM7bzTIHNldKOswP3I5yBsZWZ0yvTQ1KOsxMfDtL7Nu+HJ+rPJIHNldExlZnQoyv3WtcDg0M0pIL340NC3tMnko6yy6dXS1ri2qLbUz/PW0MrHt/Gw/Lqs1eK49re9t6ijrMjnufuw/Lqso6y+zb/J0tSwtNXV1ri2qLXEyrG85ChkdXJhdGlvbikgvfjQ0CB2YWx1ZUZyb20gtb0gdmFsdWVUbyDV4sG91rXWrrzktcS9+NDQtq/MrLXEyejWw6GjDQo8aDMgaWQ9"實現步驟">實現步驟 准備屬性動畫的XML動畫資源； 准備需要播放動畫的對象； 加載屬性動畫的 XML 設置動畫要修改的對象 修改的屬性名稱，一定是 Java類文件中的 public void setXxxxx(… xxx) 的方法的 xxxx 這個屬性，首字母小寫

屬性動畫的Target的設置

比較常見的是 View 修改的屬性都是 color, dimension, int, float 屬性動畫還可以指定非 View的對象。官方使用采用的自定義的Object，然後再Object setXxxx() 內部來實現更強大功能。

動畫執行序列 < set>

set 標簽可以 通過 ordering屬性進行設置，內部的動畫是否在一起執行
sequentially 串行執行，一個執行完，在執行另外的一個，不要有無限重復的，因為後邊的沒法執行了
together 並行一起執行

V4包動畫支持

ViewCompat 支持 設置View的狀態，例如 ViewCompat.setScaleX(View, float) 就是縮放控件水平方向的尺寸；
ViewPropertyAnimatorCompat 支持 實現低版本手機的屬性動畫功能，
ViewCompat.animate(View) 為View創建一個屬性動畫對象

動畫與事件的配合

ScrollView 的 onTouch 中的 MOVE 事件可以和控件的隱藏顯示配合
ListView OnScrollListener 可以檢測ListView的滾動，滾動的過程中可以實現圖片，標題的縮放

代碼實例

res/animator/

java

    public void btnPropertyMove(View view) {
        //屬性動畫的加載
        //1. 加載器 加載xml文件
        Animator animator = AnimatorInflater.loadAnimator(this,
                R.animator.animator_move);
        //2. 將需要修改的對象傳遞給屬性動畫
        animator.setTarget(mTextView);
        //3. 動畫的播放

        animator.start();
    }

    public void btnPropertyColor(View view) {
        Animator animator = AnimatorInflater.loadAnimator(this, R.animator.animator_color);
        animator.setTarget(mTextView);
        animator.start();
    }

    public void btnPropertyTextSize(View view) {
        Animator animator = AnimatorInflater.loadAnimator(this, R.animator.animator_textsize);
        animator.setTarget(mTextView);
        animator.start();


    }

    public void btnPropertyCustom(View view) {
        //自定義對象的屬性修改

        //1. 自定義類對象: 確認屬性名
        TextShower shower = new TextShower(mTextView);
        //2. 加載xml或者寫代碼
        Animator animator = AnimatorInflater.loadAnimator(this, R.animator.anmiator_text_show);
        //3. 設置目標
        animator.setTarget(shower);
        animator.start();



    }

    public void btnPropertyCode(View view) {
        //代碼形式的屬性動畫
        //所有的屬性的數值,如果是位置那麼以像素為單位
//     ObjectAnimator.ofFloat(mTextView, "translationX", 0, 200).setDuration(2000).start();
        //利用set 可以實現多個屬性同時修改

        AnimatorSet set = new AnimatorSet();
        ObjectAnimator animator1 = ObjectAnimator.ofFloat(mTextView, "translationX", 0, 400).setDuration(2000);
        ObjectAnimator animator2 = ObjectAnimator.ofFloat(mTextView, "rotation", 0, 360).setDuration(200);
        set.playTogether(animator1, animator2);
        set.start();

    }