1. 程式人生 > >Android 屬性動畫(Property Animation) 全然解析 (上)

Android 屬性動畫(Property Animation) 全然解析 (上)

顏色 valid 全部 加速度 ext target ng- 點擊 save

轉載請標明出處:http://blog.csdn.net/lmj623565791/article/details/38067475

1、概述

Android提供了幾種動畫類型:View Animation 、Drawable Animation 、Property Animation 。View Animation相當簡單,只是僅僅能支持簡單的縮放、平移、旋轉、透明度主要的動畫。且有一定的局限性。

比方:你希望View有一個顏色的切換動畫。你希望能夠使用3D旋轉動畫;你希望當動畫停止時。View的位置就是當前的位置;這些View Animation都無法做到。

這就是Property Animation產生的原因。本篇博客具體介紹Property Animation的使用方法。

至於Drawable Animation。嗯,略~

2、相關API

Property Animation故名思議就是通過動畫的方式改變對象的屬性了,我們首先須要了解幾個屬性:

Duration動畫的持續時間,默認300ms。

Time interpolation:時間差值,乍一看不知道是什麽。可是我說LinearInterpolator、AccelerateDecelerateInterpolator,大家一定知道是幹嘛的了,定義動畫的變化率。

Repeat count and behavior:反復次數、以及反復模式;能夠定義反復多少次;反復時從頭開始。還是反向。

Animator sets: 動畫集合,你能夠定義一組動畫。一起運行或者順序運行。

Frame refresh delay:幀刷新延遲,對於你的動畫,多久刷新一次幀;默覺得10ms,但終於依賴系統的當前狀態。基本不用管。

相關的類

ObjectAnimator 動畫的運行類。後面具體介紹

ValueAnimator 動畫的運行類。後面具體介紹

AnimatorSet 用於控制一組動畫的運行:線性,一起,每一個動畫的先後運行等。

AnimatorInflater 用戶載入屬性動畫的xml文件

TypeEvaluator 類型估值。主要用於設置動畫操作屬性的值。

TimeInterpolator 時間插值,上面已經介紹。

總的來說。屬性動畫就是。動畫的運行類來設置動畫操作的對象的屬性、持續時間,開始和結束的屬性值,時間差值等,然後系統會依據設置的參數動態的變化對象的屬性。

3、ObjectAnimator實現動畫

之所以選擇ObjectAnimator為第一個~~是由於。這個實現最簡單~~一行代碼,秒秒鐘實現動畫。以下看個樣例:
布局文件:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/id_container" >

    <ImageView
        android:id="@+id/id_ball"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:src="@drawable/mv" 
        android:scaleType="centerCrop"
        android:onClick="rotateyAnimRun"
        />

</RelativeLayout>

非常easy,就一張妹子圖片~
Activity代碼:

package com.example.zhy_property_animation;

import android.animation.ObjectAnimator;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;

public class ObjectAnimActivity extends Activity
{
	@Override
	protected void onCreate(Bundle savedInstanceState)
	{
		super.onCreate(savedInstanceState);
		setContentView(R.layout.xml_for_anim);
	}

	public void rotateyAnimRun(View view)
	{
		 ObjectAnimator//
		 .ofFloat(view, "rotationX", 0.0F, 360.0F)//
		 .setDuration(500)//
		 .start();
	}

}

效果:

技術分享

是不是一行代碼就能實現簡單的動畫~~

對於ObjectAnimator

1、提供了ofInt、ofFloat、ofObject。這幾個方法都是設置動畫作用的元素、作用的屬性、動畫開始、結束、以及中間的隨意個屬性值。

當對於屬性值,僅僅設置一個的時候,會覺得當然對象該屬性的值為開始(getPropName反射獲取)。然後設置的值為終點。假設設置兩個,則一個為開始、一個為結束~~~

動畫更新的過程中,會不斷調用setPropName更新元素的屬性,全部使用ObjectAnimator更新某個屬性,必須得有getter(設置一個屬性值的時候)和setter方法~

2、假設你操作對象的該屬性方法裏面。比方上例的setRotationX假設內部沒有調用view的重繪。則你須要自己依照以下方式手動調用。

anim.addUpdateListener(new AnimatorUpdateListener()
		{
			@Override
			public void onAnimationUpdate(ValueAnimator animation)
			{
//				view.postInvalidate();
//				view.invalidate();
			}
		});
3、看了上面的樣例,由於設置的操作的屬性僅僅有一個。那麽假設我希望一個動畫能夠讓View既能夠縮小、又能夠淡出(3個屬性scaleX,scaleY,alpha)。僅僅使用ObjectAnimator咋弄?

想法是不是非常不錯,可能會說使用AnimatorSet啊。這一看就是一堆動畫塞一起運行,可是我偏偏要用一個ObjectAnimator實例實現呢~以下看代碼:

	public void rotateyAnimRun(final View view)
	{
		ObjectAnimator anim = ObjectAnimator//
				.ofFloat(view, "zhy", 1.0F,  0.0F)//
				.setDuration(500);//
		anim.start();
		anim.addUpdateListener(new AnimatorUpdateListener()
		{
			@Override
			public void onAnimationUpdate(ValueAnimator animation)
			{
				float cVal = (Float) animation.getAnimatedValue();
				view.setAlpha(cVal);
				view.setScaleX(cVal);
				view.setScaleY(cVal);
			}
		});
	}

把設置屬性的那個字符串。隨便寫一個該對象沒有的屬性,就是無論~~咱們僅僅須要它依照時間插值和持續時間計算的那個值,我們自己手動調用~

效果:

技術分享

這個樣例就是想說明一下,有時候換個思路不要被API所約束,利用部分API提供的功能也能實現好玩的效果~~~

比方:你想實現拋物線的效果,水平方向100px/s,垂直方向加速度200px/s*s ,咋實現呢~~能夠自己用ObjectAnimator試試~

4、事實上還有更簡單的方式,實現一個動畫更改多個效果:使用propertyValuesHolder

public void propertyValuesHolder(View view)
	{
		PropertyValuesHolder pvhX = PropertyValuesHolder.ofFloat("alpha", 1f,
				0f, 1f);
		PropertyValuesHolder pvhY = PropertyValuesHolder.ofFloat("scaleX", 1f,
				0, 1f);
		PropertyValuesHolder pvhZ = PropertyValuesHolder.ofFloat("scaleY", 1f,
				0, 1f);
		ObjectAnimator.ofPropertyValuesHolder(view, pvhX, pvhY,pvhZ).setDuration(1000).start();
	}


4、ValueAnimator實現動畫

和ObjectAnimator使用方法非常相似,簡單看一下用view垂直移動的動畫代碼:

public void verticalRun(View view)
	{
		ValueAnimator animator = ValueAnimator.ofFloat(0, mScreenHeight
				- mBlueBall.getHeight());
		animator.setTarget(mBlueBall);
		animator.setDuration(1000).start();
	}

給你的感覺是不是。坑爹啊。這和ValueAnimator有毛線差別~可是細致看,你看會發現。沒有設置操作的屬性~~也就是說,上述代碼是沒有不論什麽效果的,沒有指定屬性~

這就是和ValueAnimator的差別之處:ValueAnimator並沒有在屬性上做操作,你可能會問這樣有啥優點?我豈不是還得手動設置?

優點:不須要操作的對象的屬性一定要有getter和setter方法,你能夠自己依據當前動畫的計算值,來操作不論什麽屬性。記得上例的那個【我希望一個動畫能夠讓View既能夠縮小、又能夠淡出(3個屬性scaleX,scaleY,alpha)】嗎?事實上就是這麽個使用方法~

實例:

布局文件:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    android:id="@+id/id_container"
  
    >

    <ImageView
        android:id="@+id/id_ball"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/bol_blue" />

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal" >

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="verticalRun"
            android:text="垂直" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="paowuxian"
            android:text="拋物線" />

    </LinearLayout>

</RelativeLayout>
左上角一個小球,底部兩個button~我們先看一個自由落體的代碼:

/**
	 * 自由落體
	 * @param view
	 */
	public void verticalRun( View view)
	{
		ValueAnimator animator = ValueAnimator.ofFloat(0, mScreenHeight
				- mBlueBall.getHeight());
		animator.setTarget(mBlueBall);
		animator.setDuration(1000).start();
//		animator.setInterpolator(value)
		animator.addUpdateListener(new AnimatorUpdateListener()
		{
			@Override
			public void onAnimationUpdate(ValueAnimator animation)
			{
				mBlueBall.setTranslationY((Float) animation.getAnimatedValue());
			}
		});
	}

與ObjectAnimator不同的就是我們自己設置元素屬性的更新~盡管多了幾行代碼。可是貌似提高靈活性~

以下再來一個樣例。假設我希望小球拋物線運動【實現拋物線的效果,水平方向100px/s,垂直方向加速度200px/s*s 】,分析一下,貌似僅僅和時間有關系。可是依據時間的變化。橫向和縱向的移動速率是不同的。我們該咋實現呢?此時就要重寫TypeValue的時候了,由於我們在時間變化的同一時候。須要返回給對象兩個值,x當前位置,y當前位置:

代碼:

/**
	 * 拋物線
	 * @param view
	 */
	public void paowuxian(View view)
	{

		ValueAnimator valueAnimator = new ValueAnimator();
		valueAnimator.setDuration(3000);
		valueAnimator.setObjectValues(new PointF(0, 0));
		valueAnimator.setInterpolator(new LinearInterpolator());
		valueAnimator.setEvaluator(new TypeEvaluator<PointF>()
		{
			// fraction = t / duration
			@Override
			public PointF evaluate(float fraction, PointF startValue,
					PointF endValue)
			{
				Log.e(TAG, fraction * 3 + "");
				// x方向200px/s ,則y方向0.5 * 10 * t
				PointF point = new PointF();
				point.x = 200 * fraction * 3;
				point.y = 0.5f * 200 * (fraction * 3) * (fraction * 3);
				return point;
			}
		});

		valueAnimator.start();
		valueAnimator.addUpdateListener(new AnimatorUpdateListener()
		{
			@Override
			public void onAnimationUpdate(ValueAnimator animation)
			{
				PointF point = (PointF) animation.getAnimatedValue();
				mBlueBall.setX(point.x);
				mBlueBall.setY(point.y);

			}
		});
	}
能夠看到,由於ofInt,ofFloat等無法使用,我們自己定義了一個TypeValue,每次依據當前時間返回一個PointF對象,(PointF和Point的差別就是x,y的單位一個是float,一個是int;RectF,Rect也是)PointF中包括了x,y的當前位置~然後我們在監聽器中獲取,動態設置屬性:

效果圖:

技術分享

有木有兩個鐵球同一時候落地的感覺~~對。我應該搞兩個球~~ps:物理公式要是錯了,就當沒看見哈

自己定義TypeEvaluator傳入的泛型能夠依據自己的需求,自己設計個Bean。

好了,我們已經分別解說了ValueAnimator和ObjectAnimator實現動畫。二者差別;怎樣利用部分API。自己更新屬性實現效果;自己定義TypeEvaluator實現我們的需求;可是我們並沒有講怎樣設計插值,事實上我覺得把,這個插值默認的那一串實現類夠用了~~非常少,會自己去設計個超級變態的~嗯~所以:略。

5、監聽動畫的事件

對於動畫,一般都是一些輔助效果,比方我要刪除個元素,我可能希望是個淡出的效果,可是終於還是要刪掉,並非你透明度沒有了,還占著位置。所以我們須要知道動畫怎樣結束。

所以我們能夠加入一個動畫的監聽:

public void fadeOut(View view)
	{
		ObjectAnimator anim = ObjectAnimator.ofFloat(mBlueBall, "alpha", 0.5f);
		
		anim.addListener(new AnimatorListener()
		{

			@Override
			public void onAnimationStart(Animator animation)
			{
				Log.e(TAG, "onAnimationStart");
			}

			@Override
			public void onAnimationRepeat(Animator animation)
			{
				// TODO Auto-generated method stub
				Log.e(TAG, "onAnimationRepeat");
			}

			@Override
			public void onAnimationEnd(Animator animation)
			{
				Log.e(TAG, "onAnimationEnd");
				ViewGroup parent = (ViewGroup) mBlueBall.getParent();
				if (parent != null)
					parent.removeView(mBlueBall);
			}

			@Override
			public void onAnimationCancel(Animator animation)
			{
				// TODO Auto-generated method stub
				Log.e(TAG, "onAnimationCancel");
			}
		});
		anim.start();
	}

這樣就能夠監聽動畫的開始、結束、被取消、反復等事件~可是有時候會覺得,我僅僅要知道結束即可了,這麽長的代碼我不能接收,那你能夠使用AnimatorListenerAdapter

		anim.addListener(new AnimatorListenerAdapter()
		{
			@Override
			public void onAnimationEnd(Animator animation)
			{
				Log.e(TAG, "onAnimationEnd");
				ViewGroup parent = (ViewGroup) mBlueBall.getParent();
				if (parent != null)
					parent.removeView(mBlueBall);
			}
		});

AnimatorListenerAdapter繼承了AnimatorListener接口,然後空實現了全部的方法~

效果圖:

技術分享

animator還有cancel()和end()方法:cancel動畫馬上停止,停在當前的位置。end動畫直接到終於狀態。

6、AnimatorSet的使用

實例:

布局文件:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    android:id="@+id/id_container"
   
    >

    <ImageView
        android:id="@+id/id_ball"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:src="@drawable/bol_blue" />

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal" >

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="togetherRun"
            android:text="簡單的多動畫Together" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="playWithAfter"
            android:text="多動畫按次序運行" />
        

    </LinearLayout>

</RelativeLayout>

繼續玩球~

代碼:

package com.example.zhy_property_animation;

import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.LinearInterpolator;
import android.widget.ImageView;

public class AnimatorSetActivity extends Activity
{
	private ImageView mBlueBall;

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

		mBlueBall = (ImageView) findViewById(R.id.id_ball);

	}

	public void togetherRun(View view)
	{
		ObjectAnimator anim1 = ObjectAnimator.ofFloat(mBlueBall, "scaleX",
				1.0f, 2f);
		ObjectAnimator anim2 = ObjectAnimator.ofFloat(mBlueBall, "scaleY",
				1.0f, 2f);
		AnimatorSet animSet = new AnimatorSet();
		animSet.setDuration(2000);
		animSet.setInterpolator(new LinearInterpolator());
		//兩個動畫同一時候運行
		animSet.playTogether(anim1, anim2);
		animSet.start();
	}

	public void playWithAfter(View view)
	{
		float cx = mBlueBall.getX();

		ObjectAnimator anim1 = ObjectAnimator.ofFloat(mBlueBall, "scaleX",
				1.0f, 2f);
		ObjectAnimator anim2 = ObjectAnimator.ofFloat(mBlueBall, "scaleY",
				1.0f, 2f);
		ObjectAnimator anim3 = ObjectAnimator.ofFloat(mBlueBall,
				"x",  cx ,  0f);
		ObjectAnimator anim4 = ObjectAnimator.ofFloat(mBlueBall,
				"x", cx);
		
		/**
		 * anim1,anim2,anim3同一時候運行
		 * anim4接著運行
		 */
		AnimatorSet animSet = new AnimatorSet();
		animSet.play(anim1).with(anim2);
		animSet.play(anim2).with(anim3);
		animSet.play(anim4).after(anim3);
		animSet.setDuration(1000);
		animSet.start();
	}
}

寫了兩個效果:

第一:使用playTogether兩個動畫同一時候運行,當然還有playSequentially依次運行~~

第二:假設我們有一堆動畫,怎樣使用代碼控制順序,比方1,2同一時候;3在2後面。4在1之前等~就是效果2了

有一點註意:animSet.play().with();也是支持鏈式編程的。可是不要想著狂點。比方 animSet.play(anim1).with(anim2).before(anim3).before(anim5); 這樣是不行的,系統不會依據你寫的這一長串來決定先後的順序。所以麻煩你依照上面樣例的寫法,多寫幾行:

效果圖:

技術分享


好了,由於篇幅~~關於屬性動畫還有點知識:

1、xml文件創建屬性動畫

2、布局動畫

3、View的animate方法等。

那就考慮寫到下一篇了。只是核心的功能就這些了~~

對了,假設使用11以下的SDK 。請導入nineoldandroids動畫庫。使用方法基本全然一致~


源代碼點擊下載










Android 屬性動畫(Property Animation) 全然解析 (上)