您的位置:首页 > 其它

属性动画和视图动画

2016-02-18 13:49 369 查看
安卓中动画主要包括两大类:view视图动画和property属性动画

    而view动画又分为两种:Frame逐帧动画和Tween补间动画

          Frame逐帧动画:主要用于简单的动画,就像放电影一样一帧一帧的播放对应的图片,生成类似于GIF动态图效果。DrawableAnimation也是指此类动画

          Tween补间动画:主要包括四种动画Alpha透明度,Translate位移,Rotate旋转,Scale缩放效果

  

view视图动画相比属性动画,有一个很大的区别特点:视图动画只是显示位置的变化,view的实际位置并未改变,表现为view移动到其他地方,点击事件仍在原来的地方才能响应。而属性动画恰恰相反(注android 3.0 API 11 后才出现的属性动画)

Property属性动画:

   该动画有一些相关类组成。

         1.ObjectAnimator :对象动画执行类。   

[align=left]         2.ValueAnimator :值动画执行类,常配合AnimatorUpdateListener使用。[/align]
[align=left]         3.PropertyValuesHolder : 属性存储器,为两个执行类提供更新多个属性的功能。[/align]
[align=left]         4.Keyframe :为 PropertyValuesHolder提供多个关键帧的操作值。[/align]
[align=left]         5.AnimatorSet :一组动画的执行集合类:设置执行的先后顺序,时间等。[/align]
[align=left]         6.AnimatorUpdateListener :动画更新监听。[/align]
[align=left]         7.AnimatorListener :动画执行监听,在动画开始、重复、结束、取消时进行回调。[/align]
[align=left]         8.AnimatorInflater :加载属性动画的xml文件。[/align]
[align=left]         9.TypeEvaluator :类型估值,用于设置复杂的动画操作属性的值。[/align]
[align=left]         10. TimeInterpolator :时间插值,用于控制动画执行过程。

1.ObjectAnimator对象动画执行类[/align]

[align=left]介绍:[/align]
[align=left]1. 通过静态方法ofInt、ofFloat、ofObject、ofPropertyValuesHolder 获取类对象。[/align]
[align=left]2. 根据属性值类型选择静态方法,如view的setLeft(int left) 则选用ofInt方法, setY(float y)则选用ofFloat方法。[/align]
[align=left]3. 同ValueAnimator一样,可以进行串联式使用,示例如下。[/align]

    第一个简单示例:View的横向移动    

       // 通过静态方法构建一个ObjectAnimator对象

       // 设置作用对象、属性名称、数值集合

           ObjectAnimator.ofFloat(view, "translationX", 0.0F, 200.0F)

       // 设置执行时间(1000ms)

           .setDuration(1000)

      // 开始动画

          .start();

   第二个复杂点的示例:View弹性落下然后弹起,执行一次。

     // 修改view的y属性, 从当前位置移动到300.0f

        ObjectAnimator yBouncer = ObjectAnimator.ofFloat(view, "y",

                view.getY(), 300.0f);

        yBouncer.setDuration(1500);

        // 设置插值器(用于调节动画执行过程的速度)

        yBouncer.setInterpolator(new BounceInterpolator());

        // 设置重复次数(缺省为0,表示不重复执行)

        yBouncer.setRepeatCount(1);

        // 设置重复模式(RESTART或REVERSE),重复次数大于0或INFINITE生效

        yBouncer.setRepeatMode(ValueAnimator.REVERSE);

        // 设置动画开始的延时时间(200ms)

        yBouncer.setStartDelay(200);

        // 开始动画

        yBouncer.start();
[align=left]2.ValueAnimator 值动画执行类[/align]

[align=left]介绍:[/align]
[align=left]1. 构造方法与ObjectAnimator类似。[/align]
[align=left]2. 与ObjectAnimator的区别在于ValueAnimator构造函数的参数中不包含动画“属性”信息。[/align]
[align=left]3. 优点:结合动画更新监听onAnimationUpdate使用,可以在回调中不断更新View的多个属性,使用起来更加灵活。[/align]
   第三个示例View向右下角移动:    // 通过静态方法构建一个ValueAnimator对象

        // 设置数值集合

        ValueAnimator animator = ValueAnimator.ofFloat(0f, 200.0f);

        // 设置作用对象

        animator.setTarget(view);

        // 设置执行时间(1000ms)

        animator.setDuration(1000);

        // 添加动画更新监听

        animator.addUpdateListener(new AnimatorUpdateListener() {

            @Override

            public void onAnimationUpdate(ValueAnimator animation) {

                // 获取当前值

                Float mValue = (Float) animation.getAnimatedValue();

                // 设置横向偏移量

                view.setTranslationX(mValue);

                // 设置纵向偏移量

                view.setTranslationY(mValue);

            }

        });

        // 开始动画

        animator.start();

3.PropertyValuesHolder 属性存储器


[align=left]介绍:[/align]
[align=left]为ValueAnimator提供多个操作属性及相应的执行参数。       [/align]
第四个示例:同时修改View多个属性的动画

     // 获取view左边位置

        int left = view.getLeft();

        // 获取view右边位置

        int right = view.getRight();

        // 将view左边增加10像素

        PropertyValuesHolder pvhLeft = PropertyValuesHolder.ofInt("left", left,

                left + 10);

        // 将view右边减少10像素

        PropertyValuesHolder pvhRight = PropertyValuesHolder.ofInt("right",

                right, right - 10);

        // 在X轴缩放从原始比例1f,缩小到最小0f,再放大到原始比例1f

        PropertyValuesHolder pvhScaleX = PropertyValuesHolder.ofFloat("scaleX",

                1f, 0f, 1f);

        // 在Y轴缩放从原始比例1f,缩小到最小0f,再放大到原始比例1f

        PropertyValuesHolder pvhScaleY = PropertyValuesHolder.ofFloat("scaleY",

                1f, 0f, 1f);

        // 将PropertyValuesHolder交付给ObjectAnimator进行构建

        ObjectAnimator customAnim = ObjectAnimator.ofPropertyValuesHolder(view,

                pvhLeft, pvhRight, pvhScaleX, pvhScaleY);

        // 设置执行时间(1000ms)

        customAnim.setDuration(1000);

        // 开始动画

        customAnim.start();
4.Keyframe 关键帧
[align=left]介绍:[/align]
[align=left]为 PropertyValuesHolder提供关键帧的操作值集合。 [/align]
第五个示例:以下示例表示该PropertyValuesHolder进行的旋转(rotation)动
4000
画,在执行时间在0%, 50%, 100%时,其旋转角度分别为0°, 360°, 0°。动画执行过程中自动进行补间。表现为自旋360°后再转回来。

              // 设置在动画开始时,旋转角度为0度

        Keyframe kf0 = Keyframe.ofFloat(0f, 0f);

        // 设置在动画执行50%时,旋转角度为360度

        Keyframe kf1 = Keyframe.ofFloat(.5f, 360f);

        // 设置在动画结束时,旋转角度为0度

        Keyframe kf2 = Keyframe.ofFloat(1f, 0f);

        // 使用PropertyValuesHolder进行属性名称和值集合的封装

        PropertyValuesHolder pvhRotation = PropertyValuesHolder.ofKeyframe(

                "rotation", kf0, kf1, kf2);

        // 通过ObjectAnimator进行执行

        ObjectAnimator.ofPropertyValuesHolder(view, pvhRotation)

        // 设置执行时间(1000ms)

                .setDuration(1000)

                // 开始动画

                .start();
[align=left]5.AnimatorSet 执行集合类[/align]

[align=left]介绍:[/align]
[align=left]1. 为多个属性动画提供播放顺序控制(注意play,with,after,before的用法)。[/align]
[align=left]2. AnimatorSet类与AnimationSet类不能搞混,AnimatorSet在3.0及以上版本中才有。3.0之前的版本可使用第三方开源库nineoldandroids.jar进行支持,功能使用完全一致。[/align]
第六个示例:以下示例动画的播放顺序为

                        1.播放 bounceAnim;

                         2.同时播放 squashAnim1, squashAnim2,stretchAnim1, stretchAnim2;                        

                         3.接着播放 bounceBackAnim;
[align=left]                        4.最后播放 fadeAnim;[/align]
         AnimatorSet bouncer = new AnimatorSet();

         bouncer.play(bounceAnim).before(squashAnim1);

         bouncer.play(squashAnim1).with(squashAnim2);

         bouncer.play(squashAnim1).with(stretchAnim1);

         bouncer.play(squashAnim1).with(stretchAnim2);

         bouncer.play(bounceBackAnim).after(stretchAnim2);

         ValueAnimator fadeAnim = ObjectAnimator.ofFloat(newBall, "alpha", 1f,  0f);

         fadeAnim.setDuration(250);

         AnimatorSet animatorSet = new AnimatorSet();

         animatorSet.play(bouncer).before(fadeAnim);

         animatorSet.start();

详细代码参见:http://developer.android.com/guide/topics/graphics/prop-animation.html
[align=left]6. AnimatorUpdateListener动画更新监听[/align]

[align=left]介绍:[/align]
[align=left]1.在动画执行过程中,每次更新都会调用该回调,可以在该回调中手动更新view的属性。 [/align]
[align=left]2.当调用的属性方法中没有进行View的重绘时,需要进行手动触发重绘。设置AnimatorUpdateListener监听,并在onAnimationUpdate回调中执行View的invalidate()方法。[/align]
第七个示例:在回调中手动更新View对应属性:

            // 1. 在回调中手动更新View对应属性:

        AnimatorUpdateListener l = new AnimatorUpdateListener() {

            public void onAnimationUpdate(ValueAnimator animation) {

                // 当前的分度值范围为0.0f->1.0f

                // 分度值是动画执行的百分比。区别于AnimatedValue。

                float fraction = animation.getAnimatedFraction();

                // 以下的的效果为 View从完全透明到不透明,

                view.setAlpha(fraction);

                // Y方向向下移动300px的距离.

                view.setTranslationY(fraction * 300.0f);

            }

        };

        ValueAnimator mAnim = ValueAnimator.ofFloat(0f, 1.0f);

        mAnim.addUpdateListener(l);

        mAnim.setDuration(1000);

        mAnim.start();

第八个示例:在自定义View内部用于引发重绘:

          // 2. 在自定义View内部用于引发重绘

    public class MyAnimationView extends View implements

            ValueAnimator.AnimatorUpdateListener {

        public MyAnimationView(Context context) {

            super(context);

        }

        @Override

        public void onAnimationUpdate(ValueAnimator animation) {

            // 手动触发界面重绘

            invalidate();

        }

    }

[align=left]7.AnimatorListener 动画执行监听[/align]

[align=left]介绍:[/align]
[align=left]1. 实现AnimatorListener中的方法可在动画执行全程进行其他任务的回调执行。[/align]
[align=left]2. 也可以添加AnimatorListener的实现类AnimatorListenerAdapter,仅重写需要的监听即可。[/align]
第九个示例:

      // 将view透明度从当前的1.0f更新为0.5f,在动画结束时移除该View

        ObjectAnimator anim = ObjectAnimator.ofFloat(view, "alpha", 0.5f);

        anim.setDuration(1000);

        anim.addListener(new AnimatorListener() {

            @Override

            public void onAnimationStart(Animator animation) {

                // 动画开始时调用

            }

            @Override

            public void onAnimationRepeat(Animator animation) {

                // 动画重复时调用

            }

            @Override

            public void onAnimationEnd(Animator animation) {

                // 动画结束时调用

                ViewGroup parent = (ViewGroup) view.getParent();

                if (parent != null)

                    parent.removeView(view);

            }

            @Override

            public void onAnimationCancel(Animator animation) {

                // 动画取消时调用

            }

        });

        anim.start();
[align=left]8.AnimatorInflater 动画加载器[/align]

[align=left]介绍:[/align]
[align=left]1. 属性动画可以通过xml文件的形式加载。[/align]
[align=left]2. set标签内的animator也可单独使用。[/align]
[align=left]3. XML语法如下:[/align]
<setandroid:ordering=["together" ¦ "sequentially"]>

          <objectAnimator

              android:propertyName="string"

              android:duration="int"

              android:valueFrom="float¦ int ¦ color"

              android:valueTo="float¦ int ¦ color"

              android:startOffset="int"

              android:repeatCount="int"

              android:repeatMode=["repeat"¦ "reverse"]

              android:valueType=["intType"¦ "floatType"]/>

          <animator

              android:duration="int"

              android:valueFrom="float¦ int ¦ color"

              android:valueTo="float¦ int ¦ color"

              android:startOffset="int"

              android:repeatCount="int"

              android:repeatMode=["repeat"¦ "reverse"]

              android:valueType=["intType"¦ "floatType"]/>

          <set>

              ...

          </set>

</set>

示例如下:

        // 加载xml属性动画

        Animator anim = AnimatorInflater

                .loadAnimator(this, R.anim.animator_set);

        anim.setTarget(view);

        anim.start();

xml文件如下:

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

<set>

    <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"

        android:duration="1000"

        android:valueTo="200"

        android:valueType="floatType"

        android:propertyName="x"

        android:repeatCount="1"

        android:repeatMode="reverse"/>

    <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"

        android:duration="1000"

        android:valueTo="400"

        android:valueType="floatType"

        android:propertyName="y"

        android:repeatCount="1"

        android:repeatMode="reverse"/>

</set>

[align=left]9.TypeEvaluator  类型估值[/align]

[align=left]介绍:[/align]
[align=left]1. TypeEvaluator可传入参数值的类型(本例为PointF)。[/align]
[align=left]2. 重写函数public T evaluate(floatfraction, T startValue, T endValue);实现不同需求值的计算。[/align]
[align=left]3. 注意fraction的使用,fraction是从开始到结束的分度值0.0 -> 1.0。[/align]
示例:

            // 类型估值 - 抛物线示例

        TypeEvaluator<PointF> typeEvaluator = new TypeEvaluator<PointF>() {

            @Override

            public PointF evaluate(float fraction, PointF startValue,

                    PointF endValue) {

                float time = fraction * 3;

                Log.e(TAG, time + "");

                // x方向200px/s ,y方向0.5 * 200 * t * t

                PointF point = new PointF();

                point.x = 120 * time;

                point.y = 0.5f * 200 * time * time;

                return point;

            }

        };

        ValueAnimator valueAnimator = ValueAnimator.ofObject(typeEvaluator,

                new PointF(0, 0));

        valueAnimator.setInterpolator(new LinearInterpolator());

        valueAnimator.setDuration(3000);

        valueAnimator.start();

        

        valueAnimator.addUpdateListener(new AnimatorUpdateListener() {

            @Override

            public void onAnimationUpdate(ValueAnimator animation) {

                PointF point = (PointF) animation.getAnimatedValue();

                view.setX(point.x);

                view.setY(point.y);

            }

        });
[align=left]10. TimeInterpolator 时间插值器[/align]

[align=left]1.    几种常见的插值器:[/align]
       
[align=left]           Interpolator对象                                                                     资源ID                                                                            功能作用
[/align]

       AccelerateDecelerateInterpolator                   @android:anim/accelerate_decelerate_interpolator              先加速再减速

      AccelerateInterpolator                                         @android:anim/accelerate_interpolator                                   加速

      AnticipateInterpolator                                           @android:anim/anticipate_interpolator                                   先回退一小步然后加速前进

      AnticipateOvershootInterpolator                       @android:anim/anticipate_overshoot_interpolator                 在上一个基础上超出终点一小步再回到终点

      BounceInterpolator                                             @android:anim/bounce_interpolator                                        最后阶段弹球效果

      CycleInterpolator                                                  @android:anim/cycle_interpolator                                            @android:anim/cycle_interpolator

      DecelerateInterpolator                                      @android:anim/decelerate_interpolator                                    减速

      LinearInterpolator                                               @android:anim/linear_interpolator                                            匀速

      OvershootInterpolator                                        @android:anim/overshoot_interpolator                                     快速到达终点并超出一小步最后回到终点

[align=left]2. 自定义插值器[/align]
[align=left]a.实现Interpolator(TimeInterpolator)接口;[/align]
[align=left]b.重写接口函数float getInterpolation(floatinput)。[/align]
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息