Java学习者论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

手机号码,快捷登录

恭喜Java学习者论坛(https://www.javaxxz.com)已经为数万Java学习者服务超过8年了!积累会员资料超过10000G+
成为本站VIP会员,下载本站10000G+会员资源,购买链接:点击进入购买VIP会员
JAVA高级面试进阶视频教程Java架构师系统进阶VIP课程

分布式高可用全栈开发微服务教程

Go语言视频零基础入门到精通

Java架构师3期(课件+源码)

Java开发全终端实战租房项目视频教程

SpringBoot2.X入门到高级使用教程

大数据培训第六期全套视频教程

深度学习(CNN RNN GAN)算法原理

Java亿级流量电商系统视频教程

互联网架构师视频教程

年薪50万Spark2.0从入门到精通

年薪50万!人工智能学习路线教程

年薪50万!大数据从入门到精通学习路线年薪50万!机器学习入门到精通视频教程
仿小米商城类app和小程序视频教程深度学习数据分析基础到实战最新黑马javaEE2.1就业课程从 0到JVM实战高手教程 MySQL入门到精通教程
查看: 186|回复: 0

[默认分类] 【Android动画】之Tween动画 (渐变、缩放、位移、旋转)

[复制链接]
  • TA的每日心情
    开心
    2021-12-13 21:45
  • 签到天数: 15 天

    [LV.4]偶尔看看III

    发表于 2018-7-6 10:48:35 | 显示全部楼层 |阅读模式

    Android 平台提供了两类动画。 一类是Tween动画,就是对场景里的对象不断的进行图像变化来产生动画效果(旋转、平移、放缩和渐变)。
    第二类就是 Frame动画,即顺序的播放事先做好的图像,与gif图片原理类似。
      
    下面就讲一下Tweene Animations。
      
    主要类:
      
    Animation   动画
    AlphaAnimation 渐变透明度
    RotateAnimation 画面旋转
    ScaleAnimation 渐变尺寸缩放
    TranslateAnimation 位置移动
    AnimationSet  动画集
      
      
    有了这些类,那么我们如何来实现动画效果呢?
      
    以自定义View为例,该View很简单,画面上只有一个图片。 现在我们要对整个View分别实现各种Tween动画效果。
      
    AlphaAnimation
      
    通过代码实现 AlphaAnimation,如下:
    //初始化
    Animation alphaAnimation = new AlphaAnimation(0.1f, 1.0f);
    //设置动画时间                        alphaAnimation.setDuration(3000);
                                    this.startAnimation(alphaAnimation);
    其中AlphaAnimation类第一个参数fromAlpha表示动画起始时的透明度, 第二个参数toAlpha表示动画结束时的透明度。
    setDuration用来设置动画持续时间。
      
    RotateAnimation


    代码:
    Animation rotateAnimation = new RotateAnimation(0f, 360f);
                                    rotateAnimation.setDuration(1000);
                                    this.startAnimation(rotateAnimation);
    其中RotateAnimation类第一个参数fromDegrees表示动画起始时的角度, 第二个参数toDegrees表示动画结束时的角度。
    另外还可以设置伸缩模式pivotXType、pivotYType, 伸缩动画相对于x,y 坐标的开始位置pivotXValue、pivotYValue等。
      
    ScaleAnimation
    代码:
    //初始化
    Animation scaleAnimation = new ScaleAnimation(0.1f, 1.0f,0.1f,1.0f);
    //设置动画时间
    scaleAnimation.setDuration(500);
                                    this.startAnimation(scaleAnimation);
    ScaleAnimation类中
    第一个参数fromX ,第二个参数toX:分别是动画起始、结束时X坐标上的伸缩尺寸。
    第三个参数fromY ,第四个参数toY:分别是动画起始、结束时Y坐标上的伸缩尺寸。
    另外还可以设置伸缩模式pivotXType、pivotYType, 伸缩动画相对于x,y 坐标的开始位置pivotXValue、pivotYValue等。
      
    TranslateAnimation
    代码:
    //初始化
    Animation translateAnimation = new TranslateAnimation(0.1f, 100.0f,0.1f,100.0f);
    //设置动画时间                                translateAnimation.setDuration(1000);
                                                            this.startAnimation(translateAnimation);
    TranslateAnimation类
      
    第一个参数fromXDelta ,第二个参数toXDelta:分别是动画起始、结束时X坐标。
    第三个参数fromYDelta ,第四个参数toYDelta:分别是动画起始、结束时Y坐标。
      
    参数详细说明:


      
       
        表二
       
       
        XML节点
        功能说明
       
       
        alpha
        渐变透明度动画效果
       
       
        <alpha
    android:fromAlpha=”0.1″
    android:toAlpha=”1.0″
    android:duration=”3000″ />
       
       
        fromAlpha
        属性为动画起始时透明度
        0.0表示完全透明
    1.0表示完全不透明
    以上值取0.0-1.0之间的float数据类型的数字
       
       
        toAlpha
        属性为动画结束时透明度
       
      


      
       
        表三
       
       
        scale
        渐变尺寸伸缩动画效果
       
       
        <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″ />
       
       
        fromXScale[float] fromYScale[float]
        为动画起始时,X、Y坐标上的伸缩尺寸
        0.0表示收缩到没有
    1.0表示正常无伸缩
    值小于1.0表示收缩
    值大于1.0表示放大
       
       
        toXScale [float]
    toYScale[float]
        为动画结束时,X、Y坐标上的伸缩尺寸
       
       
        pivotX[float]
    pivotY[float]
        为动画相对于物件的X、Y坐标的开始位置
        属性值说明:从0%-100%中取值,50%为物件的X或Y方向坐标上的中点位置
       
       
         
         
         
         
       
      


      
       
        表四
       
       
        translate
        画面转换位置移动动画效果
       
       
        <translate
    android:fromXDelta=”30″
    android:toXDelta=”-80″
    android:fromYDelta=”30″
    android:toYDelta=”300″
    android:duration=”2000″ />
       
       
        fromXDelta
    toXDelta
        为动画、结束起始时 X坐标上的位置
         
       
       
        fromYDelta
    toYDelta
        为动画、结束起始时 Y坐标上的位置
         
       
       
         
         
         
         
       
      


      
       
        表五
       
       
        rotate
        画面转移旋转动画效果
       
       
        <rotate
    android:interpolator=”@android:anim/accelerate_decelerate_interpolator”
    android:fromDegrees=”0″
    android:toDegrees=”+350″
    android:pivotX=”50%”
    android:pivotY=”50%”
    android:duration=”3000″ />
       
       
        fromDegrees
        为动画起始时物件的角度
        说明
    当角度为负数——表示逆时针旋转
    当角度为正数——表示顺时针旋转
    (负数from——to正数:顺时针旋转)
    (负数from——to负数:逆时针旋转)
    (正数from——to正数:顺时针旋转)
    (正数from——to负数:逆时针旋转)
       
       
        toDegrees
        属性为动画结束时物件旋转的角度 可以大于360度
       
       
        pivotX
    pivotY
        为动画相对于物件的X、Y坐标的开始位
        说明:以上两个属性值 从0%-100%中取值
    50%为物件的X或Y方向坐标上的中点位置
       
       
         
         
         
         
       
      

      
    以上都是单独的使用某个动画,那么如何让多个动画同时生效呢?


    答案是 AnimationSet。  
    初看整个类名,还以为只是用来存放 Animation的一个Set, 细看才发现,该类也是继承自 Animation的。
      
    下面我们实现一个动画,该动画会让图片移动的同时,图片透明度渐变,直接看代码吧。
                                    //初始化 Translate动画
                                    translateAnimation = new TranslateAnimation(0.1f, 100.0f,0.1f,100.0f);
                                    //初始化 Alpha动画
                                    alphaAnimation = new AlphaAnimation(0.1f, 1.0f);
                                   
                                    //动画集
                                    AnimationSet set = new AnimationSet(true);
                                    set.addAnimation(translateAnimation);
                                    set.addAnimation(alphaAnimation);
                                   
                                    //设置动画时间 (作用到每个动画)
                                    set.setDuration(1000);
                                    this.startAnimation(set);
      
    是不是觉得很简单呢?
      
      
    附上整个View类的代码吧。
    package com.yfz.view;
    import com.yfz.R;
    import android.content.Context;
    import android.graphics.Canvas;
    import android.graphics.drawable.BitmapDrawable;
    import android.util.Log;
    import android.view.KeyEvent;
    import android.view.View;
    import android.view.animation.AlphaAnimation;
    import android.view.animation.Animation;
    import android.view.animation.AnimationSet;
    import android.view.animation.RotateAnimation;
    import android.view.animation.ScaleAnimation;
    import android.view.animation.TranslateAnimation;
    public class TweenAnim extends View {
           
            //Alpha动画 - 渐变透明度
            private Animation alphaAnimation = null;
           
            //Sacle动画 - 渐变尺寸缩放
            private Animation scaleAnimation = null;
           
            //Translate动画 - 位置移动
            private Animation translateAnimation = null;
           
            //Rotate动画 - 画面旋转
            private Animation rotateAnimation = null;
           
            public TweenAnim(Context context) {
                    super(context);
            }
            @Override
            protected void onDraw(Canvas canvas) {
                    super.onDraw(canvas);
                    Log.e("Tween", "onDraw");
                    //加载一个图片
                    canvas.drawBitmap(((BitmapDrawable)getResources().getDrawable(R.drawable.gallery_photo_5)).getBitmap(), 0, 0, null);
            }
            @Override
            public boolean onKeyDown(int keyCode, KeyEvent event) {
                    Log.e("Tween", "onKeyDown");
                    return true;
            }
            @Override
            public boolean onKeyUp(int keyCode, KeyEvent event) {
                    Log.e("Tween", "onKeyDown");
                    switch (keyCode) {
                            case KeyEvent.KEYCODE_DPAD_UP:
                                    Log.e("Tween", "onKeyDown - KEYCODE_DPAD_UP");
                                    alphaAnimation = new AlphaAnimation(0.1f, 1.0f);
                                    //设置动画时间
                                    alphaAnimation.setDuration(3000);
                                    this.startAnimation(alphaAnimation);
                                    break;
                            case KeyEvent.KEYCODE_DPAD_DOWN:
                                    Log.e("Tween", "onKeyDown - KEYCODE_DPAD_DOWN");
                                    rotateAnimation = new RotateAnimation(0f, 360f);
                                    rotateAnimation.setDuration(1000);
                                    this.startAnimation(rotateAnimation);
                                    break;
                            case KeyEvent.KEYCODE_DPAD_LEFT:
                                    Log.e("Tween", "onKeyDown - KEYCODE_DPAD_LEFT");
                                    //初始化
                                    scaleAnimation = new ScaleAnimation(0.1f, 1.0f,0.1f,1.0f);
                                    //设置动画时间
                                    scaleAnimation.setDuration(500);
                                    this.startAnimation(scaleAnimation);
                                    break;
                            case KeyEvent.KEYCODE_DPAD_RIGHT:
                                    Log.e("Tween", "onKeyDown - KEYCODE_DPAD_RIGHT");
                                    //初始化
                                    translateAnimation = new TranslateAnimation(0.1f, 100.0f,0.1f,100.0f);
                                    //设置动画时间
                                    translateAnimation.setDuration(1000);
                                   
                                    this.startAnimation(translateAnimation);
                                    break;
                            case KeyEvent.KEYCODE_DPAD_CENTER:
                                    Log.e("Tween", "onKeyDown - KEYCODE_DPAD_CENTER");
                                    //初始化 Translate动画
                                    translateAnimation = new TranslateAnimation(0.1f, 100.0f,0.1f,100.0f);
                                    //初始化 Alpha动画
                                    alphaAnimation = new AlphaAnimation(0.1f, 1.0f);
                                   
                                    //动画集
                                    AnimationSet set = new AnimationSet(true);
                                    set.addAnimation(translateAnimation);
                                    set.addAnimation(alphaAnimation);
                                   
                                    //设置动画时间 (作用到每个动画)
                                    set.setDuration(1000);
                                    this.startAnimation(set);
                                    break;
                            default:
                                    break;
                    }
                    return true;
            }
           
    }

      
    在Activity中调用该类时,需要注意一定setFocusable(true), 否则焦点在Activity上的话,onKeyUp方法是不会生效的。
    调用该View的代码:
                                    TweenAnim anim = new TweenAnim(Lesson_11.this);
                                    anim.setFocusable(true);
                                    setContentView(anim);
      
      
      


      
    上面通过java代码,实现了4中不同的Tween动画,其实在Android中完全可以通过 XML文件来实现动画。这种方式可能更加简洁、清晰,也更利于重用。
    下面我们分别对这几种动画改用xml来实现。
      
    首先是AlphaAnimation。
    alpha_anim.xml:
    <?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android">
            <alpha
                    android:fromAlpha="0.1"
                    android:toAlpha="1.0"
                    android:duration="2000"
            />
    </set>

      
    不用解释了吧。
      
    RotateAnimation
    rotate_anim.xml:
    <?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android">
            <rotate
                    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
                    android:fromDegrees="0"
                    android:toDegrees="360"
                    android:pivotX="50%"
                    android:pivotY="50%"
                    android:duration="500"
            />
    </set>

      
      
    ScaleAnimation
    scale_anim.xml:
    <?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android">
            <scale
                    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
                    android:fromXScale="0.0"
                    android:toXScale="1.0"
                    android:fromYScale="0.0"
                    android:toYScale="1.0"
                    android:pivotX="50%"
                    android:pivotY="50%"
                    android:fillAfter="false"
                    android:duration="500"
            />       
    </set>
      
    TranslateAnimation
    translate_anim.xml:
      
    <?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android">
            <translate
                    android:fromXDelta="10"
                    android:toXDelta="100"
                    android:fromYDelta="10"
                    android:toYDelta="100"
            />
    </set>

      
    布局文件都已经写完,那么如何来使用这些文件呢?
      
    其实也很简单,此时需要用到AnimationUtils类。 通过该类中 loadAnimation 方法来加载这些布局文件。
    如:
    rotateAnimation = AnimationUtils.loadAnimation(this.getContext(), R.anim.rotate_anim);
      
    这次View类的代码如下:
    package com.yfz.view;
    import com.yfz.R;
    import android.content.Context;
    import android.graphics.Canvas;
    import android.graphics.drawable.BitmapDrawable;
    import android.util.Log;
    import android.view.KeyEvent;
    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;
    public class TweenAnim2 extends View {
           
            //Alpha动画 - 渐变透明度
            private Animation alphaAnimation = null;
           
            //Sacle动画 - 渐变尺寸缩放
            private Animation scaleAnimation = null;
           
            //Translate动画 - 位置移动
            private Animation translateAnimation = null;
           
            //Rotate动画 - 画面旋转
            private Animation rotateAnimation = null;
           
            public TweenAnim2(Context context) {
                    super(context);
            }
            @Override
            protected void onDraw(Canvas canvas) {
                    super.onDraw(canvas);
                    Log.e("Tween", "onDraw");
                    //加载一个图片
                    canvas.drawBitmap(((BitmapDrawable)getResources().getDrawable(R.drawable.gallery_photo_5)).getBitmap(), 0, 0, null);
            }
            @Override
            public boolean onKeyDown(int keyCode, KeyEvent event) {
                    Log.e("Tween", "onKeyDown");
                    return true;
            }
            @Override
            public boolean onKeyUp(int keyCode, KeyEvent event) {
                    Log.e("Tween", "onKeyDown");
                    switch (keyCode) {
                            case KeyEvent.KEYCODE_DPAD_UP:
                                    Log.e("Tween", "onKeyDown - KEYCODE_DPAD_UP");
                                   
                                    alphaAnimation = AnimationUtils.loadAnimation(this.getContext(), R.anim.alpha_anim);
                                   
                                    this.startAnimation(alphaAnimation);
                                    break;
                            case KeyEvent.KEYCODE_DPAD_DOWN:
                                    Log.e("Tween", "onKeyDown - KEYCODE_DPAD_DOWN");
                                   
                                    rotateAnimation = AnimationUtils.loadAnimation(this.getContext(), R.anim.rotate_anim);
                                   
                                    this.startAnimation(rotateAnimation);
                                    break;
                            case KeyEvent.KEYCODE_DPAD_LEFT:
                                    Log.e("Tween", "onKeyDown - KEYCODE_DPAD_LEFT");
                                   
                                    scaleAnimation = AnimationUtils.loadAnimation(this.getContext(), R.anim.scale_anim);
                                   
                                    this.startAnimation(scaleAnimation);
                                    break;
                            case KeyEvent.KEYCODE_DPAD_RIGHT:
                                    Log.e("Tween", "onKeyDown - KEYCODE_DPAD_RIGHT");
                                   
                                    translateAnimation = AnimationUtils.loadAnimation(this.getContext(), R.anim.translate_anim);
                                   
                                    this.startAnimation(translateAnimation);
                                    break;
                            case KeyEvent.KEYCODE_DPAD_CENTER:
                                    Log.e("Tween", "onKeyDown - KEYCODE_DPAD_CENTER");
                                    //初始化 Translate动画
                                    translateAnimation = AnimationUtils.loadAnimation(this.getContext(), R.anim.translate_anim);
                                   
                                    //初始化 Alpha动画
                                    alphaAnimation = AnimationUtils.loadAnimation(this.getContext(), R.anim.alpha_anim);
                                   
                                    //动画集
                                    AnimationSet set = new AnimationSet(true);
                                    set.addAnimation(translateAnimation);
                                    set.addAnimation(alphaAnimation);
                                   
                                    //设置动画时间 (作用到每个动画)
                                    set.setDuration(1000);
                                    this.startAnimation(set);
                                    break;
                            default:
                                    break;
                    }
                    return true;
            }
           
    }

      
    好了,本次就这么多。


    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|手机版|Java学习者论坛 ( 声明:本站资料整理自互联网,用于Java学习者交流学习使用,对资料版权不负任何法律责任,若有侵权请及时联系客服屏蔽删除 )

    GMT+8, 2025-2-24 05:01 , Processed in 0.309936 second(s), 35 queries .

    Powered by Discuz! X3.4

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表