您的位置:首页 > 运维架构

属性动画(property animation) &重复执行

2015-12-17 17:46 387 查看
Android中的动画分为视图动画(View Animation)即Tween Animation(补间动画)、属性动画(Property Animation)以及Drawable动画即Frame Animation(帧动画)。从Android 3.0(API Level 11)开始,Android开始支持属性动画,本文主要讲解如何使用属性动画。

视图动画和属性动画的优劣

视图动画局限比较大,如下所述:

1.视图动画只能使用在View上面。

2.视图动画并没有真正改变View相应的属性值,这导致了UI效果与实际View状态存在差异,并导致了一系列怪异行为,比如在使用了视图动画TranslateAnimation的View的UI上对其触摸,你可能惊讶地发现并没有触发触摸事件。

3.视图动画使用相当简单,不过只能支持简单的缩放、平移、旋转、透明度基本的动画,且有一定的局限性。比如:你希望View有一个颜色的切换动画;你希望可以使用3D旋转动画;你希望当动画停止时,View的位置就是当前的位置;这些视图动画都无法做到。

鉴于视图动画以上缺陷,从Android 3.0引入了属性动画。属性动画具有以下特性:

1.属性动画应用面更广,不仅仅应用于View,可以将其应用到任意的对象上面,且该对象不需要具有UI界面。

2.当将属性动画作用于某个对象时,可以通过调用对象的setXXX方法实际改变对象的值。所以,当将属性动画作用于某个View时,View对象对应的属性值会被改变。

属性动画工作原理

其实属性动画的工作原理并不复杂,假设一个对象有一个属性x,我们想通过属性动画动态更改该值,假设我们想在40ms内将x的值从0渐变到40,着时间的增长,对应的x值也相应地线性渐变,当动画完成时,x的值就是我们设置的最终值40。

如果x值线性渐变,那么x的变化速度就是匀速的。其实,我们也可以变速地改变x的值,这会我们可以一开始加速增加x的值,后面减速增加x的值,每种改变x值速度的方式都叫做时间插值器TimeInterpolator,匀速改变使用的时间插值器叫做LinearInterpolator,变速改变使用的时间插值器叫做AccelerateDecelerateInterpolator。动画开始后,时间插值器会根据对应的算法计算出某一时刻x的值,然后我们就可以用该计算出的值更新对象中x属性的值,这就是属性动画的基本工作原理。

属性动画的主要类



Animator

Animator是属性动画的基类,其是一个抽象类;

ViewPropertyAnimator

使用方式:View.animate() 后跟 translationX() 等方法,动画会自动执行。

. setDuration(long duration)

通过setDuration方法可以设置动画总共的持续时间,以毫秒为单位

// imageView1: 500 毫秒
imageView1.animate()
.translationX(500)
.setDuration(500);

// imageView2: 2 秒
ObjectAnimator animator = ObjectAnimator.ofFloat(
imageView2, "translationX", 500);
animator.setDuration(2000);
animator.start();


.start()

通过start方法可以启动动画,动画启动后不一定会立即运行。如果之前通过调用setStartDelay方法设置了动画延迟时间,那么会在经过延迟时间之后再运行动画;如果没有设置过动画的延迟时间,那么动画在调用了start()方法之后会立即运行。在调用了start()方法之后,动画的isStarted()方法就会返回true;在动画真正运行起来之后,动画的isRunning()方法就会返回true,这时候动画才会调用TimeInterpolator才开始工作计算属性在某个时刻的值。调用动画的start()方法所在的线程必须绑定了一个Looper对象,如果没有绑定就会报错。当然,UI线程(即主线程)早就默认绑定了一个Looper对象,所以在主线程中我们就无需担心这个问题。如果我们想在一个View上使用属性动画,那么我们应该保证我们是在UI线程上调用的动画的start()方法。start()方法运行后会触发动画监听器AnimatorListener的onAnimationStart方法的执行。

.setStartDelay(long startDelay)

可以通过调用setStartDelay方法设置动画的延迟运行时间,比如调用setStartDelay(1000)意味着动画在执行了start()方法1秒之后才真正运行,这种情况下,在调用了start()方法之后,isStarted()方法返回true,表示动画已经启动了,但是在start()方法调用后1s内,isRunning()方法返回false,表示动画还未真正运行,比如在start()方法调用后第0.5秒,由于动画还在延迟阶段,所以isRunning()返回false;在start()方法执行1秒之后,isStarted()方法还是返回true,isRunning()方法也返回了true,表示动画已经真正开始运行了。通过调用getStartDelay()方法可以返回我们设置的动画延迟启动时间,默认值是0。

setInterpolator(TimeInterpolator value)

我们可以通过调用setInterpolator方法改变动画所使用的时间插值器,由于视图动画也需要使用时间插值器,所以我们可以使用android.view.animation命名空间下的一系列插值器,将其与属性动画一起工作。通过动画的getInterpolator方法可以获取我们设置的时间插值器。

// imageView1: 线性 Interpolator,匀速
imageView1.animate()
.translationX(500)
.setInterpolator(new LinearInterpolator());

// imageView: 带施法前摇和回弹的 Interpolator
ObjectAnimator animator = ObjectAnimator.ofFloat(
imageView2, "translationX", 500);
animator.setInterpolator(new AnticipateOvershootInterpolator());
animator.start();


setTarget(Object target)

可以通过调用动画的setTarget方法设置其要操作的对象,这样可以更新该对象的某个属性值。实际上,该方法对于ValueAnimator作用不大,因为ValueAnimator不是直接与某个对象打交道的。setTarget方法对于ObjectAnimator作用较大,因为ObjectAnimator需要绑定某个要操作的对象,下面会详细介绍。

.pause()

Android中API Level 19在Animator中加入了pause()方法,该方法可以暂停动画的执行。调用pause()方法的线程必须与调用start()方法的线程是同一个线程。如果动画还没有执行start()或者动画已经结束了,那么调用pause()方法没有任何影响,直接被忽略。当执行了pause()方法后,动画的isPaused()方法会返回true。pause()方法运行后会触发动画监听器AnimatorPauseListener的onAnimationPause方法的执行。

.resume()

如果动画通过调用pause()方法暂停了,那么之后可以通过调用resume()方法让动画从上次暂停的地方继续运行。resume()方法也是从API Level 19引入的,并且调用resume()方法的线程必须与调用start()方法的线程是同一个线程。如果动画没有处于暂停状态(即isPaused()返回false),那么调用resume()方法会被忽略。resume()方法运行后会触发动画监听器AnimatorPauseListener的onAnimationResume方法的执行。

.end

end()方法执行后,动画会结束运行,直接从当前状态跳转到最终的完成状态,并将属性值分配成动画的终止值,并触发动画监听器AnimatorListener的onAnimationEnd方法的执行。

.cancel()

cancel()方法执行后,动画也会结束运行,但是与调用end方法不同的是,其不会将属性值分配给动画的终止值。比如一个动画在400ms内将对象的x属性从0渐变为40,当运行到第200ms时调用了cancel()方法,那么属性x的最终值是20,而不是40,这是与调用end()方法不同的,如果在第200ms调用了end()方法,那么属性x的最终值是40。调用cancel()方法后,会先触发AnimatorListener的onAnimationCancel方法的执行,然后触发onAnimationEnd方法的执行。

ValueAnimator

ValueAnimator继承自抽象类Animator。要让属性动画渐变式地更改对象中某个属性的值,可分两步操作:第一步,动画需要计算出某一时刻属性值应该是多少;第二步,需要将计算出的属
114b7
性值赋值给动画的属性。ValueAnimator只实现了第一步,也就是说ValueAnimator只负责以动画的形式不断计算不同时刻的属性值,但需要我们开发者自己写代码将计算出的值通过对象的setXXX等方法更新对象的属性值。

ValueAnimator中有两个比较重要的属性,一个是TimeInterpolator类型的属性,另一个是TypeEvaluator类型的属性。TimeInterpolator指的就是时间插值器,在上面我们已经介绍过,在此不再赘述。TypeEvaluator是什么呢?TypeEvaluator表示的是ValueAnimator对哪种类型的值进行动画处理。ValueAnimator提供了四个静态方法ofFloat()、ofInt()、ofArgb()和ofObject(),通过这四个方法可以对不同种类型的值进行动画处理,这四个方法对应了四种TypeEvaluator,下面会详细说明。

ofFloat方法接收一系列的float类型的值,其内部使用了FloatEvaluator。通过该方法ValueAnimator可以对float值进行动画渐变,其使用方法如下所示:

ValueAnimator valueAnimator = ValueAnimator.ofFloat(0f, 500f);

valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float deltaY = (float)animation.getAnimatedValue();
textView.setTranslationY(deltaY);
}
});

//默认duration是300毫秒,我们设置为3000毫秒,也就是3秒
valueAnimator.setDuration(3000);
valueAnimator.start();


AnimatorUpdateListener有一个onAnimationUpdate方法,ValueAnimator会每隔一定时间(默认间隔10ms)计算属性的值,每当计算的时候就会回调onAnimationUpdate方法。在该方法中,我们通过调用ValueAnimator的getAnimatedValue()方法获取到当前动画计算出的属性值,然后我们将该值传入textView的setTranslationY()方法中,从而更新了textView的位置,这样就通过ValueAnimator以动画的形式移动textView。

2.ofInt方法与ofFloat方法很类似,只不过ofInt方法接收int类型的值,ofInt方法内部使用了IntEvaluator,其具体使用可参考上面ofFloat的使用代码,在此不再赘述。

3.从API Level 21(5.0版本)开始,ValueAnimator中加入了ofArgb方法,该方法接收一些列代表了颜色的int值,其内部使用了ArgbEvaluator,可以用该方法实现将一个颜色动画渐变到另一个颜色,我们从中可以不断获取中间动画产生的颜色值。

你可能纳闷,既然传入的还是int值,那直接用ofInt方法不就行了吗,干嘛还要新增一个ofArgb方法呢?实际上用ofInt方法是不能完成颜色动画渐变的。我们知道一个int值包含四个字节,在Android中第一个字节代表Alpha分量,第二个字节代表Red分量,第三个字节代表Green分量,第四个字节代表Blue分量,且我们常用16进制表示颜色,这样看起来更明显易懂一些,比如int值0xffff0000表示的红色,0xff00ff00表示的是绿色,最前面的ff表示的是Alpha。ofArgb方法会通过ArgbEvaluator将颜色拆分成四个分量,然后分别对各个分量进行动画计算,然后将四个计算完的分量再重新组合成一个表示颜色的int值,这就是ofArgb方法的工作原理。

//ValueAnimator.ofArgb()方法是在API Level 21中才加入的
if(Build.VERSION.SDK_INT >= 21){
//起始颜色为红色
int startColor = 0xffff0000;
//终止颜色为绿色
int endColor = 0xff00ff00;
ValueAnimator valueAnimator = ValueAnimator.ofArgb(startColor, endColor);
valueAnimator.setDuration(3000);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
int color = (int)animation.getAnimatedValue();
textView.setBackgroundColor(color);
}
});
valueAnimator.start();
}


4.ValueAnimator提供了一个ofObject方法,该方法接收一个TypeEvaluator类型的参数,我们需要实现该接口TypeEvaluator的evaluate方法,只要我们实现了TypeEvaluator接口,我们就能通过ofObject方法处理任意类型的数据。

我们之前提到ofArgb方法是从API Level 21才引入的,如果我们想在之前的这之前的版本中使用ofArgb的功能,怎么办呢?我们可以扩展TypeEvaluator,从而通过ofObject方法实现ofArgb方法的逻辑,如下所示:

//起始颜色为红色
int startColor = 0xffff0000;
//终止颜色为绿色
int endColor = 0xff00ff00;
ValueAnimator valueAnimator = ValueAnimator.ofObject(new TypeEvaluator() {
@Override
public Object evaluate(float fraction, Object startValue, Object endValue) {
//从初始的int类型的颜色值中解析出Alpha、Red、Green、Blue四个分量
int startInt = (Integer) startValue;
int startA = (startInt >> 24) & 0xff;
int startR = (startInt >> 16) & 0xff;
int startG = (startInt >> 8) & 0xff;
int startB = startInt & 0xff;

//从终止的int类型的颜色值中解析出Alpha、Red、Green、Blue四个分量
int endInt = (Integer) endValue;
int endA = (endInt >> 24) & 0xff;
int endR = (endInt >> 16) & 0xff;
int endG = (endInt >> 8) & 0xff;
int endB = endInt & 0xff;

//分别对Alpha、Red、Green、Blue四个分量进行计算,
//最终合成一个完整的int型的颜色值
return (int)((startA + (int)(fraction * (endA - startA))) << 24) |
(int)((startR + (int)(fraction * (endR - startR))) << 16) |
(int)((startG + (int)(fraction * (endG - startG))) << 8) |
(int)((startB + (int)(fraction * (endB - startB))));
}
}, startColor, endColor);
valueAnimator.setDuration(3000);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
int color = (int)animation.getAnimatedValue();
textView.setBackgroundColor(color);
}
});
valueAnimator.start();


ObjectAnimator

ObjectAnimator继承自ValueAnimator。我们之前提到,要让属性动画渐变式地更改对象中某个属性的值,可分两步操作:第一步,动画需要计算出某一时刻属性值应该是多少;第二步,需要将计算出的属性值赋值给动画的属性。ValueAnimator只实现了第一步,也就是说ValueAnimator只负责以动画的形式不断计算不同时刻的属性值,但需要我们开发者自己写代码在动画监听器AnimatorUpdateListener的onAnimationUpdate方法中将计算出的值通过对象的setXXX等方法更新对象的属性值。ObjectAnimator比ValueAnimator更进一步,其会自动调用对象的setXXX方法更新对象中的属性值。

ObjectAnimator重载了ofFloat()、ofInt()、ofArgb()和ofObject()等静态方法,我们下面以ofFloat为例说明:

float value1 = 0f;
float value2 = 500f;
final ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(textView, "translationY", value1, value2);
objectAnimator.setDuration(3000);
objectAnimator.start();


在构造函数中,我们将textView作为target传递给ObjectAnimator,然后指定textView要变化的属性是translationY,最后指定渐变范围是从0到500。当动画开始时,ObjectAnimator就会不断调用textView的setTranslationY方法以更新其值。我们此处演示的是ObjectAnimator与View一起工作,其实ObjectAnimator可以与任意的Object对象工作。如果要更新某个对象中名为propery的属性,那么该Object对象必须具有一个setProperty的setter方法可以让ObjectAnimator调用。

动画效果改变的值

translationX和 translationY:这两个属性作为一种增量来控制着View对象水平或竖直移动。

rotation、rotationX和rotationY:这三个属性控制View对象围绕支点进行2D和3D旋转

scaleX和scaleY. 这两个属性控制着View对象围绕它的支点进行2D缩放。

pivotX和pivotY:这两个属性控制着view对象的支点位置,围绕这个支点进行旋转和缩放变换处理,默认情况下,该支点的位置就是View对象的中心点。

x和y这是两个简单实用的属性,它描述了View对象在它的容器中的最终位置,它是最初的左上角坐标和 translationX和 translationY值的累计和

alpha:它表示View对象的alpha透明度,默认值是1(不透明),0代表完全透明(不可见)

Android中提供的Interpolator(时间插值器)

AccelerateInterpolator      加速,开始时慢中间加速

DecelerateInterpolator       减速,开始时快然后减速

AccelerateDecelerateInterolator  先加速后减速,开始结束时慢,中间加速

AnticipateInterpolator       反向 ,先向相反方向改变一段再加速播放

AnticipateOvershootInterpolator  反向加超越,先向相反方向改变,再加速播放,会超出目的值然后缓 慢移动至目的值

BounceInterpolator        跳跃,快到目的值时值会跳跃,如目的值100,后面的值可能依次为85,77 ,70,80,90,100

CycleIinterpolator         循环,动画循环一定次数,值的改变为一正弦函数:Math.sin(2 * mCycles * Math.PI * input)

LinearInterpolator         线性,线性均匀改变

OvershottInterpolator       超越,最后超出目的值然后缓慢改变到目的值

AnimatorSet

AnimatorSet继承自Animator。AnimatorSet表示的是动画的集合,我们可以通过AnimatorSet把多个动画集合在一起,让其串行或并行执行,从而创造出复杂的动画效果。

我们想让TextView先进行旋转,然后进行平移,最后进行伸缩,我们可以通过AnimatorSet实现该效果,代码如下所示:

protected void animatorSet(Button bt2) {
// TODO Auto-generated method stub
//anim1实现TextView的旋转动画
Animator anim1 = ObjectAnimator.ofFloat(bt2, "rotation", 0f, 360f);
anim1.setDuration(2000);
//anim2和anim3TextView的平移动画
Animator anim2 = ObjectAnimator.ofFloat(bt2, "translationX", 0f, 300f);
anim2.setDuration(3000);
Animator anim3 = ObjectAnimator.ofFloat(bt2, "translationY", 0f, 400f);
anim3.setDuration(3000);
//anim4实现TextView的伸缩动画
Animator anim4 = ObjectAnimator.ofFloat(bt2, "scaleX", 1f, 0.5f);
anim4.setDuration(2000);

//第一种方式
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.playSequentially(anim1, anim2, anim4);
animatorSet.playTogether(anim2, anim3);
animatorSet.start();

//第二种方式
/*AnimatorSet anim23 = new AnimatorSet();
anim23.playTogether(anim2, anim3);
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.playSequentially(anim1, anim23, anim4);
animatorSet.start();*/

//第三种方式
/*AnimatorSet animatorSet = new AnimatorSet();
animatorSet.play(anim1).before(anim2);
animatorSet.play(anim2).with(anim3);
animatorSet.play(anim4).after(anim2);
animatorSet.start();*/
}


在第一种方式中,调用了animatorSet.playSequentially(anim1, anim2, anim4),该方法将anim1、anim2以及anim4按顺序串联起来放到了animatorSet中,这样首先会让动画anim1执行,anim1执行完成后,会依次执行动画anim2,执行完anim2之后会执行动画anim3。通过调用animatorSet.playTogether(anim2, anim3),保证了anim2和anim3同时执行,即动画anim1完成之后会同时运行anim2和anim3。

在第二种方式中,我们首先创建了一个AnimatorSet变量anim23,然后通过anim23.playTogether(anim2, anim3)将anim2和anim3组合成一个小的动画集合。然后我们再把anim1、anim23以及anim4一起传入到animatorSet.playSequentially(anim1, anim23, anim4)中,这样anim1、anim23、anim4会依次执行,而anim23中的anim2和anim3会同时执行。该方式同时也演示了可以将一个AnimatorSet作为动画的一部分放入另一个AnimatorSet中。

在第三种方式中,我们使用了AnimatorSet的play方法,该方法返回AnimatorSet.Builder类型,animatorSet.play(anim1).before(anim2)确保了anim1执行完了之后执行anim2,animatorSet.play(anim2).with(anim3)确保了anim2和anim3同时执行,animatorSet.play(anim4).after(anim2)确保了anim2执行完了之后执行anim4。需要说明的是animatorSet.play(anim1).before(anim2)与animatorSet.play(anim2).after(anim1)是完全等价的,之所以在上面代码中有的写before,有的写after,只是为了让大家多了解一下API。

属性动画的重复执行

由于属性动画没有重复执行的API,只能另辟蹊径,下面代码是我的一种实现方式,希望有好的实现方式告知,大家一起提高。

Timer timer = new Timer();
TimerTask task = new TimerTask() {
@Override
public void run() {
// TODO Auto-generated method stub
runOnUiThread(new Runnable() {
public void run() {
showAnimation();
}
});
}
};
timer.schedule(task, 0, 900);

private void showAnimation() {
Animator anim1 = ObjectAnimator.ofFloat(img_load, "rotation", 360f, 0f);
anim1.setDuration(1000);
anim1.start();
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  动画