2. 程式人生 > >Android動畫-Property Animation(一)

Android動畫-Property Animation(一)

阿新 • • 發佈：2019-02-02

本章內容

在之前 《Android動畫-概述》中，我大概說了下Android Property Animation的由來，這裡就不做多介紹了，Property Animation 肯定不是一章就能講的完的，接下來的幾章都是建立在程式碼、效果圖的基礎上，介紹Property Animation的用法。
本章主要講的是 ObjectAnimator ，包括程式碼生成動畫，XML載入動畫。

簡述：在給出一大堆程式碼之前，先通過效果圖來看看一些有趣的動畫，通過一個簡單有趣的動畫逐步展開:

這裡寫圖片描述

這絕對是一個非常有趣的動畫，包含了 alpha、translationX、translationY、rotationX、rotationY、scaleX、scaleY , 一堆 Animation 名詞，在詳細看這個效果的程式碼之前，先了解一些重要的東西，有個印象就行，畢竟之後會很詳細的說明，擔心後面大家看的一頭霧水：

View Animation 和 Property Animation

alpha 依然不變

translate 分成了 translationX 和 translationY, 要想X軸、Y軸兩個一起變化就需要將 translationX 和 translationY 組合使用

rotate 分成了 rotation、rotationX、 rotationY，其中 rotation 和 rotate基本一致，都是圍繞某一箇中心旋轉，而 rotationX 和 rotationY 則應該算 Property Animation 帶來的新的效果，這兩種動畫分別表示著 X軸的立體動畫和Y軸的立體動畫。

scale 則分成了 scaleX 和 scaleY，和 translationX/Y 一樣，要想X軸、Y軸都有變化就必須一起使用

共同點:
duration 動畫時間
repeatCount 動畫重複次數
repeatMode 動畫重複模式
Interpolator 插值器

接下來，還需要看看3.0之後，View的變化

aplha：透明度，1是完全不透明，0是完全透明，這個也沒什麼好說的。

setTranslationX(floatX)、setTranslationY(floatY) 這兩個API的作用是對控制元件的位置進行調整，floatX 和 floatY 是一個相對值，相對於控制元件左上角原點的一個位移值。

setRotationX(floatX) 和 setRotationY(floatY) ，這兩個API分別代表著 改變與X軸平面的角度、改變與Y軸平面的角度，這話說的非常抽象，事實上這兩個API的效果也非常抽象，舉個栗子：把X軸、Y軸看成兩個垂直的平面，現在有一個ImageView 在畫面上，這個ImageView 現在肯定是與Y軸的平面平行，與X軸的平面垂直，如果我設定了 setRotationX(45)，這個45代表的就是一個正45度角，那麼這個ImageView 就會變成一個底部向螢幕內延伸，傾斜的角度與X軸平面的角度成45度角，小角對著你。(感覺說完還是很抽象，下面會有效果，一會兒大家看看吧，事實上開發中，我基本沒有用到過，好奇葩的API)

setScaleX(floatX) 、setScaleY(floatY) 這個就簡單了，代表著 X軸方向的縮放，Y軸方向的縮放

setPivotX(floatX) 和 setPivotY(floatY)：旋轉的軸點和縮放的基準點，預設是View的中心點。和View Animation 不一樣，Property Animation 提供的API和XML這兩種建立動畫的途徑中，都沒有額外的位置設定中心點，所以不管是 程式碼還是載入XML ，最後的中心點都是動畫控制元件本身在程式碼裡面去設定的。

setX(floatX) set(floatY) : 這個API是設定控制元件在螢幕上的絕對位置，這裡 floatX 和 floatY都是 絕對座標點

看完新的API，先貼一下上面那個 Set 動畫的程式碼，僅僅只是看上去，很多程式碼，其實就是一個方法：

public void set1(View view) {
        AnimatorSet set = new AnimatorSet();
        set.setDuration(3000);
        set.playTogether(
                ObjectAnimator.ofFloat(imageView, "alpha", 0.3f, 1f),
                ObjectAnimator.ofFloat(imageView, "scaleY", 0.1f, 1f),
                ObjectAnimator.ofFloat(imageView, "scaleX", 0.1f, 1f),
                ObjectAnimator.ofFloat(imageView, "rotationX", 0f, 360f),
                ObjectAnimator.ofFloat(imageView, "rotationY", 0f, 360f),
                ObjectAnimator.ofFloat(imageView, "translationY", 0f, -400f, 0f),
                ObjectAnimator.ofFloat(imageView, "translationX", 0f, -400f, 0f));
        set.start();
    }

AnimatorSet 作為 Property Animation 中的動畫集合，提供了多種動畫API，這裡用了

public void playTogether(Animator... items)

從方法名就可以看出這是一個一起動畫的API，引數是可變陣列，型別是 Animator，這是一個抽象類，所以我們要使用它的子類，ObjectAnimator的父類是ValueAnimator(Property Animation核心類，本章先不介紹它)，ValueAnimator繼承於Animator，在 Property Animation 中做一些簡單的動畫，我一般都是用ObjectAnimator。
普通動畫APIpublic static ObjectAnimator ofFloat(Object target, String propertyName, float... values)，tartget 毫無疑問是動畫控制元件，propertyName從上面的程式碼中可以看出，這個給定了你要制定的動畫型別，最後一個引數是一個可變陣列。這裡就可以看出Property Animation對於普通動畫，它需要的只是結果，也即是也想要這個動畫經歷什麼值，直接告訴API，然後其中實現、過渡這些都是不需要管的。

Alpha

這個是用程式碼實現的：

這裡寫圖片描述

public void alpha(View view) {
        ObjectAnimator anim = ObjectAnimator.ofFloat(imageView, "alpha", 1f,
                0.1f, 1f, 0.5f, 1f);
        anim.setDuration(5000);
        anim.start();
    }

這是一個最基本的透明漸變的動畫，我希望我的ImageView在5秒內的透明度 1f-0.1f-1f-0.5f-1f，然後接下來就和我沒有關係了。

接下來，讓我們來XML定義一個動畫，xml 定義路徑：res/animator

這裡寫圖片描述

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:ordering="sequentially">

    <objectAnimator
        android:duration="1400"
        android:propertyName="alpha"
        android:valueFrom="0.3"
        android:valueTo="1"
        android:valueType="floatType" />

    <objectAnimator
        android:duration="2000"
        android:propertyName="alpha"
        android:valueFrom="1"
        android:valueTo="0.1"
        android:valueType="floatType" />

    <objectAnimator
        android:duration="1400"
        android:propertyName="alpha"
        android:valueFrom="0.1"
        android:valueTo="0.8"
        android:valueType="floatType" />

</set>

很明顯一個objectAnimator節點是無法承載多個動畫的，必須使用set，在set下還需要指明它的子節點動畫是一起執行，還是按照XML順序依次執行。這裡android:ordering="sequentially"我規定是按照順序依次執行。還有一個值，規定一起執行的：android:ordering="together"。
XML中 定義：第一，執行動畫的型別 android:propertyName，和 View Animation不一樣，View Animation 中一種動畫會有對應的節點，而Property Animation中所有基本動畫的節點都是objectAnimator，區別動畫的型別則是一個屬性：android:propertyName。比如 alpha :android:propertyName=”alpha”。第二，在Property Animation的XML中只有android:valueFrom=”0.1” 和 android:valueTo=”0.8” 這兩個動畫值得存在，不存在規定 scale動畫基點的屬性，以及規定 rotation 中心的屬性，這些都得去到java中呼叫對應控制元件的API去設定才成：setPivotX(floatX) 和 setPivotY(floatY)。
動態載入XML：

public void alpha(View view) {
//        Animator animator = AnimatorInflater.loadAnimator(this, R.animator.base_alpha_animator); // 簡單的透明動畫
        Animator animator = AnimatorInflater.loadAnimator(this, R.animator.base_set_alpha); // 複雜的透明動畫
        animator.setTarget(imageView);
        animator.start();
    }

這裡AnimatorInflater，就是一個用於動態載入的類。

scale

程式碼動畫：

這裡寫圖片描述

public void scale(View view) {
        ObjectAnimator anim = ObjectAnimator.ofFloat(imageView, "scaleX", 0.1f, 1f, 0.3f, 0.7f, 0.5f);
        imageView.setScaleY(2);
//        imageView.setScaleX(2);
        anim.setDuration(3000);
        anim.setRepeatCount(1);
        anim.setRepeatMode(ObjectAnimator.REVERSE);
        anim.start();
    }

這裡設定了repeatCount和repaeatMode給大家看看效果，順便測試了了一個View.setScaleY,效果很明顯 動畫順序反著又播了一遍，並且控制元件高度變成2倍。

XML

這裡寫圖片描述

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000"
    android:ordering="together">

    <set android:ordering="sequentially">
        <objectAnimator
            android:propertyName="scaleX"
            android:valueFrom="1"
            android:valueTo="1.5"
            android:valueType="floatType" />

        <objectAnimator
            android:propertyName="scaleX"
            android:valueFrom="1.5"
            android:valueTo="0.1"
            android:valueType="floatType" />
    </set>

    <set android:ordering="sequentially">
        <objectAnimator
            android:propertyName="scaleY"
            android:valueFrom="1"
            android:valueTo="0.1"
            android:valueType="floatType" />

        <objectAnimator
            android:propertyName="scaleY"
            android:valueFrom="0.1"
            android:valueTo="1.5"
            android:valueType="floatType" />
    </set>

</set>

正如之前說的，在Property Animation中如果想要X軸、Y軸一起變化，就需要同時使用scaleX、scaleY，在這個XML中我得想法是 把X軸的變化作為一個set，Y軸的變化是另一個set，它們的執行規定是依次執行，之後再把這兩個set一起執行。也就是 together下包含著兩個sequentially。其實另一種寫法可以是sequentially包含著兩個together，就是把某一階段X/Y軸的變化看成是一體的，然後一階段一階段的進行。

rotation

先看個最簡單的平面動畫

這裡寫圖片描述

 public void rotate(View view) {
//        ObjectAnimator anim = ObjectAnimator.ofFloat(imageView, "rotationY", 0f, 360f, 200f, 315f, 225f, 269f);  這是個逗逼的動畫
        ObjectAnimator anim = ObjectAnimator.ofFloat(imageView, "rotation", 0f, 720f);
//        imageView.setRotationX(-45);
//        imageView.setRotationY(-30);
        imageView.setPivotX(-100f);
        imageView.setPivotY(-100f);
        anim.setDuration(5000);
        anim.setInterpolator(new AccelerateInterpolator());
        anim.start();
    }

這是一個非常簡單的動畫，其實就是在模擬View Animation 中的rotate，這裡如果不設定imageView.setPivotX(-100f); imageView.setPivotY(-100f);那麼它的預設旋轉中心就是ImageView本身的中心點，需要說的是，這裡的imageView.setPivotX(-100f);
imageView.setPivotY(-100f)都是相對於控制元件左上角的相對位置；並且這裡使用了 加速 的插值器。

3D動畫

這裡寫圖片描述

    public void rotate(View view) {
//        ObjectAnimator anim = ObjectAnimator.ofFloat(imageView, "rotationY", 0f, 360f, 200f, 315f, 225f, 269f);  這是個逗逼的動畫
        ObjectAnimator anim = ObjectAnimator.ofFloat(imageView, "rotationY", 0f, 720f);
//        imageView.setRotationX(-45);
//        imageView.setRotationY(-30);
        imageView.setPivotX(-100f);
        imageView.setPivotY(-100f);
        anim.setDuration(5000);
        anim.setInterpolator(new AccelerateInterpolator());
        anim.start();
    }

rotationY就是圍繞中心點做的Y軸方向的3D動畫，如果你想看X軸方向，換成rotationX就OK了。

傾斜旋轉動畫

這裡寫圖片描述

    public void rotate(View view) {
//        ObjectAnimator anim = ObjectAnimator.ofFloat(imageView, "rotationY", 0f, 360f, 200f, 315f, 225f, 269f);  這是個逗逼的動畫
        ObjectAnimator anim = ObjectAnimator.ofFloat(imageView, "rotation", 0f, 720f);
        imageView.setRotationX(-45);
//        imageView.setRotationY(-30);
//        imageView.setPivotX(-100f);
//        imageView.setPivotY(-100f);
        anim.setDuration(5000);
        anim.setInterpolator(new AccelerateInterpolator());
        anim.start();
    }

imageView.setRotationX(-45) 這個API表示著，ImageView底部向螢幕內側傾斜45°，也就是ImageVIew和X軸平面的相交，角度從90°，變成45°，就變成上圖中的效果。

XML

這裡寫圖片描述

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:ordering="sequentially">

    <objectAnimator
        android:duration="1500"
        android:propertyName="rotation"
        android:valueFrom="0"
        android:valueTo="28"
        android:valueType="floatType" />


    <objectAnimator
        android:duration="1500"
        android:propertyName="rotationX"
        android:valueFrom="0"
        android:valueTo="360"
        android:valueType="floatType" />

</set>

   public void rotate(View view) {
//        Animator animator = AnimatorInflater.loadAnimator(this, R.animator.base_rotation_animator); //簡單的旋轉動畫
        Animator animator = AnimatorInflater.loadAnimator(this, R.animator.base_set_rotate);
        animator.setTarget(imageView);
        imageView.setPivotX(imageView_height);
        imageView.setPivotY(0);
        animator.start();
    }

這個旋轉動畫是先正方向旋轉28°，將對角線與X軸平行，然後在程式碼裡面將對角線上的點作為中心點旋轉，其實也就是繞著對角線旋轉

translation

這裡寫圖片描述

public void translate(View view) {
        imageView.setTranslationX(-200);
        ObjectAnimator anim = ObjectAnimator.ofFloat(imageView, "translationY", 0f, -400f, 0f);
        anim.setDuration(3000);
        anim.start();
    }

以控制元件左上角為原點位移-200px imageView.setTranslationX(-200)，然後translationY，從0位移-400，最後在回到Y軸的原點。


XML

這裡寫圖片描述

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000"
    android:ordering="together">

    <set android:ordering="sequentially">

        <objectAnimator
            android:propertyName="translationX"
            android:valueFrom="-150"
            android:valueTo="0" />

    </set>

    <set android:ordering="sequentially">

        <objectAnimator
            android:propertyName="translationY"
            android:valueFrom="-200"
            android:valueTo="0" />

        <objectAnimator
            android:interpolator="@android:anim/bounce_interpolator"
            android:propertyName="translationY"
            android:valueFrom="0"
            android:valueTo="100" />

    </set>

</set>

回彈的效果看不到也是沒轍。

拋物線

這裡寫圖片描述

private float setX = 0;

    public void setXY(View view) {
        imageView.setScaleX(0.1f);
        imageView.setScaleY(0.1f);
        setX = 0;
        ObjectAnimator anim = ObjectAnimator.ofFloat(imageView, "cjh", 0f, 1f);
        anim.setDuration(3000);
        anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                float value = (Float) animation.getAnimatedValue();//得到動畫變化的屬性值
                setX = 400 * value;
                float setY = -1 / 75 * setX * setX + 4 * setX;
                imageView.setX(setX);
                imageView.setY(setY);
            }
        });
        anim.start();
    }

事實上，Property Animation 是可以拿到時間值然後自定義動畫效果，程式碼中，我定義我要從 0 - 1，但是具體做什麼我隨便寫的，然後在重新整理監聽裡面，呼叫了拋物線的公式，然後 setX setY，不斷更新ImageView的位置

至此，關於 Proerty Animation 的基本使用都講完了，主要是詳細的講了 ObjectAnimator 的使用和XML的寫法，接下來就是更為重要的動畫了。

原始碼下載

相關推薦

Android動畫-Property Animation(一)

本章內容 在之前 《Android動畫-概述》中，我大概說了下Android Property Animation的由來，這裡就不做多介紹了，Property Animation 肯定不是一章就能講的完的，接下來的幾章都是建立在程式碼、效果圖的基礎上，介紹Pr

HenCoder Android 自定義 View 1-7：屬性動畫 Property Animation（進階篇）

這期是 HenCoder 自定義繪製的第 1-7 期：屬性動畫（進階篇） 簡介 上期的內容，對於大多數簡單的屬性動畫場景已經夠用了。這期的內容主要針對兩個方面： 針對特殊型別的屬性來做屬性動畫； 針對複雜的屬性關係來做屬性動畫。 TypeEvaluator

Android 屬性動畫 Property Animation（進階篇）

簡介 上期的內容，對於大多數簡單的屬性動畫場景已經夠用了。這期的內容主要針對兩個方面： 針對特殊型別的屬性來做屬性動畫； 針對複雜的屬性關係來做屬性動畫。 TypeEvaluator 關於 ObjectAnimat

Android進階——屬性動畫Property Animation詳解與應用(二)

引言 前一篇Android進階——屬性動畫Property Animation詳解(一)總結了屬性動畫的絕大部分核心知識點，這篇主要是補充下欠缺的知識點——Layout佈局動畫和View的動畫相關知識、自定義TypeEvaluator屬性動畫的應用。 一、佈

Android動畫精講一 從setTranslationX談屬性動畫和view動畫的區別

                            最近又用到了動畫，決定把幾次專案裡用到的動畫走過的彎路總結一下，順便梳理下android的動畫體系。眾所周知，android動畫分三類：一是View 動畫，又叫Tween動畫，二是frame 動畫(幀動畫)，又叫drawable 動畫，三是屬性動畫，即p

Android動畫-Frame Animation（幀動畫）

Android動畫主要分為以下三類： Tweened animation（補間動畫）- 在android3.0（API11）之前支援，該動畫僅僅支援對View操作，而且View在做動畫的時候，View相應的實際屬性值並沒有發生改變，例如：一個Button起始位置left，to

Android動畫-Tweened animation（補間動畫）

Android動畫主要分為以下三類： Tweened animation（補間動畫）- 在android3.0（API11）之前支援，該動畫僅僅支援對View操作，而且View在做動畫的時候，View相應的實際屬性值並沒有發生改變，例如：一個Button起始位置left, t

走進絢爛多彩的屬性動畫-Property Animation之TimeInterpolator和TypeEvaluator（下篇）

  上一篇中，我們已經介紹了屬性動畫的基本使用，至少在動畫應用上問題不大，而本篇我們將來了解插值器（Interpolator）和型別估算器（TypeEvaluator）的內部實現原理，並分別提供一個自定義Interpolator和自定義TypeEvalu

Android動畫之animation-list實現逐幀動畫

簡介 幀動畫（Frame Animation又稱Drawable Animation）是最簡單的Android動畫效果，其與電影多重連續幀播放原理相似，通過視覺殘留來讓人感知到動畫效果。其實現方式是將

Android動畫解析（一）-----逐幀動畫和補間動畫

今天專案又用到了動畫，發現之前掌握的那些又遺忘了不少，趁著有時間，再重新捋順一邊。 Android中的動畫分為 逐幀動畫，補間動畫，屬性動畫 三種. 逐幀動畫（Frame Animation） 逐幀動畫：就像GIF圖片一樣，通過一系列的Drawab

Android動畫系列（一）

動畫是Android一個相當重要的組成部分，作為安卓開發者也許多多少少用過一些動畫三方庫。我一直想要系統的整理一下動畫相關的知識。在網上逛了逛，發現很多都已經總結過了，啟航的自定義控制元件三部曲是他花費大心思寫的。真心很不錯，鴻洋也寫過類似動畫的文章，郭神也發過

Android動畫篇（一）：圓形進度條CircleProgressBar

前言 最近看框架和原始碼比較多，很久沒有寫動畫了，相信很多的朋友都對動畫感興趣，我也不例外，畢竟做前端還是要靠動畫特效吃飯的，並且比寫功能模組更有成就感。 今天我們就來個稍微簡單一點的CircleProgressBar熱個身。 首先需要對ValueAnim

Android動畫學習篇(一)【TweenAnimation】

動畫基礎篇學習之TweenAnimation     基於上一篇我們簡單的提到了ObjectAnimator動畫，這一篇我們一起學習一下動畫初級篇（檢視動畫/補間動畫），檢視動畫使用比較簡單，它提供

Android 屬性動畫（Property Animation）一

1、概述 Android提供了幾種動畫型別：View Animation 、Drawable Animation 、Property Animation 。View Animation相當簡單，不過只能支援簡單的縮放、平移、旋轉、透明度基本的動畫，且有一定的侷限

Android 屬性動畫（Property Animation） 全然解析 （上）

顏色 valid 全部 加速度 ext target ng- 點擊 save 轉載請標明出處：http://blog.csdn.net/lmj623565791/article/details/380674751、概述Android提供了幾種動畫類型：View Anima

Android 屬性動畫（Property Animation） 完全解析 （上）【轉】

轉載請標明出處：http://blog.csdn.net/lmj623565791/article/details/38067475 1、概述 Android提供了幾種動畫型別：View Animation 、Drawable Animation 、Property Anima

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

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

Android 屬性動畫（Property Animation） 完全解析 （上）

目錄(?)[+] 1、概述 Android提供了幾種動畫型別：View Animation 、Drawable Animation 、Property Animation 。View Animation相當簡單，不過只能支援簡單的縮放、平移、旋轉、透明度基本的動畫，

【Android 動畫】View Animation詳解（一）

安卓平臺目前提供了兩大類動畫，在Android 3.0之前，一大類是View Animation，包括Tween animation（補間動畫）,Frame animation（幀動畫），在android3.0中又引入了一個新的動畫系統：property ani

Android 動畫學習(一)之View Animation

Android動畫初步         動畫(Animation)在我們日常的Android開發工作當中使用得較為頻繁，尤其對於Android遊戲這個動畫的集合體，掌握動畫開發的重要性毋庸置疑。同