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

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

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

帧动画使用详解

补间动画使用详解

属性动画使用详解

2D 动画使用详解

3D 动画使用详解

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

微信公众号：ProgramAndroid

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

2. 补间动画使用详解

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

补间动画分类：

透明动画 AlphaAnimation

旋转动画 ScaleAnimation

缩放动画 RotateAnimation

平移动画 TranslateAnimation

动画集合 AnimationSet

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. 属性动画使用详解

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

属性动画关键类如下：

ValueAnimator

ObjectAnimator

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();

属性动画分类：

透明动画 alpha

旋转动画 rotation

缩放动画 scaleX

平移动画 translationX

动画集合 AnimatorSet

动画监听事件 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 动画使用详解(一) 帧动画

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

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

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

2. 补间动画使用详解

1. 透明动画

2. 旋转动画

3. 缩放动画

4. 平移动画

5. 动画集合

6. XML 实现动画效果

3. 属性动画使用详解

1. ValueAnimator

2. ObjectAnimator

1. 透明动画

2. 旋转动画

3. 缩放动画

4. 平移动画

5. 动画集合

6. 动画监听事件

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

ProgramAndroid

我爱编程

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

2. 补间动画 使用详解

1. 透明动画

2. 旋转动画

3. 缩放动画

4. 平移动画

5. 动画集合

6. XML 实现动画效果

3. 属性动画 使用详解

1. ValueAnimator

2. ObjectAnimator

1. 透明动画

2. 旋转动画

3. 缩放动画

4. 平移动画

5. 动画集合

6. 动画监听事件

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

ProgramAndroid

我爱编程

2. 补间动画使用详解

3. 属性动画使用详解