android屬性動畫，property animation-android property an

時間 2019-12-19

標籤 android 屬性動畫 property animation 欄目 Android 简体版

原文原文鏈接

1）Android中的動畫(animation)系統 android

Android 3.0(3)之前,支撐三種動畫(animation),逐幀動畫(animation)（Frame-by-Frame Animation,aka,Drawable Animation）,結構動畫(animation)（Layout Animation）,視圖動畫(animation)（View Animation）,後兩種又合稱爲補間動畫(animation)（Tween Animation）,Android3.0(3)引入了一種新的動畫(animation)系統:屬性(sex)動畫(animation)（Property Animation）.最新的sdk-docs中介紹動畫(animation)時,介紹了三種:Property Animation,View Animation, Drawable Animation. ide

Drawable Animation的效果是延續展現一幀一幀的圖片(pictures)資源(resources)（存放在res/drawable）,能設置的幾近唯獨距離時間;View Animation的效果是改變整個View（必須是View）的繪製效果,譬如縮放,旋轉,平移,alpha透明度(transparency)等等,然而它的現實屬性(sex)值沒有改變,譬如你縮小了 Button 的鉅細,它的有用點擊(click-on-the)區域卻不變,因爲它的位置和鉅細屬性(sex)沒更改. 佈局

2）Property Animation原理(principle) 學習

到 Protery Animation,它還能夠對 non-View 對象生成動畫(animation),改變的是對象的現實屬性(sex),譬如 Button 縮放,它的位置和鉅細屬性(sex)值隨之更改,不但功能比前兩種強盛,生成動畫(animation)也更加穩定.於是,官方 Document 推薦使用 Property Animation.Property中能夠更改的屬性(sex)值有:（ Document 有詳細介紹）優化

1）Duration:動畫(animation)持續時間; 2）TimeInterpolation:插值器告訴動畫(animation)某個屬性(sex)（譬如 color 漸變）若何隨時間變化; 3）Repeat count and behavior:動畫(animation)的重複 time 與體式格局; 4）Animator sets:動畫(animation)聚攏,能夠打包(package)多個動畫(animation),並且操縱它們的時序; 5）Frame refresh delay:若干時間刷新一次,即每隔若干時間計量一次屬性(sex)值,默許爲10ms,終究刷新時間還受系統進程調度(scheduling)與硬件(hardware)的影響 .

Protery Animation的工做(work)流程如圖:

能夠看到一個 ValueAnimator（Value 動畫(animation)生成器）裏囊括,一個TimeInterpolator（插值器,稍後會有介紹）,一個TypeEvaluator（類型求值器,稍後會介紹）,duration（持續時間）,startPropertyValue（動畫(animation)開始時的屬性(sex)值）,endPropertyValue（結束時的屬性(sex)值）,start()（動畫(animation)開始）; 動畫

若是要修改動畫(animation)屬性(sex)值,須要實現接口ValueAnimator.AnimatorUpdateListener,這個接口中包含一個抽象方法:onAnimationUpdate(),這個方法在動畫(animation)中的每幀都邑被調用,經由過程監聽這個事件(event),在屬性(sex)值更新(update)時執行響應的操做,固然在得到變動的值時須要調用 getAnimatedValue() ,即 Property Animation的本質是,使用TimeInterpolator和TypeEvaluator改變對象的屬性(sex),之後每幀都調用getAnimatedValue()得到實時屬性(sex)值,並生成每幀的畫面,延續顯示構成動畫(animation). ui

此外,也可以繼承(inheritance)AnimatorListenerAdapter類,而不是實現Animator.AnimatorListener接口,用來簡化工做(work),因爲接口須要實現裏邊包含的全部方法（包含onAnimationStart(),onAnimationEnd(),onAnimationRepeat(),onAnimationCancel()四個方法）,而AnimatorListenerAdapter能夠選擇(select)性(sex)的重寫須要的方法,相干詳細內容(content)能夠看官方 Document . this

3）TimeInterpolator lua

須要先介紹一下插值器,插值器告訴動畫(animation)某個屬性(sex)若何隨時間變化,它以線性(sex)體式格局變化,仍是以指數體式格局變化,仍是先快後慢等等.支撐的插值器囊括: spa

AccelerateDecelerateInterpolator(先加速後減速)

An interpolator whose rate of change starts and ends slowly but accelerates through the middle.

AccelerateInterpolator(加速)

An interpolator whose rate of change starts out slowly and then accelerates.

AnticipateInterpolator(先反偏向,後正偏向)

An interpolator whose change starts backward then flings forward.

AnticipateOvershootInterpolator(先反向,後向前超出目的值,再移回目的值) An interpolator whose change starts backward, flings forward and overshoots the target value, then

finally goes back to the final value.

BounceInterpolator(跳躍,到目的值後有反彈效果)

An interpolator whose change bounces at the end.

CycleInterpolator(輪迴,輪迴指定 time )

An interpolator whose animation repeats for a specified number of cycles

DecelerateInterpolator(減速)

An interpolator whose rate of change starts out quickly and and then decelerates.

LinearInterpolator(線性(sex),平均改變)

An interpolator whose rate of change is constant.

OvershootInterpolator(超出,超過目的值而後返回)

An interpolator whose change flings forward and overshoots the last value then comes back.

TimeInterpolator(一個接口,容許自界說 interpolator)

An interface that allows you to implement your own interpolator.

⁂

接下來用一個實例來介紹 Propery Animation的相干使用方法, video 演示:（ secure 是123,o(╯□╰)o,拍的偏向反了）,代碼(code)打包(package)最後有連接(link).

雖然很明顯,然而上邊 video 中的XML結構 file 爲:（後邊 example 中會用到）,須要提前解釋的是,Android手機(mobile-phone)中座標的原點是左上角（0, 0）, 右下角是（width, height）.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    tools:context=".PropertyAnimationActivity" >

    <Button
        android:id="@+id/btn_st_animation1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="testObjectAnimator"
        android:text="Object Animator" />

    <Button
        android:id="@+id/btn_st_animation2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="testAnimationSet"
        android:text="Animation Set" />

    <Button
        android:id="@+id/btn_st_animation3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="testAnimationXML"
        android:text="AnimationXML" />

    <Button
        android:id="@+id/btn_st_animation4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="testPropertyValuesHolder"
        android:text="PropertyValuesHolder" />

    <Button
        android:id="@+id/btn_st_animation5"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="testViewPropertyAnimator"
        android:text="ViewPropertyAnimator" />

    <Button
        android:id="@+id/btn_st_animation6"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="testTypeEvaluator"
        android:text="Type Evaluator" />

    <Button
        android:id="@+id/btn_st_animation7"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="testKeyFrames"
        android:text="Key Frames" />

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >


        <TextView
            android:id="@+id/tv_id"
            android:layout_width="fill_parent"
            android:layout_height="178dp"
            android:background="@color/blue"
            android:text="@string/hello"
            android:textColor="@color/white" />
    </LinearLayout>

</LinearLayout>

Android Property Animationhttp://osthing.com/

4）Objet Animator

ObjectAnimator 是 ValueAnimator的一個子類,普通使用較多的是 ObjectAnimator,因爲它沒必要實現ValueAnimator.AnimatorUpdateListener,它的屬性(sex)值能夠自動更新(update).使用時,指定一個對象及該對象的屬性(sex)值,當屬性(sex)值計量完成時,會自動設置爲該對象的響應屬性(sex).使用ObjectAnimator要知足的條件以下:

1）對象必須有一個setter方法:set<PropertyName>（駝峯定名法） 2）譬以下邊的代碼(code)中的ofFloat方法,第一個參數(parameter)爲對象名,第二個爲屬性(sex)名（PropertyName,String類型）,後邊爲可變參數(parameter),若是後邊一個值,則默許是屬性(sex)目標(target)值;若是是兩個值,則是肇端值和目標(target)值;要得到當前屬性(sex)值,該對象要有響應屬性(sex)的getter方法:get<PropertyName>.getter方法和setter方法需有溝通的

參數(parameter)類型.

上邊 video 中的第一個按鈕,對應的就是ObjectAnimator,基礎的的動畫(animation)操做,代碼(code):

/*
	 * 單個動畫(animation)
	 */
	public void testObjectAnimator(View btnView) {
		float width = m_tv.getWidth();
		if (m_tv.getX() == 0) {
			ObjectAnimator translationRight = ObjectAnimator.
					ofFloat(m_tv, "X", width);
			translationRight.setDuration(1500);
			translationRight.start();
		} else {
			ObjectAnimator translationLeft = 
					ObjectAnimator.ofFloat(m_tv, "X", 0f);
			translationLeft.setDuration(1500);
			translationLeft.start();
		}
	}

Android Property Animation[android-property-animation]

每次點擊(click-on-the),只實現一個動畫(animation),右移或左移,持續時間爲1500毫秒;

此外,根據運用動畫(animation)的對象或屬性(sex)的不一樣,可能須要在 onAnimationUpdate() 中調用 invalidate() 方法來強迫刷新視圖.

還有一個不能不提的是,在 Fragment（碎片）上實現自界說動畫(animation)的機制也要依靠ObjectAnimator類,相干內容(content)能夠去Google下.

⁂

上邊代碼(code)改變的是對象的X值,補充一下Property Animation中能夠設置的屬性(sex)值:

translationX and translationY: These properties control where the View is located as a delta from its left and top coordinates which are set by its layout container. (平移的距離） rotation, rotationX, and rotationY: These properties control the rotation in 2D (rotation property) and 3D around the pivot point. （旋轉,支點是（pivotX, pivotY）,rotation用於2D旋轉,3D用到後兩個）. scaleX and scaleY: These properties control the 2D scaling of a View around its pivot point. （縮放） pivotX and pivotY: These properties control the location of the pivot point, around which the rotation and scaling transforms occur. By default, the pivot point is located at the center of the object. (設置支點,默許支點在對象的正中心) x and y: These are simple utility properties to describe the final location of the View in its container, as a sum of the left and top values and translationX and translationY values. （X軸Y軸座標） alpha: Represents the alpha transparency on the View. This value is 1 (opaque) by default, with a value of 0 representing full transparency (not visible).（透明度(transparency),1表明徹底可見,0表明弗成見） ⁂

5）Animation Set

行使 Animation Set,能夠播放多個動畫(animation),並且能夠操縱它們的時序瓜葛,比猶如時播放, sortorder 播放等.設置 sortorder 有兩種方法:

第一種是使用 playSequentially() 和 playTogether(),分別表示 sortorder 執行和同時執行,譬以下邊代碼(code)中註釋掉的內容(content);

第二種是使用play()方法,它返回一個叫作 AnimatorSet.Builder 的類,這個類中的方法囊括 after(animator),before(animator),with(animator), 分別表示之後,之前和同時舉行.

上邊 video ,第二個按鈕實現的效果:左上角到右下角,再從右下角到左上角,就是上下襬布四個寧神行使Animation Set組合構成.

//延續動畫(animation)
	public void testAnimationSet(View v) {
		float width = m_tv.getWidth();
		float height = m_tv.getHeight();
		ObjectAnimator translationRight = ObjectAnimator.ofFloat(m_tv, "X", width);
		ObjectAnimator translationLeft = ObjectAnimator.ofFloat(m_tv, "X", 0f);
		ObjectAnimator translationDown = ObjectAnimator.ofFloat(m_tv, "Y",
				height);
		ObjectAnimator translationUp = ObjectAnimator.ofFloat(m_tv, "Y", 0);

		AnimatorSet as = new AnimatorSet();
		as.play(translationRight).before(translationLeft);
		as.play(translationRight).with(translationDown);
		as.play(translationLeft).with(translationUp);

		// 和上邊四句等效,此外一種寫法
        /*
		AnimatorSet as = new AnimatorSet();
		as.playTogether(translationRight, translationDown);
		as.playSequentially(translationRight, translationLeft);
		as.playTogether(translationLeft, translationUp);
        */
		as.setDuration(1500);
		as.start();
	}

1）Android中的動畫系統 Android 3.0以前，支持三種動畫，逐幀動畫（Frame-by-Frame Animation，aka，Drawable Animation），佈局動畫（Layout Animation），視圖動畫（View Animation），後兩種又合稱爲補間動畫（Tween Animation），Android3.0引入了一種新的動畫

6）使用XML加載動畫(animation)

Property Animation可以使用XML聲明動畫(animation),這樣作的益處是動畫(animation)代碼(code)的重用,符合 DRY 原則（Don’t Repeat Yourself）,將界說好的動畫(animation) file 放到/res/animator/目錄下,注重不是/res/anim/目錄,/res/anim/是non-Property Animation的動畫(animation)目錄,新增添的/res/animator/專爲Property Animation預留.援用體式格局爲:

In Java: R.animator. filename In XML: @[ package:]animator/ filename

譬如上邊第三個按鈕中的,淡入淡出效果的XML file :

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

    <objectAnimator
        android:duration="2000"
        android:interpolator="@android:interpolator/accelerate_cubic"
        android:propertyName="alpha"
        android:valueFrom="1"
        android:valueTo="0"
        android:valueType="floatType" />
    <objectAnimator
        android:duration="2000"
        android:interpolator="@android:interpolator/accelerate_cubic"
        android:propertyName="alpha"
        android:valueFrom="0"
        android:valueTo="1"
        android:valueType="floatType" />

</set>

Android Property Animation[android-property-animation]

裏邊會用到的標籤(label)很少,對應瓜葛以下:

ValueAnimator-<animator> ObjectAnimator-<objectAnimator> AnimatorSet-<set>

關於Property Animation中XML的更多資料,能夠去這裏看.

加載XML動畫(animation) file 的代碼(code)很簡單,第三個按鈕代碼(code):

/*
	 * XML,便於代碼(code)重用
	 */
	public void testAnimationXML(View bView) {
		m_tv.setAlpha(1f);
		AnimatorSet set = (AnimatorSet) AnimatorInflater.loadAnimator(this,
				R.animator.fadein);
		set.setTarget(m_tv);
		set.start();
	}

Android Property Animation[android-property-animation]

7）PropertyValuesHolder

前邊提到的都是,若何給一個動畫(animation)設置一個屬性(sex)值,PropertyValuesHolder 類能夠給一個動畫(animation)設置多個屬性(sex)值.上邊第四個按鈕的功能是從右下角移動到左上角,彈跳效果是由 Elasticity 插值器（Bounce Interpolator()）實現的,前邊已提到過.代碼(code)以下:

/*
	 * 一個動畫(animation)改變多個屬性(sex)值
	 */
	public void testPropertyValuesHolder(View v) {
		m_tv.setAlpha(1f);
		float h = m_tv.getHeight();
		float w = m_tv.getWidth();
		float x = m_tv.getX();
		float y = m_tv.getY();

		m_tv.setX(w);
		m_tv.setY(h);
		PropertyValuesHolder pvhX = PropertyValuesHolder.ofFloat("x", x);
		PropertyValuesHolder pvhY = PropertyValuesHolder.ofFloat("y", y);

		ObjectAnimator oa = ObjectAnimator.ofPropertyValuesHolder(m_tv, pvhX,
				pvhY);
		oa.setDuration(3000);
		// oa.setInterpolator(new AccelerateDecelerateInterpolator());
		oa.setInterpolator(new BounceInterpolator());
		oa.start();
	}

Android Property Animationhttp://osthing.com/

8）ViewPropertyAnimator

ViewPropertyAnimator是在Android3.1中新增添的動畫(animation),這個類對多屬性(sex)動畫(animation)舉行了優化(optimization),匯歸併一些 invalidate() 來削減刷新視圖.上邊第五個按鈕,代碼(code):

/*
	 * 一個View的多個屬性(sex)舉行動畫(animation),3.1中引入,對多屬性(sex)動畫(animation)舉行了優化(optimization)
	 */
	public void testViewPropertyAnimator(View v) {
		m_tv.setAlpha(1f);
		float h = m_tv.getHeight();
		float w = m_tv.getWidth();
		float x = m_tv.getX();
		float y = m_tv.getY();

		m_tv.setX(w);
		m_tv.setY(h);

		ViewPropertyAnimator vpa = m_tv.animate().x(x).y(y);

		vpa.setDuration(1500);
		vpa.setInterpolator(new BounceInterpolator());
	}

Android Property Animationhttp://osthing.com/

它的實現 sortorder 是:

1）用animate()方法從m_tv中得到一個ViewPropertyAnimator; 2）使用ViewPropertyAnimator設置不一樣屬性(sex),譬如x, y, scale, alpha等.

3）而後UI線程(thread)會自動開始生成動畫(animation),不用start()方法.

關於ViewPropertyAnimator,Chet Haase （Google 圖形(graphics)動畫(animation)工程師,這個類估計是他寫的吧）的這篇《Introducing ViewPropertyAnimator》估計是最詳細的.

9）TypeEvaluator

Android 支撐4種求值器（Evaluator）,須要注重的是,它支撐Android的全部動畫(animation)系統,不但Propery Animation.它提供瞭如下幾種Evalutor:

IntEvaluator:屬性(sex)的值類型爲int;
FloatEvaluator:屬性(sex)的值類型爲float;
ArgbEvaluator:屬性(sex)的值類型爲十六進制 color 值;
TypeEvaluator:一個接口,能夠經由過程實現該接口自界說Evaluator.

上邊第六個按鈕中自界說了一個Evaluator,它實現了TypeEvaluator接口,而後重寫 evaluate() 方法.這裏是觸及座標的兩個值,行使 startPropertyValue、endPropertyValue、fraction 求當前座標,代碼(code):

package net.mindlee.android.propertyanimation;

import android.animation.TypeEvaluator;
import android.graphics.PointF;

public class MyPointEvaluator implements TypeEvaluator<PointF> {
	public PointF evaluate(float fraction, PointF startValue, PointF endValue) {
		PointF startPoint = (PointF) startValue;
		PointF endPoint = (PointF) endValue;
		return new PointF(
				startPoint.x + fraction * (endPoint.x - startPoint.x),
				startPoint.y + fraction * (endPoint.y - startPoint.y));
	}
}

1）Android中的動畫(animation)系統 Android 3.0(3)之前,支撐三種動畫(animation),逐幀動畫(animation)（Frame-by-Frame Animation,aka,Drawable Animation）,結構動畫(animation)（Layout Animation）,視圖動畫(animation)（View Animatio

箇中的 fraction 來自 Interplator,此外,能夠把 Point的 setPoint(),getPoint() 等方法封裝爲一個類,因爲咱們每幀都要調用它們,以下:

package net.mindlee.android.propertyanimation;

import android.graphics.PointF;
import android.view.View;

public class MyAnimatableView {
	PointF curPoint = null;
	View m_v = null;

	public MyAnimatableView(View v) {
		curPoint = new PointF(v.getX(), v.getY());
		m_v = v;
	}

	public PointF getCurPointF() {
		return curPoint;
	}

	public void setPoint(PointF p) {
		curPoint = p;
		m_v.setX(p.x);
		m_v.setY(p.y);
	}
}

android-property-animation

那末實現上邊第六個按鈕的代碼(code)就是:

/*
	 * 自界說Evaluator
	 */
	public void testTypeEvaluator(View v) {
		m_tv.setAlpha(1f);

		float h = m_tv.getHeight();
		float w = m_tv.getWidth();
		float x = m_tv.getX();
		float y = m_tv.getY();

		ObjectAnimator tea = ObjectAnimator.ofObject(m_atv, "point",
				new MyPointEvaluator(), new PointF(w, h), new PointF(x, y));
		tea.setDuration(2000);
		tea.setInterpolator(new OvershootInterpolator());
		tea.start();

	}

10）KeyFrames

一個關鍵幀包含一個【時間/值】對,經由過程它能夠界說一個在特定時間的特定狀態,並且每一個KeyFrame能夠設置不一樣的Interpolator,效果範圍是它的前一個keyFrame和它自身之間.能夠經由過程ofInt(),ofFloat(),ofObject() 得到適量的KeyFrame,而後經由過程 PropertyValuesHolder.ofKeyframe 得到PropertyValuesHolder對象,譬如第七個按鈕中的旋轉效果,代碼(code):

/*
	 * 關鍵幀
	 */
	public void testKeyFrames(View v) {
		float h = m_tv.getHeight();
		float w = m_tv.getWidth();
		float x = m_tv.getX();
		float y = m_tv.getY();

		Keyframe kf0 = Keyframe.ofFloat(0.2f, 360);
		Keyframe kf1 = Keyframe.ofFloat(0.5f, 30);
		Keyframe kf2 = Keyframe.ofFloat(0.8f, 1080);
		Keyframe kf3 = Keyframe.ofFloat(1f, 0);
		PropertyValuesHolder pvhRotation = PropertyValuesHolder.ofKeyframe(
				"rotation", kf0, kf1, kf2, kf3);

		PropertyValuesHolder pvhX = PropertyValuesHolder.ofFloat("x", w, x);
		PropertyValuesHolder pvhY = PropertyValuesHolder.ofFloat("y", h, y);

		ObjectAnimator anim = ObjectAnimator.ofPropertyValuesHolder(m_tv,
				pvhRotation, pvhX, pvhY);
		anim.setDuration(2000);
		anim.start();
	}

Android Property Animation[android-property-animation]

徹底代碼(code)@GihHub:能夠 Fork 或 打包(package)下載(download).

參考資料:Android官方 Document :Develop,API Guides,Property Animation

Android Developers Blog: Animation in Honeycomb

Android Developers Blog: Introducing ViewPropertyAnimator

《Android動畫(animation)學習(learning)筆記》

《Pro Android 4》,Chapter 21,Exploring 2D Animation