美文网首页ProgramAndroid我爱编程
Android 动画使用详解(一) 帧动画

Android 动画使用详解(一) 帧动画

作者: 程序员Android1 | 来源:发表于2018-04-17 09:57 被阅读12次

动画在Android 开发中经常会被用到,好的动画效果可以达到事半功倍的效果。
动画分类: 1. 帧动画 2.补间动画 3.属性动画

  1. 帧动画 使用详解
  2. 补间动画 使用详解
  3. 属性动画 使用详解
  4. 2D 动画 使用详解
  5. 3D 动画 使用详解

欢迎关注微信公众号:程序员Android
公众号ID:ProgramAndroid
获取更多信息

微信公众号:ProgramAndroid

我们不是牛逼的程序员,我们只是程序开发中的垫脚石。
我们不发送红包,我们只是红包的搬运工。

2. 补间动画 使用详解

补间动画也是Android中常用的动画之一,相对属性动画来说,补间动画的点击事件午饭跟着动画的位置变化而变化。后续将逐渐被属性动画替代。

补间动画分类:

  1. 透明动画 AlphaAnimation
  2. 旋转动画 ScaleAnimation
  3. 缩放动画 RotateAnimation
  4. 平移动画 TranslateAnimation
  5. 动画集合 AnimationSet
  6. XML 实现动画效果

1. 透明动画

  • AlphaAnimation
 /**
         * 透明度动画AlphaAnimation 从不透明到完全透明
         * **/
        // 起始透明度 到结束透明度 不透明到透明(1f-0f)
        AlphaAnimation alphaAnimation = new AlphaAnimation(0.0f, 1.0f);
        // 动画执行时间
        alphaAnimation.setDuration(4000);
        // 设置重复次数
        alphaAnimation.setRepeatCount(2);
        // 重复模式
        alphaAnimation.setRepeatMode(Animation.RESTART);
        // alphaAnimation.setRepeatMode(Animation.REVERSE);
        // 保持结束时候的状态
        alphaAnimation.setFillAfter(true);
        mImageView.startAnimation(alphaAnimation);

2. 旋转动画

  • RotateAnimation
   /**
         * 旋转动画RotateAnimation,旋转360度
         **/

        RotateAnimation rotateAnimation = new RotateAnimation(0, 360);
        rotateAnimation.setDuration(2000);
        rotateAnimation.setRepeatCount(2);
        mImageView.startAnimation(rotateAnimation);

3. 缩放动画

  • ScaleAnimation
        /**
         * 缩放动画 ScaleAnimation使用方法 缩放2倍
         * */
        ScaleAnimation scaleAnimation = new ScaleAnimation(1, 2, 1, 2);
        scaleAnimation.setDuration(2000);
        scaleAnimation.setRepeatCount(2);
        scaleAnimation.setRepeatMode(Animation.RESTART);
        mImageView.startAnimation(scaleAnimation);

4. 平移动画

  • TranslateAnimation
    /***
         * 平移动画TranslateAnimation 从x,y 轴 从(0,0)平移到(300,200) *
         **/
        TranslateAnimation translateAnimation = new TranslateAnimation(0,
                300.f, 0, 200.f);
        translateAnimation.setDuration(2000);
        translateAnimation.setRepeatCount(2);
        translateAnimation.setRepeatMode(Animation.RESTART);
        mImageView.startAnimation(translateAnimation);

5. 动画集合

  • AnimationSet
   /***
         * 动画集合使用效果如下:
         * ***/
        AnimationSet sets = new AnimationSet(true);

        AlphaAnimation alphaAnimation1 = new AlphaAnimation(0.0f, 1.0f);
        TranslateAnimation translateAnimation1 = new TranslateAnimation(0,
                100.f, 0, 100.f);
        RotateAnimation rotateAnimation1 = new RotateAnimation(0, 360);
        ScaleAnimation scaleAnimation1 = new ScaleAnimation(1, 2, 1, 2);

        // 将动画添加到set集合中
        sets.addAnimation(alphaAnimation1);
        sets.addAnimation(translateAnimation1);
        sets.addAnimation(rotateAnimation1);
        sets.addAnimation(scaleAnimation1);

        sets.setDuration(4000);
        sets.setRepeatCount(2);
        sets.setRepeatMode(Animation.RESTART);
        mImageView.startAnimation(sets);

6. XML 实现动画效果

  • 1.动画的XML文件所属的res/anim/hyperspace_jump.xml
<set android:shareInterpolator="false">
    <scale
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:fromXScale="1.0"
        android:toXScale="1.4"
        android:fromYScale="1.0"
        android:toYScale="0.6"
        android:pivotX="50%"
        android:pivotY="50%"
        android:fillAfter="false"
        android:duration="700" />
    <set android:interpolator="@android:anim/decelerate_interpolator">
        <scale
           android:fromXScale="1.4"
           android:toXScale="0.0"
           android:fromYScale="0.6"
           android:toYScale="0.0"
           android:pivotX="50%"
           android:pivotY="50%"
           android:startOffset="700"
           android:duration="400"
           android:fillBefore="false" />
        <rotate
           android:fromDegrees="0"
           android:toDegrees="-45"
           android:toYScale="0.0"
           android:pivotX="50%"
           android:pivotY="50%"
           android:startOffset="700"
           android:duration="400" />
    </set>
</set>
  • 2.为图片Load 动画xml文件
   ImageView spaceshipImage = (ImageView) findViewById(R.id.spaceshipImage);
   Animation hyperspaceJumpAnimation = AnimationUtils.loadAnimation(this, R.anim.hyperspace_jump);
   spaceshipImage.startAnimation(hyperspaceJumpAnimation);

3. 属性动画 使用详解

属性动画点击事件可以随位置到改变而改变

属性动画关键类如下:

  1. ValueAnimator
  2. ObjectAnimator
  3. TypeEvaluator

1. ValueAnimator

使用方法如下:

    ValueAnimator animation = ValueAnimator.ofFloat(0f, 100f);
    animation.setDuration(1000);
    animation.start();

2. ObjectAnimator

使用方法如下:

ObjectAnimator animation = ObjectAnimator.ofFloat(textView, "translationX", 100f);
animation.setDuration(1000);
animation.start();

属性动画分类:

  1. 透明动画 alpha
  2. 旋转动画 rotation
  3. 缩放动画 scaleX
  4. 平移动画 translationX
  5. 动画集合 AnimatorSet
  6. 动画监听事件 addListener

1. 透明动画

  • alpha
   /**
         * alpha 透明动画 1.属性动画作用在谁身上 2.属性名称 3.属性的变化范围值 透明值
         * **/
        ObjectAnimator alphaanimator = ObjectAnimator.ofFloat(mImageView,
                "alpha", 0, 1.0f);
        alphaanimator.setDuration(4000);
        alphaanimator.setRepeatCount(2);
        alphaanimator.start();

2. 旋转动画

  • rotation
     /**
         * 旋转动画 rotation
         * */
        ObjectAnimator rotationanimator = ObjectAnimator.ofFloat(mImageView,
                "rotation", 0, 360);
        rotationanimator.setDuration(2000);
        rotationanimator.setRepeatCount(2);
        rotationanimator.setRepeatMode(Animation.RESTART);
        rotationanimator.start();

3. 缩放动画

  • scaleX
       /**
         * scaleX 缩放动画
         *
         * */
        ObjectAnimator scaleXanimator = ObjectAnimator.ofFloat(mImageView,
                "scaleX", 0, 2);
        scaleXanimator.setDuration(2000);
        scaleXanimator.setRepeatCount(2);
        scaleXanimator.setRepeatMode(Animation.RESTART);
        scaleXanimator.start();

4. 平移动画

  • translationX
      /**
         * translationX平移动画
         *
         * */
        ObjectAnimator translationanimator = ObjectAnimator.ofFloat(mImageView,
                "translationX", 0, 200f);
        translationanimator.setDuration(2000);
        translationanimator.setRepeatCount(2);
        translationanimator.setRepeatMode(Animation.RESTART);
        translationanimator.start();

5. 动画集合

  • AnimatorSet
 /**
         * 动画集合效果 rotation
         * */

        AnimatorSet animatorSet = new AnimatorSet();
        ObjectAnimator animator1 = ObjectAnimator.ofFloat(mImageView, "alpha",
                0, 1.0f);
        ObjectAnimator animator2 = ObjectAnimator.ofFloat(mImageView,
                "translationX", 0, 100f);
        ObjectAnimator animator3 = ObjectAnimator.ofFloat(mImageView, "scaleX",
                0, 3);
        ObjectAnimator animator4 = ObjectAnimator.ofFloat(mImageView,
                "rotation", 0, 90);
        List<Animator> list = new ArrayList<Animator>();

        // 将动画集合添加到list集合中
        list.add(animator1);
        list.add(animator2);
        list.add(animator3);
        list.add(animator4);

        // 播放集合中的动画
        animatorSet.playSequentially(list);
        animatorSet.setDuration(2000);
        animatorSet.start();

6. 动画监听事件

  scaleXanimator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationCancel(Animator animation) {
                super.onAnimationCancel(animation);
            }

            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
            }

            @Override
            public void onAnimationRepeat(Animator animation) {
                super.onAnimationRepeat(animation);
            }

            @Override
            public void onAnimationStart(Animator animation) {
                super.onAnimationStart(animation);
            }

            @Override
            public void onAnimationPause(Animator animation) {
                super.onAnimationPause(animation);
            }

            @Override
            public void onAnimationResume(Animator animation) {
                super.onAnimationResume(animation);
            }
        });

​欢迎关注微信公众号:程序员Android
公众号ID:ProgramAndroid
获取更多信息

微信公众号:ProgramAndroid

我们不是牛逼的程序员,我们只是程序开发中的垫脚石。
我们不发送红包,我们只是红包的搬运工。

点击阅读原文,获取更多福利


相关文章

  • Android 动画使用解析

    Android 动画不详解(主要介绍了使用方法) Android 中的动画主要分为三类:补间动画,帧动画,和属性动...

  • Android开源库项目及库汇总——动画

    动画 Android应用开发之所有动画使用详解– Android应用开发之所有动画使用详解。 动画特效大全– An...

  • Android 动画锦集

    Android 动画可分为逐帧动画、补间动画、属性动画。使用传统的逐帧动画、补间动画可以实现 Android 基本...

  • Android 动画使用详解(一) 帧动画

    动画在Android开发中经常会被用到,好的动画效果可以达到事半功倍的效果,本文主要是帧动画的实现。帧动画主要实现...

  • Android 动画使用详解(一) 帧动画

    动画在Android 开发中经常会被用到,好的动画效果可以达到事半功倍的效果。动画分类: 1. 帧动画 2.补间...

  • Android 动画 - 插值器

    系列文章传送门: Android 动画 - 帧动画 & 补间动画Android 动画 - 插值器 基本使用 在之前...

  • Android开发之帧动画

    Android动画主要分为3种 View动画(Android开发之View动画) 帧动画 属性动画 何为帧动画? ...

  • Android动画开发精要

    3个分类 View 动画, 属性动画, 帧动画 View动画(android 3.0以下使用) Translate...

  • Android开发之属性动画

    Android动画主要分为3种 View动画(Android开发之View动画) 帧动画(Android开发之帧动...

  • Android 逐帧动画

    Android 3.0 之前的版本,我们能使用的动画类型有两种,分别是逐帧动画和补帧动画;在 Android 3....

网友评论

    本文标题:Android 动画使用详解(一) 帧动画

    本文链接:https://www.haomeiwen.com/subject/soacuxtx.html