Android動畫總結

時間 2019-11-08

標籤 android 動畫總結欄目 Android 简体版

原文原文鏈接

本文總結經常使用屬性方法等，詳細學習可以使用以下郭霖大神文章：

Android屬性動畫徹底解析(上)，初識屬性動畫的基本用法android

Android屬性動畫徹底解析(中)，ValueAnimator和ObjectAnimator的高級用法git

Android屬性動畫徹底解析(下)，Interpolator和ViewPropertyAnimator的用法github

視圖動畫(View animation)

視圖動畫分兩種子動畫Tween animation和Frame animation,下面分別介紹他們的用法。ide

視圖動畫(View Animation)之幀動畫(Frame Animation)

建立res/anim/sd_anim.xml

<?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_1"
        android:duration="80" />
    <item
        android:drawable="@mipmap/img_2"
        android:duration="80" />
    <item
        android:drawable="@mipmap/img_3"
        android:duration="80" />
    ...
</animation-list>

xml佈局中

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

使用

ImageView img_show = (ImageView) findViewById(R.id.img_show);
AnimationDrawable  anim = (AnimationDrawable) img_show.getBackground();
anim.start();//開始幀動畫
anim.stop();//中止幀動畫

視圖動畫(View Animation)之補間動畫(Tween Animation)

AlphaAnimation(透明度漸變)

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，徹底透明-徹底不透明

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

TranslateAnimation(位移漸變)

anim_translate.xml：this

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

屬性解釋：lua

fromXDelta/fromYDelta：動畫起始位置的X/Y座標

toXDelta/toYDelta：動畫結束位置的X/Y座標

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，表示偶數次顯示動畫時會作方向相反的運動！

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>

Android開發中一定會涉及到動畫方面的效果，那麼就會遇到一個問題，若是控制動畫開始速度，與結束速度。還有其餘的一些效果

控制動畫速度(動畫差值器)

在xml裏面設置屬性

android:interpolator="@android:anim/accelerate_interpolator" 設置動畫爲加速動畫(動畫播放中愈來愈快)

android:interpolator="@android:anim/decelerate_interpolator" 設置動畫爲減速動畫(動畫播放中愈來愈慢)

android:interpolator="@android:anim/accelerate_decelerate_interpolator" 設置動畫爲先加速在減速(開始速度最快 逐漸減慢)

android:interpolator="@android:anim/anticipate_interpolator" 先反向執行一段，而後再加速反向回來（至關於咱們彈簧，先反向壓縮一小段，而後在加速彈出）

android:interpolator="@android:anim/anticipate_overshoot_interpolator" 同上先反向一段，而後加速反向回來，執行完畢自帶回彈效果（更形象的彈簧效果）

android:interpolator="@android:anim/bounce_interpolator" 執行完畢以後會回彈跳躍幾段（至關於咱們高空掉下一顆皮球，到地面是會跳動幾下）

android:interpolator="@android:anim/cycle_interpolator" 循環，動畫循環必定次數，值的改變爲一正弦函數：Math.sin(2* mCycles* Math.PI* input)

android:interpolator="@android:anim/linear_interpolator" 線性均勻改變

android:interpolator="@android:anim/overshoot_interpolator" 加速執行，結束以後回彈

在代碼中設置，順序效果同上

animation.setInterpolator(new AccelerateInterpolator());

animation.setInterpolator(new DecelerateInterpolator());

animation.setInterpolator(new AccelerateDecelerateInterpolator());

animation.setInterpolator(new AnticipateInterpolator());

animation.setInterpolator(new AnticipateOvershootInterpolator());

animation.setInterpolator(new BounceInterpolator());

animation.setInterpolator(new CycleInterpolator(2));

animation.setInterpolator(new LinearInterpolator());

animation.setInterpolator(new OvershootInterpolator());

動畫不設置Interpolator屬性即爲默認值，勻速
Interpolator屬性也可自定義

動畫狀態的監聽

setAnimationListener(new AnimationListener())方法，重寫下面的三個方法：

onAnimationStart()：動畫開始

onAnimationRepeat()：動畫重複

onAnimationEnd()：動畫結束

屬性動畫

Animator ————
         ———— AnimatorSet
         ———— ValueAnimator
                    ———— ObjectAnimator
                    ———— TimeAnimator

AnimatorSet:Animator 子類，用來組合動畫
ObjectAnimator:ValueAnimator 子類，

ValueAnimator

res/animator/***.xml 中定義ValueAnimator
語法

<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"]/>

使用

//使用xml屬性動畫
        ValueAnimator valueAnimator = (ValueAnimator) AnimatorInflater.loadAnimator(this, R.animator.valueanimator);
        //動畫監聽
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                Integer animatedValue = (Integer) animation.getAnimatedValue();
                view.scrollTo(animatedValue,0);
            }
        });
        valueAnimator.start();

Java屬性介紹

//動畫從0到10再到5再到0
        ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, 10, 5, 0);
        //ValueAnimator valueAnimator = ValueAnimator.ofInt(0, 10, 5, 0);
        /*
        ofObject不一樣於ofFloat和ofInt，多了TypeEvaluator參數；其實ofInt和ofFloat使用的是系統默認的IntEvaluator和FloatEvaluator，而ofObject中參數TypeEvaluator須要咱們自定義
        */
        //ValueAnimator.ofObject(TypeEvaluator evaluator, Object... values);後文介紹
        //動畫中每一幀更新的時候調用
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                final float animatedValue = (float) animation.getAnimatedValue();
            }
        });
        //動畫的監聽
        valueAnimator.addListener(new AnimatorListenerAdapter() {
            //動畫取消
            @Override
            public void onAnimationCancel(Animator animation) {
                super.onAnimationCancel(animation);
            }

            //動畫結束
            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
            }

            //動畫重複
            @Override
            public void onAnimationRepeat(Animator animation) {
                super.onAnimationRepeat(animation);
            }

            //動畫開始
            @Override
            public void onAnimationStart(Animator animation) {
                super.onAnimationStart(animation);
            }

            //動畫暫停
            @Override
            public void onAnimationPause(Animator animation) {
                super.onAnimationPause(animation);
            }

            //動畫重啓
            @Override
            public void onAnimationResume(Animator animation) {
                super.onAnimationResume(animation);
            }
        });
        //動畫執行時間
        valueAnimator.setDuration(500);
        //動畫重複次數
        valueAnimator.setRepeatCount(Integer.MAX_VALUE);
        /*
        動畫循環模式,有兩種取值：
        ValueAnimator.RESTART:從新開始
        ValueAnimator.REVERSE:反向從新開始
         */
        valueAnimator.setRepeatMode(ValueAnimator.REVERSE);
        //動畫差值器
        valueAnimator.setInterpolator(new DecelerateInterpolator());
        //設置動畫延遲播放
        valueAnimator.setStartDelay(1000);
        //開始播放動畫
        valueAnimator.start();

TypeEvaluator

ObjectAnimator

屬性介紹
ObjectAnimator 使用與惟一不一樣在於

/**
         第二個參數 propertyName 說明：
         alpha：透明度
         rotation：旋轉
         rotationX:圍繞x軸旋轉
         rotationY:圍繞y軸旋轉
         translationX：在x軸平移
         translationY：在y軸平移
         scaleX：在x軸縮放
         scaleY：在y軸縮放
         backgroundColor：能夠修改控件背景顏色
         等等
         */
        ObjectAnimator alpha = ObjectAnimator.ofFloat(imageView, "alpha", 1, 10, 10, 5, 1);
        alphaAnimator.setDuration(2000);
        alphaAnimator.setRepeatMode(ValueAnimator.REVERSE);
        alphaAnimator.setRepeatCount(10);
        alphaAnimator.setInterpolator(new DecelerateInterpolator());
        alphaAnimator.start();
        alphaAnimator.setStartDelay(1000);