Android Property AnimationProperty Animation Series One ObjectAnimator_html/css_WEB-ITnose

The previous blog explained the relevant knowledge points and how to use ValueAnimator, one of the Android property animation Property Animation series. This blog continues to explain the use of Android attribute animation ObjectAnimator class.

ObjectAnimator

Compared with the ValueAnimator class, ObjectAnimator is more practical because it can actually act on an object. However, ObjectAnimator inherits from ValueAnimator, so the main method is still implemented in ValueAnimator. So let's take a look at the use of ObjectAnimator. Commonly used methods include these: ofFloat(), ofInt(), ofObject(), ofArgb(), ofPropertyValuesHolder().

ObjectAnimator uses

Translation

ObjectAnimator animator = ObjectAnimator.ofFloat(imageView, "translationX", 0.0f, 350.0f, 0f);        animator.setDuration(2500).start();

The first parameter of the ofFloat() method represents the object of the animation operation (can be any object) , the second parameter represents the attribute name of the operation object (as long as it is an attribute of the object), and the third parameter is the animation transition value. Of course, there can be one to N transition values. If it is a value, the default value is the end value of the animation transition value. If there are N values, the animation transitions between these N values.

Zoom

 ObjectAnimator animator = ObjectAnimator.ofFloat(imageView, "scaleX", 1.0f, 1.5f);        animator.setDuration(2000).start();

Rotation animation

ObjectAnimator animator = ObjectAnimator.ofFloat(imageView, "rotationX", 0.0f, 90.0f,0.0F);        animator.setDuration(2000).start();

Transparency animation

ObjectAnimator animator = ObjectAnimator.ofFloat(imageView, "alpha", 1.0f, 0.3f, 1.0F);        animator.setDuration(2000);//动画时间

Doesn’t it feel simple? Two lines of code can achieve an animation effect, which is of course just a simple animation configuration. If you need better animation effects, you can configure it through these methods:

1. setInterpolator(): Set animation Interpolation
2. setDuration(): Set animation execution time
3. setRepeatCount(): Set animation repetition times
4. setRepeatMode(): Set animation repeat mode
5. setStartDelay (): Set animation delay operation
6. setTarget(): Set the object of animation
7. setEvaluator(): Set the evaluator for excessive animation.

The detailed animation configuration is as follows:

 ObjectAnimator animator = ObjectAnimator.ofFloat(imageView, "alpha", 1.0f, 0.3f, 1.0F);        animator.setDuration(2000);//动画时间        animator.setInterpolator(new BounceInterpolator());//动画插值        animator.setRepeatCount(-1);//设置动画重复次数        animator.setRepeatMode(ValueAnimator.RESTART);//动画重复模式        animator.setStartDelay(1000);//动画延时执行        animator.start();//启动动画

You can adjust the configuration according to your own needs.

Combined animation

What we see above is a single animation, so what should we do if we need to implement a combined animation? Don't worry, Android engineers have provided us with two methods to implement it, the AnimatorSet class and the ObjectAnimator.ofPropertyValuesHolder() method.

Combined animation 1? Use of AnimatorSet

This class provides a play() method. If we pass an Animator object (ValueAnimator or ObjectAnimator) to this method, an AnimatorSet will be returned. .Builder instance, AnimatorSet.Builder includes the following four methods:

after(Animator anim) Insert the existing animation into the passed animation and execute it
after(long delay) Execute the existing animation Execute after a delay of specified milliseconds
before(Animator anim) Insert the existing animation into the incoming animation and execute it
with(Animator anim) Execute the existing animation and the incoming animation at the same time

Okay, with these methods, let's implement a combined animation: the transparency of the starting image changes from opaque to 0.2 transparent and then to opaque. As the color of the entire layout background changes, the ImageView first translates 200 pixels to the right, and then Magnify 2 times, and finally rotate along the X-axis from 0 to 90 degrees and then to 0 degrees.

The code is as follows:

 ObjectAnimator animator = ObjectAnimator.ofInt(container, "backgroundColor", 0xFFFF0000, 0xFFFF00FF);        ObjectAnimator animator1 = ObjectAnimator.ofFloat(imageView, "translationX", 0.0f, 200.0f, 0f);        ObjectAnimator animator2 = ObjectAnimator.ofFloat(imageView, "scaleX", 1.0f, 2.0f);        ObjectAnimator animator3 = ObjectAnimator.ofFloat(imageView, "rotationX", 0.0f, 90.0f, 0.0F);        ObjectAnimator animator4 = ObjectAnimator.ofFloat(imageView, "alpha", 1.0f, 0.2f, 1.0F);        //组合动画方式1        AnimatorSet set = new AnimatorSet();        ((set.play(animator).with(animator1).before(animator2)).before(animator3)).after(animator4);        set.setDuration(5000);        set.start();

We can see that 5 ObjectAnimator animations are created first, and then a new AnimatorSet object is created to combine the 5 animations just now play is executed in the AnimatorSet object. The execution effect is the rendering above.
Of course, you can use the playTogether(Animator... items) method in the AnimatorSet class to achieve the effect of executing multiple animations at the same time.

Combined animation 2? Use of PropertyValuesHolder

In addition to the above Animator class, you can also use the PropertyValuesHolder class to implement combined animation. However, this combined animation is not as rich as the above. You can only use the PropertyValuesHolder class more animations are executed together. Of course we have to use it in conjunction with the ObjectAnimator.ofPropertyValuesHolder(Object target,
PropertyValuesHolder… values); method. The first parameter is the target object of the animation, and the subsequent parameters are instances of the PropertyValuesHolder class. There can be multiple such instances. The code is as follows:

 //组合动画方式2        PropertyValuesHolder valuesHolder = PropertyValuesHolder.ofFloat("translationX", 0.0f, 300.0f);        PropertyValuesHolder valuesHolder1 = PropertyValuesHolder.ofFloat("scaleX", 1.0f, 1.5f);        PropertyValuesHolder valuesHolder2 = PropertyValuesHolder.ofFloat("rotationX", 0.0f, 90.0f, 0.0F);        PropertyValuesHolder valuesHolder3 = PropertyValuesHolder.ofFloat("alpha", 1.0f, 0.3f, 1.0F);        ObjectAnimator objectAnimator = ObjectAnimator.ofPropertyValuesHolder(imageView, valuesHolder, valuesHolder1, valuesHolder2, valuesHolder3);        objectAnimator.setDuration(2000).start();

Similarly, we first created four animations of the PropertyValuesHolder class, and then combined the object that performed the animation with the four animations through the ObjectAnimator.ofPropertyValuesHolder() method, and returned the object It is ObjectAnimator, and then we can start this animation through the start() method in the ObjectAnimator object.

Do we have such a doubt? Property animation is to achieve an animation effect by changing the property value of an object. So what can the attribute name of this object be? The answer is: any method attribute name starting with set. Maybe we commonly use:

1. translation translationX, translationY, X, Y.
2. Scale scaleX, scaleY.
3. Rotation rotationX, rotationY.

4. Transparency alpha.

   也就是说我们所有控件都有以上setTranslationX(),setScaleX(),setRotationX(),setAlpha()等方法。
   我们不仅限于这几个属性，就拿TextView控件来说，只要是TextView有的属性都可以用来实现动画效果，比如 字体大小：“textColor”，字体颜色“textSize”等。

动画监听器

很多时候我们可能要在某一个动画执行之前 或者动画结束之后进行一些其他的操作，比如：动画结束之后进行网络数据请求等。那么我们就需要去获得该动画的一些状态，幸好，android系统给我们提供了一个动画监听器接口，来监听不同状态下的动画情况。实现也很简单，只要调用addListener(AnimatorListener listener)方法给动画添加监听器就好了，然后实现AnimatorListener接口即可。代码如下：

animator.addListener(new Animator.AnimatorListener() {            @Override            public void onAnimationStart(Animator animation) {                //TODO 动画开始前的操作                /** * 比如这里可以初始化一些UI */            }            @Override            public void onAnimationEnd(Animator animation) {                //TODO 动画结束的操作                /** * 比如这里可以等动画结束进行一些账号登录或者网络数据请求等。 */            }            @Override            public void onAnimationCancel(Animator animation) {                //TODO 动画取消的操作            }            @Override            public void onAnimationRepeat(Animator animation) {                //TODO 动画重复的操作            }        });

可以根据不同需求来实现接口里面的四个方法。有时候你会觉得我不需要监听动画的四种状态，我只需要监听动画结束时候的状态，如果使用上面的方法就会感觉代码臃肿了，不过没关系，Android系统给我们提供了一个更好用的方法

animator.addListener(new AnimatorListenerAdapter() {            @Override            public void onAnimationEnd(Animator animation) {                //TODO 动画结束的操作                /** * 比如这里可以等动画结束进行一些账号登录或者网络数据请求等。 */            }        });

可以看出，我们使用了AnimatorListenerAdapter 动画接口适配器代替AnimatorListener接口。其实AnimatorListenerAdapter的源码只是一个实现了AnimatorListener接口的抽象类而已，你需要监听哪种动画状态就重写哪种方法就可以了。是不是觉得这个方法很nice～?如果你仅仅满足于这个那就OUT了，Android系统还给我们提供了一个更加精确的方法来时刻监听当前动画的执行情况。那就是addUpdateListener(AnimatorUpdateListener listener)方法了。调用该方法只需实现AnimatorUpdateListener接口就可以读取到动画的每个更新值了。来看看代码：

animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {            @Override            public void onAnimationUpdate(ValueAnimator animation) {                float value = (float) animation.getAnimatedValue();                //可以根据自己的需要来获取动画更新值。                Log.e("TAG", "the animation value is " + value);            }        });

这个方法具体用在哪些地方可以参看上一节Android属性动画Property Animation系列一之ValueAnimator的动态的画一条斜线动画实现。

使用XML编写动画

除了代码实现以上所有的动画，跟补间动画一样，Android系统也提供xml来实现属性动画。
相对于代码实现动画，xml可能显得麻烦些，不过xml动画可重复性好，编写一个xml动画可以多次使用。那么就来看看xml实现动画吧。和补间动画不同的是，在res目录下新建一个animator目录，补间动画是新建anim目录。在xml中实现动画会使用到如下三个标签

对应代码中的ValueAnimator

对应代码中的ObjectAnimator

对于代码中的Animator

比如实现一个0?10的值的平滑过渡动画xml代码如下：

<?xml version="1.0" encoding="utf-8"?><animator xmlns:android="http://schemas.android.com/apk/res/android" android:valueFrom="0" android:valueTo="10" android:duration="2000" android:valueType="intType"></animator>

在比如实现一个从0旋转到90度的动画xml代码如下：

<?xml version="1.0" encoding="utf-8"?><objectAnimator xmlns:android="http://schemas.android.com/apk/res/android" android:duration="2000" android:propertyName="rotationX" android:valueFrom="0" android:valueTo="90" android:valueType="floatType" />

我们来个组合动画吧。

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android" android:duration="2000" android:ordering="sequentially"><!--动画执行顺序 sequentially：顺序执行；together：同时执行。 -->    <objectAnimator  android:propertyName="translationX" android:valueFrom="0" android:valueTo="200" android:valueType="floatType" />    <set android:ordering="together">        <objectAnimator  android:propertyName="scaleX" android:valueFrom="1" android:valueTo="2" android:valueType="floatType" />        <objectAnimator  android:propertyName="rotationX" android:valueFrom="0" android:valueTo="90" android:valueType="floatType" /><!--动画值的类型-->    </set></set>

xml动画写好了，接下来看看怎么在代码中调用它吧：

Animator animator = AnimatorInflater.loadAnimator(context, R.animator.anim_file); animator.setTarget(view); animator.start(); 

通过AnimatorInflater.loadAnimator方法加载xml动画返回一个Animator的对象，然后调用setTarget方法给动画设置对象调用哪个start启动动画即可完成xml动画效果啦。是不是也很简单呢？最后发现xml的动画可读性还是挺高的，点个赞～。

下一节我们继续学习 LayoutTransition：布局动画