安卓补间动画属性学会这些平时的开发足够了

来源:互联网 发布:mac玩lol分辨率 编辑:程序博客网 时间:2024/05/16 12:40

体系结构

objectAnimator extend ValueAnimator extend Animator implement Cloneable

1属性动画

平移动画

<span></span>//给button设置x轴平移动画,从100开始到200,再到300,                ObjectAnimator transX = ObjectAnimator.ofFloat(button, "translationX", 100f, 200f, 300f);                transX.setDuration(2000);//时间2秒                transX.setRepeatCount(1);//重复一次,总共两次                transX.setRepeatMode(ObjectAnimator.RESTART);//重复播放时从头开始再次播放                transX.start();//开始

平移方向:由ofFloat的第二个参数决定:

translationX为x轴,<pre name="code" class="java">translationY为y轴方向

平移距离怎么确定

相对于控件的中心点,向上或者向下移动**像素

移动完之后会不会回到原来位置

不会,可以在后面继续加数值,比如先移动到100,再移动到0就会回到原点,<span style="color:#ff0000;">移动后控件的位置发生永久改变</span>

缩放动画

<span style="white-space:pre"></span>ObjectAnimator scaleX = ObjectAnimator.ofFloat(button2, "scaleX", 1f, 0f, 1f);                button2.setPivotX(5000);               <span style="color:#ff0000;">//加入这句代码可以控制以x方向500点出竖直线为中心缩放,x轴缩放就给控件设置pivotX,y轴缩放就给控件设置pivotY</span>                scaleX.setDuration(2000);                scaleX.setRepeatCount(1);                scaleX.setRepeatMode(ObjectAnimator.RESTART);                scaleX.start();

默认相对于那条线缩放,不可以相对于某一点缩放,要实现此方法可以用x轴缩放和y轴动画的set动画来实现

参数为scaleX,轴线为过控件中心点的水平线参数为scaleY,轴线为过控件中心点的竖直线

透明动画

 <span style="white-space:pre"></span>ObjectAnimator alpha = ObjectAnimator.ofFloat(button4, "alpha", 0f, 1f);//取值是0f-1f                alpha.setDuration(2000);                alpha.setRepeatCount(1);                alpha.setRepeatMode(ObjectAnimator.RESTART);                alpha.start();

旋转动画

<span style="white-space:pre"></span>ObjectAnimator rotationX = ObjectAnimator.ofFloat(button3, "rotationX", 0f, 360f);//角度值                rotationX.setDuration(2000);                rotationX.setRepeatCount(1);                rotationX.setRepeatMode(ObjectAnimator.RESTART);                rotationX.start();

相对于谁旋转

参数为<span style="font-family: Arial, Helvetica, sans-serif;">rotationX</span><span style="font-family: Arial, Helvetica, sans-serif;">,轴线为过控件中心点的水平线</span>参数为<span style="font-family: Arial, Helvetica, sans-serif;">rotationY</span><span style="font-family: Arial, Helvetica, sans-serif;">,轴线为过控件中心点的竖直线</span>

相对于某个点旋转第二个参数设置成rotation,后面加x就是在x轴方向上旋转,加y就是在y轴方向上旋转

  <span style="white-space:pre"></span>ObjectAnimator rotationY = ObjectAnimator.ofFloat(button5, "<span style="color:#ff0000;">rotation</span>", 0f, 180f);                rotationY.setDuration(2000);                rotationY.setRepeatCount(1);                button5.setPivotX(0);                button5.setPivotY(0);//相对于00点旋转                rotationY.setRepeatMode(ObjectAnimator.RESTART);                rotationY.start();

组合动画

  • after(Animator anim)   将现有动画插入到传入的动画之后执行
  • after(long delay)   将现有动画延迟指定毫秒后执行
  • before(Animator anim)   将现有动画插入到传入的动画之前执行
  • with(Animator anim)   将现有动画和传入的动画同时执行

<span style="white-space:pre"></span>ObjectAnimator alpha1 = ObjectAnimator.ofFloat(button7, "alpha", 0f, 1f);                alpha1.setDuration(2000);                alpha1.setRepeatMode(ObjectAnimator.RESTART);                ObjectAnimator scale1 = ObjectAnimator.ofFloat(button7, "scaleY", 0f, 1f);                scale1.setDuration(2000);                scale1.setRepeatMode(ObjectAnimator.RESTART);                ObjectAnimator scale2 = ObjectAnimator.ofFloat(button7, "scaleX", 0f, 1f);                scale2.setDuration(2000);                scale2.setRepeatMode(ObjectAnimator.RESTART);                AnimatorSet set = new AnimatorSet();                <span style="color:#ff0000;">//先停3秒,一起缩放,最后透明//可以使用playTogether<span style="font-size: 14px; line-height: 30px; background-color: rgb(245, 248, 253);">(Animator… items)</span>方法让所有动画一起执行//</span><span style="font-family: 宋体; font-size: 9.7pt; color: rgb(255, 0, 0); background-color: rgb(217, 230, 255);">playSequentially<span style="font-family: monospace; font-size: 14px; line-height: 30px; text-indent: 28px; background-color: rgb(245, 248, 253);">(Animator… items)</span>可以让动画顺序执行</span><span style="color:#ff0000;">                //注意:下面的代码中动画不能重复,否则报错,每个动画可以单独设置属性,实现差异化,也可以set中一次性全部设置</span>
                set.play(scale1).with(scale2).after(3000).before(alpha1);                set.start();

xml实现属性动画

<?xml version="1.0" encoding="utf-8"?><!-<span style="font-family: Arial, Helvetica, sans-serif;">R.animator.animator1</span><span style="font-family: Arial, Helvetica, sans-serif;">的内容如下-></span><set xmlns:android="http://schemas.android.com/apk/res/android">    <objectAnimator        android:duration="2000"        android:propertyName='scaleX'        android:valueFrom='1'        android:valueTo='2'        android:valueType='floatType'/>    <objectAnimator        android:duration="1000"        android:propertyName='rotation'        android:valueFrom='0'        android:valueTo='180'        android:valueType='floatType'/></set>
 <span style="white-space:pre"></span>Animator animator = AnimatorInflater.loadAnimator(getApplicationContext(), R.animator.animator1);                button8.setPivotX(0);                button8.setPivotY(0);                animator.setTarget(button8);                animator.start();

2.补间动画

平移动画

<span style="white-space: pre;"></span><pre style="font-family: 宋体; font-size: 9.7pt; background-color: rgb(255, 255, 255);"><span style="color: rgb(128, 128, 128); "><em>//或者TranslateAnimation translateAnimation = new TranslateAnimation(0, 100, 0, 100);</em></span><span style="font-size:14px; font-family: Arial, Helvetica, sans-serif;"></span>

TranslateAnimation translateAnimation = new TranslateAnimation(                        Animation.RELATIVE_TO_SELF, 0,                        Animation.RELATIVE_TO_SELF, 1,                        Animation.RELATIVE_TO_SELF, 0,                        Animation.RELATIVE_TO_SELF, 1);                translateAnimation.setDuration(2000);                translateAnimation.setRepeatMode(Animation.REVERSE);                translateAnimation.setRepeatCount(1);                button.startAnimation(translateAnimation);                //这句代码,相当于先setAnimation然后再start

缩放动画

   ScaleAnimation scaleAnimation = new ScaleAnimation(0,1,0,1);//默认相对于本身缩放,相对于0,0点缩放,而且xy轴可以同时缩放                ScaleAnimation scaleAnimation = new ScaleAnimation(0,1,0,1,300,100);//此时相对于本身,并且缩放的中心点是300,100,x轴从0-1,y轴从0-1,//比较灵活,可以设置参数,调节那个方向上缩放,缩放比例也可以不同            /*ScaleAnimation scaleAnimation = new ScaleAnimation(                        0,1,//x轴,从0-1                        0,1,//y轴,从0-1                        Animation.RELATIVE_TO_SELF,2, //x方向上相对于本身缩放,                        Animation.RELATIVE_TO_PARENT ,0.5f //y方向上相对于父控件缩放,相对于自己2倍*父控件的0.5倍的点开始缩放                );//此方法不常用,不多介绍*/                scaleAnimation.setDuration(2000);                scaleAnimation.setRepeatMode(Animation.REVERSE);//重复模式,反转                scaleAnimation.setRepeatCount(1);                button2.startAnimation(scaleAnimation);

透明动画

<span style="font-size:14px;"><span style="white-space:pre"></span>AlphaAnimation alphaAnimation = new AlphaAnimation(0,1);                alphaAnimation.setDuration(2000);                button3.startAnimation(alphaAnimation);</span>

旋转动画

<span style="font-size:14px;">                RotateAnimation rotateAnimation = new RotateAnimation(0, 360, 100, 200);//相对于100,200旋转                rotateAnimation.setDuration(2000);                button3.startAnimation(rotateAnimation);</span>

组合动画,add到set中再启动动画

<span style="font-size:14px;"> <span style="white-space: pre;"></span>AlphaAnimation alphaAnimation1 = new AlphaAnimation(0,1);                alphaAnimation1.setDuration(2000);                RotateAnimation rotateAnimation1 = new RotateAnimation(0, 360, 100, 200);//相对于100,200旋转                rotateAnimation1.setDuration(2000);                AnimationSet animationSet = new AnimationSet(true);                animationSet.addAnimation(alphaAnimation1);                animationSet.addAnimation(rotateAnimation1);                button7.startAnimation(animationSet);</span>

xml实现动画

<span style="font-size:14px;"><span style="white-space:pre"></span>Animation animation = AnimationUtils.loadAnimation(this, R.anim.anim1);                button8.startAnimation(animation);</span>
<span style="font-size:14px;">R.anim.anim1内容如下:</span><pre name="code" class="java"><?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android" android:fillAfter="false" >    <scale        android:fromXScale="1"        android:fromYScale="1"        android:pivotX="100%"        android:pivotY="50%"        android:toXScale="2"        android:toYScale="2"        android:duration="2000"/>    <rotate        android:repeatCount="1"        android:repeatMode="reverse"        android:duration="2000"        android:fromDegrees="0"        android:interpolator="@android:anim/accelerate_interpolator"        android:pivotX="50%"        android:pivotY="50%"        android:toDegrees="720" >    </rotate></set>

3.两种动画比较

属性动画控件会永久改变位置,而补间动画不会

缩放动画用补间动画显然更加方便

补间动画一个动画可以给多个控件使用,而属性动画不是很方便

Android 属性动画使用解析-属性动画基本用法此文中有详细说明,在此简单总结一下

1.属性动画是Android3.0引入了一个新的动画,如果想要在低版本上面使用属性动画,可以使用第三方 NineOldAndroids jar包,属性动画功能相当强大,几乎可以完全替换掉以前所讲的帧动画了。

2.View Animation仅仅作用于View,在Android补间动画Tween Animation使用解析文章开始就已经介绍了,并且它只对View部分属性有效果,如果我们想要改变一个View的背景色,补间动画是做不到的。也就是说用属性动画不仅仅是视觉上的改变,控件的实际值也改变了,包括他的高,宽等都是实实在在的更改了;

开发中根据二者对比去选择,一般来说两者都可以胜任

附录1属性动画代码(全)

package com.z.ani;import android.animation.Animator;import android.animation.AnimatorInflater;import android.animation.AnimatorSet;import android.animation.ObjectAnimator;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.view.View;import android.widget.Button;public class AnimatorActivity extends AppCompatActivity implements View.OnClickListener {    private android.widget.Button button;    private android.widget.Button button2;    private android.widget.Button button3;    private android.widget.Button button4;    private android.widget.Button button5;    private android.widget.Button button6;    private android.widget.Button button7;    private android.widget.Button button8;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_animator);        this.button8 = (Button) findViewById(R.id.button8);        this.button7 = (Button) findViewById(R.id.button7);        this.button6 = (Button) findViewById(R.id.button6);        this.button5 = (Button) findViewById(R.id.button5);        this.button4 = (Button) findViewById(R.id.button4);        this.button3 = (Button) findViewById(R.id.button3);        this.button2 = (Button) findViewById(R.id.button2);        this.button = (Button) findViewById(R.id.button);        button8.setOnClickListener(this);        button7.setOnClickListener(this);        button6.setOnClickListener(this);        button5.setOnClickListener(this);        button4.setOnClickListener(this);        button3.setOnClickListener(this);        button2.setOnClickListener(this);        button.setOnClickListener(this);    }    @Override    public void onClick(View v) {        switch (v.getId()) {            case R.id.button:                //给button设置x轴平移动画,从100开始到200,再到300,                ObjectAnimator transX = ObjectAnimator.ofFloat(button, "translationX", 100f, 200f, 300f);                transX.setDuration(2000);//时间2秒                transX.setRepeatCount(1);//重复一次,总共两次                transX.setRepeatMode(ObjectAnimator.RESTART);//重复播放时从头开始再次播放                transX.start();//开始                break;            case R.id.button2:                ObjectAnimator scaleX = ObjectAnimator.ofFloat(button2, "scaleX", 1f, 0f, 1f);                button2.setPivotX(500);                scaleX.setDuration(2000);                scaleX.setRepeatCount(1);                scaleX.setRepeatMode(ObjectAnimator.RESTART);                scaleX.start();                break;            case R.id.button3:                ObjectAnimator rotationX = ObjectAnimator.ofFloat(button3, "rotationX", 0f, 360f);                button3.setPivotX(0);                button3.setPivotY(0);                rotationX.setDuration(2000);                rotationX.setRepeatCount(1);                rotationX.setRepeatMode(ObjectAnimator.RESTART);                rotationX.start();                break;            case R.id.button4:                ObjectAnimator alpha = ObjectAnimator.ofFloat(button4, "alpha", 0f, 1f);                alpha.setDuration(2000);                alpha.setRepeatCount(1);                alpha.setRepeatMode(ObjectAnimator.RESTART);                alpha.start();                break;            case R.id.button5:                ObjectAnimator rotationY = ObjectAnimator.ofFloat(button5, "rotation", 0f, 180f);                rotationY.setDuration(2000);                rotationY.setRepeatCount(1);                button5.setPivotX(0);                button5.setPivotY(0);                rotationY.setRepeatMode(ObjectAnimator.RESTART);                rotationY.start();                break;            case R.id.button6:                ObjectAnimator scaleY = ObjectAnimator.ofFloat(button6, "scaleY", 0f, 1f);                scaleY.setDuration(2000);                scaleY.setRepeatCount(1);                button6.setPivotY(0);                scaleY.setRepeatMode(ObjectAnimator.RESTART);                scaleY.start();                break;            case R.id.button7:                ObjectAnimator alpha1 = ObjectAnimator.ofFloat(button7, "alpha", 0f, 1f);                alpha1.setDuration(2000);                alpha1.setRepeatMode(ObjectAnimator.RESTART);                ObjectAnimator scale1 = ObjectAnimator.ofFloat(button7, "scaleY", 0f, 1f);                scale1.setDuration(2000);                scale1.setRepeatMode(ObjectAnimator.RESTART);                ObjectAnimator scale2 = ObjectAnimator.ofFloat(button7, "scaleX", 0f, 1f);                scale2.setDuration(2000);                scale2.setRepeatMode(ObjectAnimator.RESTART);                AnimatorSet set = new AnimatorSet();                //先挺3秒,一起缩放,最后透明                //注意:下面的代码中动画不能重复,否则报错                set.play(scale1).with(scale2).after(3000).before(alpha1);                set.start();                break;            case R.id.button8:                Animator animator = AnimatorInflater.loadAnimator(getApplicationContext(), R.animator.animator1);                button8.setPivotX(0);                button8.setPivotY(0);                animator.setTarget(button8);                animator.start();                break;            default:                break;        }    }}
<?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="match_parent"    android:layout_height="match_parent"    android:paddingBottom="@dimen/activity_vertical_margin"    android:paddingLeft="@dimen/activity_horizontal_margin"    android:paddingRight="@dimen/activity_horizontal_margin"    android:paddingTop="@dimen/activity_vertical_margin"    android:orientation="vertical"    android:gravity="center"    tools:context="com.z.ani.AnimationActivity">    <Button        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="平移"        android:id="@+id/button"/>    <Button        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="缩放"        android:id="@+id/button2"/>    <Button        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="旋转"        android:id="@+id/button3"/>    <Button        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="透明"        android:id="@+id/button4"/>    <Button        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="Y轴旋转"        android:id="@+id/button5"/>    <Button        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="Y轴缩放"        android:id="@+id/button6"/>    <Button        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="先挺3秒,xy轴一起缩放,最后来个透明"        android:id="@+id/button7"/>    <Button        android:id="@+id/button8"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="xml方式动画"/></LinearLayout>

附录2,补间动画(全,上面是Activity,下面是xml代码)
package com.z.ani;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.view.View;import android.view.animation.AlphaAnimation;import android.view.animation.Animation;import android.view.animation.AnimationSet;import android.view.animation.AnimationUtils;import android.view.animation.RotateAnimation;import android.view.animation.ScaleAnimation;import android.view.animation.TranslateAnimation;import android.widget.Button;public class AnimationActivity extends AppCompatActivity implements View.OnClickListener {    private android.widget.Button button;    private android.widget.Button button2;    private android.widget.Button button3;    private android.widget.Button button4;    private android.widget.Button button5;    private android.widget.Button button6;    private android.widget.Button button7;    private android.widget.Button button8;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_animator);        this.button8 = (Button) findViewById(R.id.button8);        this.button7 = (Button) findViewById(R.id.button7);        this.button6 = (Button) findViewById(R.id.button6);        this.button5 = (Button) findViewById(R.id.button5);        this.button4 = (Button) findViewById(R.id.button4);        this.button3 = (Button) findViewById(R.id.button3);        this.button2 = (Button) findViewById(R.id.button2);        this.button = (Button) findViewById(R.id.button);        button8.setOnClickListener(this);        button7.setOnClickListener(this);        button6.setOnClickListener(this);        button5.setOnClickListener(this);        button4.setOnClickListener(this);        button3.setOnClickListener(this);        button2.setOnClickListener(this);        button.setOnClickListener(this);    }    @Override    public void onClick(View v) {        switch (v.getId()) {            case R.id.button://                TranslateAnimation translateAnimation = new TranslateAnimation(0, 100, 0, 100);                TranslateAnimation translateAnimation = new TranslateAnimation(                        Animation.RELATIVE_TO_SELF, 0,                        Animation.RELATIVE_TO_SELF, 1,                        Animation.RELATIVE_TO_SELF, 0,                        Animation.RELATIVE_TO_SELF, 1);                translateAnimation.setDuration(2000);                translateAnimation.setRepeatMode(Animation.REVERSE);                translateAnimation.setRepeatCount(1);                button.startAnimation(translateAnimation);                //这句代码,相当于先setAnimation然后再start                break;            case R.id.button2://                ScaleAnimation scaleAnimation = new ScaleAnimation(0,1,0,1);//默认相对于本身缩放,相对于0,0点缩放,而且xy轴可以同时缩放                ScaleAnimation scaleAnimation = new ScaleAnimation(0, 1, 0, 1, 300, 100);//此时相对于本身,并且缩放的中心点是300,100,x轴从0-1,y轴cong0-1            /*    ScaleAnimation scaleAnimation = new ScaleAnimation(                        0,1,//x轴,从0-1                        0,1,//y轴,从0-1                        Animation.RELATIVE_TO_SELF,2, //x方向上相对于本身缩放,                        Animation.RELATIVE_TO_PARENT ,0.5f //y方向上相对于父控件缩放,相对于自己2倍*父控件的0.5倍的点开始缩放                );//此方法不常用,不多介绍*/                scaleAnimation.setDuration(2000);                scaleAnimation.setRepeatMode(Animation.REVERSE);//重复模式,反转                scaleAnimation.setRepeatCount(1);                button2.startAnimation(scaleAnimation);                break;            case R.id.button3://                RotateAnimation rotateAnimation = new RotateAnimation(0, 360);//默认相对于0,0点旋转                RotateAnimation rotateAnimation = new RotateAnimation(0, 360, 100, 200);//相对于100,200旋转                rotateAnimation.setDuration(2000);                button3.startAnimation(rotateAnimation);                break;            case R.id.button4:                AlphaAnimation alphaAnimation = new AlphaAnimation(0,1);                alphaAnimation.setDuration(2000);                button3.startAnimation(alphaAnimation);                break;            case R.id.button5:                break;            case R.id.button6:                break;            case R.id.button7:                AlphaAnimation alphaAnimation1 = new AlphaAnimation(0,1);                alphaAnimation1.setDuration(2000);                RotateAnimation rotateAnimation1 = new RotateAnimation(0, 360, 100, 200);//相对于100,200旋转                rotateAnimation1.setDuration(2000);                AnimationSet animationSet = new AnimationSet(true);                animationSet.addAnimation(alphaAnimation1);                animationSet.addAnimation(rotateAnimation1);                button7.startAnimation(animationSet);                break;            case R.id.button8:                Animation animation = AnimationUtils.loadAnimation(this, R.anim.anim1);                button8.startAnimation(animation);                break;            default:                break;        }    }}



0 0