【幻化万千戏红尘】qianfeng-Android-Day16动画

动画资源

一、分类：

（一）、概要：

        3.0以前，android支持两种动画模式，补间动画（tween animation）,帧动画（frame animation），在android3.0中又引入了一个新的动画系统：属性动画（property animation）。

        这三种动画模式在SDK中被称为view animation，drawable animation，property animation。

（二）、动画资源分类：

1. 属性动画：Property Animation

2. 帧动画：Frame Animation (Drawable Animation)

3. 补间动画：Tween Animation (View Animation)

o 透明度补间动画

o 缩放补间动画

o 旋转补间动画

o 移动补间动画

·  Alpha：渐变透明度动画效果 

·  Scale：渐变尺寸伸缩动画效果 

·  Translate：画面转换位置移动动画效果 

·  Rotate：画面转换位置移动动画效果

二、补间动画：

        Tween Animation就是一系列View形状的变换，如大小的缩放、透明度的改变、水平位置的改变、旋转位置改变，动画的定义既可以用java代码定义也可以用XML定义。建议用XML定义。

        用XML定义的动画放在/res/anim/文件夹内，XML文件的根元素为<set> ， 二级节点可为<alpha>,<scale>,<translate>,<rotate>。

 

 

（一）、Tween Animation共同的属性:

1、duration[long] 属性为动画持续时间 时间以毫秒为单位

2、fillAfter [boolean] 当设置为true ，该动画转化在动画结束后被应用

3、fillBefore[boolean] 当设置为true ，该动画转化在动画开始前被应用

4、interpolator   指定一个动画的插入器有一些常见的插入器 

· accelerate_decelerate_interpolator    加速-减速 动画插入器 

· accelerate_interpolator   加速-动画插入器 

· decelerate_interpolator   减速- 动画插入器 

其他的属于特定的动画效果

5、repeatCount[int] 动画的重复次数

6、repeatMode[String] 定义重复的行为

· "restart" 、"reverse"   

· eg: android:repeatMode="reverse"

 

（二）、用xml资源实现补间动画：

<alpha

android:fromAlpha=”0.0″

android:toAlpha=”1.0″

android:duration=”3000″ />

 

【说明：】

1.fromAlpha:属性为动画起始时透明度

· 0.0表示完全透明

· 1.0表示完全不透明

· 以上值取0.0-1.0之间的float数据类型的数字

2.toAlpha:属性为动画结束时透明度

 

 

<scale

android:interpolator= "@android:anim/accelerate_decelerate_interpolator"

android:fromXScale=”0.0″

android:toXScale=”1.4″

android:fromYScale=”0.0″

android:toYScale=”1.4″

android:pivotX=”50%”

android:pivotY=”50%”

android:fillAfter=”false”

android:startOffset=“700”

android:duration=”700″

android:repeatCount=”10″ />

【说明：】

1.fromXScale[float] 

2.fromYScale[float] 为动画起始时，X、Y坐标上的伸缩尺寸

· 0.0表示收缩到没有

· 

· 1.0表示正常无伸缩

· 

· 值小于1.0表示收缩

· 

· 值大于1.0表示放大

· 

3.toXScale [float]

 为动画结束时，X坐标上的伸缩尺寸

4.toYScale[float] 为动画结束时，Y坐标上的伸缩尺寸

5.pivotX[float]

  

6.pivotY[float] 为动画相对于物件的X、Y坐标的开始位置

属性值说明：从0%-100%中取值，50%为物件的X或Y方向坐标上的中点位置

 

<translate

android:fromXDelta=”30″

android:toXDelta=”-80″

android:fromYDelta=”30″

android:toYDelta=”300″

android:duration=”2000″ />

【说明：】

1.fromXDelta

2.toXDelta 为动画结束起始时X坐标上的位置

3.fromYDelta

4.toYDelta 为动画结束起始时Y坐标上的位置

 

<rotate

android:interpolator="@android:anim/accelerate_decelerate_interpolator"

android:fromDegrees=”0″

android:toDegrees=”+350″

android:pivotX=”50%”

android:pivotY=”50%”

android:duration=”3000″ />

【说明：】

1.fromDegrees 为动画起始时物件的角度

说明

:当角度为负数——表示逆时针旋转

当角度为正数——表示顺时针旋转

(负数from——to正数:顺时针旋转)

(负数from——to负数:逆时针旋转)

(正数from——to正数:顺时针旋转)

(正数from——to负数:逆时针旋转)

2.toDegrees 属性为动画结束时物件旋转的角度可以大于360度

3.pivotX

4.pivotY 为动画相对于物件的X、Y坐标的开始位

说明：以上两个属性值从0%-100%中取值

,50%为物件的X或Y方向坐标上的中点位置

 

 

 

（三）、用java代码实现补间动画：

public class MainActivityextends AppCompatActivity {

 

    private ImageViewiv;

 

    @Override

    protected voidonCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        iv = ((ImageView) findViewById(R.id.iv));

    }

 

    public void translateClick1(View view) {

        //1.X轴移动的起始位置

        //2.X轴移动的结束位置

        //3.Y轴移动的起始位置

        //4.Y轴移动的结束位置

        TranslateAnimation ta =new TranslateAnimation(0,200, 0,200);

        //动画执行的时间，5000毫秒

        ta.setDuration(5000);

        //设置动画结束后ImageView保持动画结束时的状态

        ta.setFillAfter(true);

        //让ImageView产生动画效果

        iv.startAnimation(ta);

    }

 

    public void alphaClick1(View view) {

        //1.表示动画的起始状态，1表示完全不透明，0表示完全透明

        //2.表示动画的结束状态

        AlphaAnimation aa =new AlphaAnimation(1,0);

        aa.setDuration(3000);

        iv.startAnimation(aa);

    }

 

    public void scaleClick1(View view) {

        //1.X轴起始状态

        //2.X轴结束状态

        //5。6表示缩放的中心点

//        ScaleAnimation sa = new ScaleAnimation(0, 2, 0, 1, iv.getWidth() / 2, iv.getHeight() / 2);

        //缩放中心点参考ImageView的中心点，0.5f表示宽度/高度的50%

        ScaleAnimation sa =new ScaleAnimation(0,1, 0,1, ScaleAnimation.RELATIVE_TO_SELF,0.5f, ScaleAnimation.RELATIVE_TO_SELF,0.5f);

        sa.setDuration(3000);

        iv.startAnimation(sa);

    }

 

    public void rotateClick1(View view) {

        //1.旋转的起始位置

        //2.旋转的结束位置

        //3.4表示旋转的中心点

//        RotateAnimation ra = new RotateAnimation(0, 360, iv.getWidth() / 2, iv.getHeight() / 2);

        RotateAnimation ra =new RotateAnimation(0,359, RotateAnimation.RELATIVE_TO_SELF,0.5f, RotateAnimation.RELATIVE_TO_SELF,0.5f);

        //设置旋转次数

        ra.setRepeatCount(RotateAnimation.INFINITE);

        //设置重复旋转的模式

        ra.setRepeatMode(RotateAnimation.REVERSE);

        ra.setDuration(3000);

        iv.startAnimation(ra);

    }

 

    public void setClick1(View view) {

        //true表示动画的插值器统一使用AnimationSet默认的插值器

        AnimationSet set =new AnimationSet(true);

        TranslateAnimation ta = new TranslateAnimation(0, iv.getWidth(),0, iv.getHeight());

        ta.setDuration(3000);

        //将所有动画添加到set中

        set.addAnimation(ta);

        AlphaAnimation aa = new AlphaAnimation(0.2f, 0.8f);

        aa.setDuration(3000);

        set.addAnimation(aa);

        ScaleAnimation sa = new ScaleAnimation(1, 2, 1, 2, ScaleAnimation.RELATIVE_TO_SELF,0.5f, ScaleAnimation.RELATIVE_TO_SELF,0.5f);

        sa.setDuration(3000);

        set.addAnimation(sa);

        RotateAnimation ra = new RotateAnimation(0, -359, RotateAnimation.RELATIVE_TO_SELF,0.5f, RotateAnimation.RELATIVE_TO_SELF,0.5f);

        ra.setDuration(3000);

        set.addAnimation(ra);

        iv.startAnimation(set);

    }

 

    public void translateClick2(View view) {

        Animation animation = AnimationUtils.loadAnimation(this, R.anim.translate_anim);

        animation.setFillAfter(true);

        iv.startAnimation(animation);

    }

 

    public void alphaClick2(View view) {

        Animation animation = AnimationUtils.loadAnimation(this, R.anim.alpha_anim);

        iv.startAnimation(animation);

    }

 

    public void scaleClick2(View view) {

        Animation animation = AnimationUtils.loadAnimation(this, R.anim.scale_anim);

        iv.startAnimation(animation);

    }

 

    public void rotateClick2(View view) {

        Animation animation = AnimationUtils.loadAnimation(this, R.anim.rotate_anim);

        iv.startAnimation(animation);

    }

 

    public void setClick9(View view) {

        Animation animation = AnimationUtils.loadAnimation(this, R.anim.set_anim);

        iv.startAnimation(animation);

    }

}

 

（四）插值器

 

 

【注释】：

    AccelerateDecelerateInterpolator   在动画开始与结束的地方速率改变比较慢，在中间的时候加速

    AccelerateInterpolator                     在动画开始的地方速率改变比较慢，然后开始加速

    BounceInterpolator                          动画结束的时候弹起

    CycleInterpolator                             动画循环播放特定的次数，速率改变沿着正弦曲线

    DecelerateInterpolator                    在动画开始的地方快然后慢

    LinearInterpolator                            以常量速率改变

 

三、帧动画：

        Frame Animation（AnimationDrawable对象）：帧动画，就像GIF图片，通过一系列Drawable依次显示来模拟动画的效果。

        必须以<animation-list>为根元素，以<item>表示要轮换显示的图片，duration属性表示各项显示的时间。XML文件要放在/res/anim/或者/res/animator目录下。

（一）、实例代码：

<?xml version="1.0"encoding="utf-8"?>

<!--android:oneshot="true"动画是否播放一次-->

<animation-list xmlns:android="http://schemas.android.com/apk/res/android"

                android:oneshot="true">

    <item

        android:drawable="@drawable/p0"

        android:duration="200"></item>

    <item

        android:drawable="@drawable/p1"

        android:duration="200"></item>

    <item

        android:drawable="@drawable/p2"

        android:duration="200"></item>

    <item

        android:drawable="@drawable/p3"

        android:duration="200"></item>

    <item

        android:drawable="@drawable/p4"

        android:duration="200"></item>

</animation-list>

 

【备注：】

drawable 当前帧引用的drawable资源

duration 当前帧显示的时间（毫秒为单位）

oneshot 如果为true，表示动画只播放一次停止在最后一帧上，如果设置为false表示动画循环播放。

 

MainActivity.java代码：

ad = (AnimationDrawable) iv1.getDrawable();

iv1.setOnClickListener(new View.OnClickListener() {

    @Override

    public voidonClick(View v) {

        //如果动画正在执行，先停止，再执行

        if(ad.isRunning()){

            ad.stop();

        }

        ad.start();

    }

});

 

【备注：】

        SDK中提到，不要在onCreate()中调用start()，因为AnimationDrawable还没有完全跟Window相关联，如果想要界面显示时就开始动画的话，可以在onWindowFoucsChanged()中调用start()。

 

 

四、属性动画：

（一）、概念：

        属性动画，这个是在Android 3.0中才引进的。Property Animation故名思议就是通过动画的方式改变对象的属性.属性动画更改的是对象的实际属性，在View Animation（Tween Animation）中，其改变的是View的绘制效果，真正的View的属性保持不变。可以将属性动画理解为增强版的补间动画。

        比如无论如何缩放Button的大小，Button的有效点击区域还是没有应用动画时的区域，其位置与大小都不变。而在Property Animation中，改变的是对象的实际属性，如Button的缩放，Button的位置与大小属性值都改变了。

        Property Animation不止可以应用于View，还可以应用于任何对象。Property Animation只是表示一个值在一段时间内的改变，当值改变时要做什么事情完全是你自己决定的。

 

（二）、常用属性：

1. Duration动画的持续时间，默认300ms。android:duration属性

2. Time interpolation：时间插值。LinearInterpolator、AccelerateDecelerateInterpolator，定义动画的变化率。android:interpolator属性

3. Repeat count and behavior：重复次数、以及重复模式；可以定义重复多少次；重复时从头开始，还是反向。android:repeatCount属性

4. Animator sets: 动画集合，你可以定义一组动画，一起执行或者顺序执行。<set/>，该元素的android:ordering属性指定该组动画是按次序播放还是同时播放。

5. Frame refresh delay：帧刷新延迟（帧刷新频率，每个多久播放一帧）；默认为10ms，但最终依赖系统的当前状态。

（三）、属性动画API：相关的类

1. ObjectAnimator 动画的执行类（是ValueAnimator的子类，使用简单常用。少数场景下，由于其存在一些限制，再考虑使用ValueAnimator）

2. ValueAnimator 动画的执行类

3. AnimatorSet 用于控制一组动画的执行：线性，一起，每个动画的先后执行等。总的来说，属性动画就是，动画的执行类来设置动画操作的对象的属性、持续时间，开始和结束的属性值，时间差值等，然后系统会根据设置的参数动态的变化对象的属性。

 

（一）、实例代码：

public class MainActivityextends AppCompatActivity {

 

    private ImageViewiv1;

 

    @Override

    protected voidonCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        iv1 = ((ImageView) findViewById(R.id.iv1));

        iv1.setOnClickListener(newView.OnClickListener() {

            @Override

            public voidonClick(View v) {

                Toast.makeText(MainActivity.this,"123", Toast.LENGTH_SHORT).show();

            }

        });

        //布局上的控件出场动画

        LinearLayout linearLayout = (LinearLayout) findViewById(R.id.ll);

        ScaleAnimation sa = new ScaleAnimation(0, 1, 0, 1);

        sa.setDuration(500);

        //0表示所有动画同时执行，1表示延迟1s

        LayoutAnimationController lac =new LayoutAnimationController(sa,0.5f);

        lac.setOrder(LayoutAnimationController.ORDER_RANDOM);

        linearLayout.setLayoutAnimation(lac);

    }

 

    public void translateClick(View view) {

        //1.执行该动画的控件

        //2.变化的属性名称

        //。。。属性变化的值

        ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(iv1,"translationX", 0, 200, 0);

        objectAnimator.setDuration(5000);

        objectAnimator.start();

    }

 

    public void alphaClick(View view) {

        ObjectAnimator oa = ObjectAnimator.ofFloat(iv1,"alpha", 0f, 0.5f, 0f, 1f);

        oa.setDuration(5000);

        oa.start();

    }

 

    public void scaleClick(View view) {

        ObjectAnimator oa = ObjectAnimator.ofFloat(iv1,"scaleX", 0, 1, 0.5f, 1);

        oa.setDuration(5000);

        oa.start();

    }

 

    public void rotateClick(View view) {

        //rotateY表示绕Y轴旋转

        //rotateX表示绕X轴旋转

        //rotate表示绕中心点旋转

        ObjectAnimator oa = ObjectAnimator.ofFloat(iv1,"rotation", 0, 359);

        oa.setRepeatCount(ObjectAnimator.INFINITE);

        oa.setRepeatMode(ObjectAnimator.RESTART);

        //线型插值器，动画匀速执行

        oa.setInterpolator(newLinearInterpolator());

        oa.setDuration(5000);

        oa.start();

    }

 

    public void animClick1(View view) {

        //定义组合动画，第一个参数表示修改的属性名称，后面的参数表示属性值的变化

        PropertyValuesHolder pv1 = PropertyValuesHolder.ofFloat("rotation",0, 359);

        PropertyValuesHolder pv2 = PropertyValuesHolder.ofFloat("scaleX",1, 2);

        PropertyValuesHolder pv3 = PropertyValuesHolder.ofFloat("translationX",0, 200);

        PropertyValuesHolder pv4 = PropertyValuesHolder.ofFloat("alpha",0.5f, 1f);

        //将所有的组合动画添加到ObjectAnimator中

        ObjectAnimator oa = ObjectAnimator.ofPropertyValuesHolder(iv1, pv1, pv2, pv3, pv4);

        oa.setDuration(5000);

        oa.start();

    }

 

    public void animClick2(View view) {

        MyImageView miv = new MyImageView(iv1);

//        ObjectAnimator oa = ObjectAnimator.ofInt(miv, "width", 0, 200);

        ObjectAnimator oa = ObjectAnimator.ofInt(miv,"height", 0, 200);

        oa.setDuration(5000);

        oa.start();

    }

}