• Android 视图动画


    一、视图动画标签

    0.概述

    视图动画有5中类型组成:
    alpha:渐变透明度
    scale:渐变尺寸伸缩
    translate:画面变换位置移动
    rotate:画面转移旋转移动
    set:定义动画集

    1.scale标签

    scale_anim.xml

    <?xml version="1.0" encoding="utf-8"?>
    
    <set xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="3000">  	 //动画持续时间
    
        <scale
            android:fromXScale="0.1" //初始X轴的缩放
            android:fromYScale="0.1" //初始y轴的缩放
            android:toXScale="1.4"   //目标x轴的缩放
            android:toYScale="1.4"   //目标y轴的缩放
            android:pivotX="150"     //以控件的位置原点坐标,动画开始的起始位置x轴坐标
            android:pivotY="150"/>   //以控件的位置原点坐标,动画开始的起始位置y轴坐标
    </set>
    

    pivotX有三种数值:

    150 直接数字,则是以控件为原点坐标的xy的坐标值(150,150),以目标控件为原点

    150% 百分比的,是以控件为原点坐标的,为控件的宽度的150%的坐标,150%那就是控件宽度的150%

    150%p 上面同理,但是以父控件的150%

    java代码

      startAnimBtn.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    //装载动画 R.anim.scale_anim 为动画位置
                    Animation scaleAnimation=AnimationUtils.loadAnimation(mContext,R.anim.scale_anim);
                    //启动动画
                    scaleTV.startAnimation(scaleAnimation);
                }
            });
    

    效果

    scale.gif

    2.共同属性

    所有动画都继承自Animation类,所以有一些共同的属性。

    android:duration="3000"  //动画持续时间,毫秒单位
    android:fillAfter="true" //true动画结束,保持控件结束时的状态
    android:fillBefore="true"//true动画结束,保持控件最初始状态
    android:repeatCount="3"  //动画重复次数,infinite表示无限循环
    android:repeatMode="restart" //重复的类型,restart表示从头开始,reverse表示倒序回放
    android:interpolator="@android:interpolator/accelerate_cubic" //插值器,控制速度等
    

    看看回放和倒序回放
    倒序回放:

    android:repeatCount="3"
    android:repeatMode="reverse"
    

    倒序回放.gif

    回放:

    android:repeatCount="3"
    android:repeatMode="restart"
    

    回放.gif

    3.alpha标签

    <alpha
      android:duration="3000" //持续时间
    	android:fromAlpha="0.1" //初始透明度
    	android:toAlpha="1"/>   //最大透明度  数值在0.0~1.0之间
    

    效果:

    透明度.gif

    4.rotate标签

    <alpha
    	android:fromAlpha="0.01" //初始角度
    	android:toAlpha="1"/>    //旋转角度  取值范围可以为负值,为逆时针,正值为顺时针
    

    效果:

    旋转.gif

    5.translate标签

       <translate
            android:fromXDelta="50"  //以控件为原坐标,x轴加50 为起始X轴
            android:fromYDelta="50"  //以控件为原坐标,y轴加50 为起始y轴
            android:toXDelta="400"   //目标x轴
            android:toYDelta="400" /> //目标y轴
    

    效果:

    位移.gif

    7.set标签

    <?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="8000"
        android:fillAfter="false"
        android:fillBefore="true">
        <scale
            android:fromXScale="0.1"
            android:fromYScale="0.1"
            android:pivotX="150"
            android:pivotY="150"
            android:toXScale="1.4"
            android:toYScale="1.4" />
        <alpha
            android:fromAlpha="0.5"
            android:toAlpha="1"/>
        <rotate
            android:fromDegrees="0.0"
            android:toDegrees="360"/>
        <translate
            android:fromXDelta="50"
            android:fromYDelta="50"
            android:toXDelta="300"
            android:toYDelta="300" />
    </set>
    

    效果:

    完整动画.gif

    二、视图动画代码实现

    0.概述

    这些标签,都对应一个类,但他们都是派生自Animation类。

    scale ScaleAnimation
    alpha AlphaAnimation
    rotate RotateAnimation
    translate TranslateAnimation
    set AetAnimation

    1.ScaleAnimation

    四个构造方法来加载scale动画

    ScaleAnimation(Context context, AttributeSet attrs)
        
    ScaleAnimation(float fromX, float toX, float fromY, float toY)
        
    ScaleAnimation(float fromX, float toX, float fromY, float toY,
                float pivotX, float pivotY)
        
    ScaleAnimation(float fromX, float toX, float fromY, float toY,
                int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)
        
    

    ScaleAnimation(
    float fromX, //初始x轴的缩放

    float toX,    //目标缩放

    float fromY, //初始y轴缩放

    float toY,    //目标y轴缩放

    int pivotXType, float pivotXValue,  //以原坐标为原点,x轴的起始点

    int pivotYType, float pivotYValue) //以原坐标为原点,y轴的起始点

    pivotXType的类型有:

    RELATIVE_TO_SELF  百分比,相对自身百分比 50%

    RELATIVE_TO_PARENT  百分比,相对父控件百分比 50%p

    ABSOLUTE  具体数值 比如 50

    2.AlphaAnimation

    AlphaAnimation(Context context, AttributeSet attrs)
        
    AlphaAnimation(float fromAlpha, float toAlpha)
        
    

    AlphaAnimation(
    float fromAlpha,  //初始透明度

    float toAlpha)    //目标透明度

    3.RotateAnimation

    RotateAnimation(Context context, AttributeSet attrs)
        
    RotateAnimation(float fromDegrees, float toDegrees)
        
    RotateAnimation(float fromDegrees, float toDegrees, float pivotX, float pivotY)
        
    RotateAnimation(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue,
                int pivotYType, float pivotYValue)    
    

    RotateAnimation(
    float fromDegrees,  //初始角度

    float toDegrees,      //目标角度

    int pivotXType, float pivotXValue,        
    int pivotYType, float pivotYValue)

    4.TranslateAnimation

    TranslateAnimation(Context context, AttributeSet attrs)
        
    TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)  
        
    TranslateAnimation(int fromXType, float fromXValue, int toXType, float toXValue,
                int fromYType, float fromYValue, int toYType, float toYValue)     
    

    TranslateAnimation(
    int fromXType, float fromXValue,  //起始x轴坐标

    int toXType, float toXValue,           //目标x轴坐标

    int fromYType, float fromYValue,    //起始y轴坐标

    int toYType, float toYValue)            //目标y轴坐标

    5.AnimationSet

    AnimationSet(Context context, AttributeSet attrs)
        
    AnimationSet(boolean shareInterpolator)   //true 共用一个插值器,false 各自定义插值器
    

    都是继承自Animation,有这些共同属性

    animationSet1.setDuration(3000);  //动画时长
    animationSet1.scaleCurrentDuration(4.0f);  //当前动画时间
    animationSet1.setFillAfter(true); //true动画结束,保持控件结束时的状态
    animationSet1.setFillBefore(true); //true动画结束,保持控件最初始状态
    animationSet1.setRepeatMode(Animation.RESTART); //循环模式
    animationSet1.setStartOffset(1000); //在什么时间停止动画
    animationSet1.setStartTime(500); //在什么时间开始动画
    animationSet1.setRepeatCount(5);  //循环次数
    animationSet1.setFillEnabled(true); //true动画结束,保持控件结束时的状态
    

    装载所有动画效果

        		ScaleAnimation scaleAnimation1 = new ScaleAnimation(
                            0.0f,
                            1.4f,
                            0.0f,
                            1.4f,
                            Animation.RELATIVE_TO_SELF, 0.5f,
                            Animation.RELATIVE_TO_SELF, 0.5f);
    
                    AlphaAnimation alphaAnimation1=new AlphaAnimation(0.1f,0.5f);
                    RotateAnimation rotateAnimation1=new RotateAnimation(0.1f,0.1f);
                    TranslateAnimation translateAnimation1=new TranslateAnimation(
                            Animation.ABSOLUTE,
                            50,
                            Animation.ABSOLUTE,
                            50);
    
                    AnimationSet animationSet1=new AnimationSet(true); //装载
                    animationSet1.addAnimation(scaleAnimation1);
                    animationSet1.addAnimation(alphaAnimation1);
                    animationSet1.addAnimation(rotateAnimation1);
                    animationSet1.addAnimation(translateAnimation1);
    
                    animationSet1.setDuration(3000);
                    animationSet1.scaleCurrentDuration(4.0f);
                    animationSet1.setFillAfter(true);
                    animationSet1.setFillBefore(true);
                    animationSet1.setRepeatMode(Animation.RESTART);
                    animationSet1.setStartOffset(1000);
                    animationSet1.setStartTime(500);
                    animationSet1.setRepeatCount(5);
                    animationSet1.setFillEnabled(true);
    
    

    6.Animation

    animationSet1.cancel(); //取消动画
    animationSet1.reset();  //将控件重置到初始化状态
    animationSet1.setAnimationListener(AnimationListener listener); //设置监听
    

    监听,利用监听可以实现动画的连续效果,比如,先实现缩放,再实现位移

      animationSet1.setAnimationListener(new Animation.AnimationListener() {
                        @Override
                        public void onAnimationStart(Animation animation) {
                            //动画开始
                        }
    
                        @Override
                        public void onAnimationEnd(Animation animation) {
                            //动画结束
                        }
    
                        @Override
                        public void onAnimationRepeat(Animation animation) {
                            //动画结束
                        }
                    });
    

    三、基础插值器

    0.概述

    控制动画变化速率的值,就叫插值器,也叫加速器。有Interpolator类来决定。

    使用方法
    在xml中使用:
    android:interpolator="@android:anim/accelerate_interpolator"

    <set xmlns:android="http://schemas.android.com/apk/res/android"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:duration="3000"
        android:fillAfter="false"
        android:fillBefore="true">
    </set>
    

    在java代码中使用;
    animationSet1.setInterpolator(new AccelerateInterpolator());

    1.系统插值器

    系统已经定义了一些常见的插值器

    AccelerateDecelerateInterpolator @android:anim/accelerate_decelerate_interpolator 先加速,后减速
    AccelerateInterpolator @android:anim/accelerate_interpolator 开始慢,后一直加速
    DecelerateInterpolator @android:anim/decelerate_interpolator 开始一瞬间加到最大,后慢慢减慢
    LinearInterpolator @android:anim/linear_interpolator 匀速加速器
    BounceInterpolator @android:anim/bounce_interpolator 模拟自由落体回弹的效果
    AnticipateInterpolator @android:anim/anticipate_interpolator 反方向效果一段时间,再执行正常动画,如,旋转。先反旋转一段距离
    OvershootInterpolator @android:anim/overshoot_interpolator 动画结束之后,再执行一段时间
    AnticipateOvershootInterpolator @android:anim/anticipate_overshoot_interpolator 开始时,反方向效果一段时间,结束时,超过效果时间一段时间
    CycleInterpolator(1) @android:anim/cycle_interpolator 动画特定循环播放的次数,速率沿正弦曲线变化

    四、动画示例

    1.镜头由远及近

    控件

    <ImageView
            android:id="@+id/img"
            android:src="@drawable/ali"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
    

    java代码

    
                    ScaleAnimation scaleAnimation=new ScaleAnimation(
                            0.5f,
                            1.2f,
                            0.5f,
                            1.2f,
                            Animation.RELATIVE_TO_SELF,0.5f,
                            Animation.RELATIVE_TO_SELF,0.5f);
                    scaleAnimation.setFillAfter(true);
                    scaleAnimation.setInterpolator(new AccelerateInterpolator());
                    scaleAnimation.setDuration(6000);
                    imgIV.startAnimation(scaleAnimation);
    

    效果:

    由远及近.gif

    2.加载框效果

       <ImageView
            android:id="@+id/load"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="30dp"
            android:src="@drawable/load" />
    
         RotateAnimation rotateAnimation=new RotateAnimation(
                            0,
                            360,
                            Animation.RELATIVE_TO_SELF,0.5f,
                            Animation.RELATIVE_TO_SELF,0.5f);
                    rotateAnimation.setFillAfter(true);
                    rotateAnimation.setRepeatCount(Animation.INFINITE); //无限循环
                    rotateAnimation.setInterpolator(new LinearInterpolator()); //匀速
                    rotateAnimation.setDuration(2000);
                    loadIV.startAnimation(rotateAnimation);
    
    

    效果:

    加载.gif

    编程中我们会遇到多少挫折?表放弃,沙漠尽头必是绿洲。

  • 相关阅读:
    mongodb的安装
    express初体验
    vscode自定义快捷键
    项目开发前准备——清除默认样式
    手动开启和关闭mysql
    一步添加博客园看板娘
    js实现动态球球背景
    kendo grid 使用小结
    flask 与celery
    scrapy 调用js
  • 原文地址:https://www.cnblogs.com/lanjiabin/p/12806994.html
Copyright © 2020-2023  润新知