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