美文网首页
Android补间动画

Android补间动画

作者: 疯子一般的勇士 | 来源:发表于2017-05-20 07:56 被阅读0次

    补间动画有四种,分别是淡入淡出(Alpha),旋转(Rotate),移动(Translate),缩放(Scale)

    1.Alpha
    代码中使用方法
    AlphaAnimation(float fromAlpha, float toAlpha)
    从fromAlpha的透明度到toAlpha的透明度,取值范围0到1.0f,0为全透明1为不透明

    ImageView iv = (ImageView) findViewById(R.id.iv);
    //iv从完全透明到不透明   
    AlphaAnimation al = new AlphaAnimation(0,1f);
    al .setDuration(300);  
    iv.startAnimation(al);
    

    xml的使用方法
    在res文件夹下,创建一个anim文件夹,然后再新建一个alpha.xml文件

    <?xml version="1.0" encoding="utf-8"?>  
    <alpha xmlns:android="http://schemas.android.com/apk/res/android"  
        android:fromAlpha="1.0"  
        android:toAlpha="0.1"  
        android:duration="3000"  
        android:fillBefore="true">  
    </alpha>  
    

    android:fromAlpha 动画开始的透明度,从0.0 --1.0 ,0.0表示全透明,1.0表示完全不透明
    android:toAlpha 动画结束时的透明度,也是从0.0 --1.0 ,0.0表示全透明,1.0表示完全不透明
    android:duration 动画持续时间,以毫秒为单位
    android:fillAfter 如果设置为true,控件动画结束时,将保持动画最后时的状态
    android:fillBefore 如果设置为true,控件动画结束时,还原到开始动画前的状态
    android:fillEnabled 与android:fillBefore 效果相同,都是在动画结束时,将控件还原到初始化状态
    android:repeatCount 重复次数
    android:repeatMode 重复类型
    android:interpolator 设定插值器

    通过AnimationUtils从XML文件中获取动画

    ImageView iv = (ImageView) findViewById(R.id.iv);
    AlphaAnimation al = (AlphaAnimation) AnimationUtils.loadAnimation(this, R.anim.alpha);
    iv.startAnimation(al);
    

    2.Rotate
    代码中使用方法
    RotateAnimation(float fromDegrees, float toDegrees)
    默认以View左上角即坐标点0.0为旋点,从fromDegrees度旋转到toDegrees度

    ImageView iv = (ImageView) findViewById(R.id.iv);
    //以iv左上角为坐标点 从0度旋转到90度
    RotateAnimation ro = new RotateAnimation(0,90);
    ro .setDuration(300);  
    iv.startAnimation(ro);
    

    RotateAnimation(float fromDegrees, float toDegrees, float pivotX, float pivotY)
    以坐标点pivotX.pivotY为旋转点,从fromDegrees度旋转到toDegrees度

    ImageView iv = (ImageView) findViewById(R.id.iv);
    //假设iv width=100px,height=100px
    //iv左上角为0.0起始坐标点   以80.90坐标点从0度旋转到90度
    RotateAnimation ro = new RotateAnimation(0,90,80,90);
    ro .setDuration(300);  
    iv.startAnimation(ro);
    

    RotateAnimation(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue,
    int pivotYType, float pivotYValue)
    Type参数有三种
    Animation.ABSOLUTE:具体的坐标值,屏幕像素单位
    Animation.RELATIVE_TO_SELF:相对自己的宽高的倍数
    Animation.RELATIVE_TO_PARENT:相对父容器的宽高的倍数

    ImageView iv = (ImageView) findViewById(R.id.iv);
    //假设iv width=100px,height=100px
    //以iv父容器左上角为0.0起始坐标点   以(iv父容器的宽*0.4f).(iv父容器的高*0.7f)坐标点从0度旋转到90度
    RotateAnimation ro = new RotateAnimation(0, 90, Animation.RELATIVE_TO_PARENT, 0.4f, Animation.RELATIVE_TO_PARENT, 0.7f);
    ro .setDuration(300);  
    iv.startAnimation(ro);
    

    xml的使用方法
    同样在anim文件夹下新建一个rotate.xml文件

    <?xml version="1.0" encoding="utf-8"?>  
    <rotate xmlns:android="http://schemas.android.com/apk/res/android"   
        android:fromDegrees="0"  
        android:toDegrees="-650"  
        android:pivotX="50%"  
        android:pivotY="50%"  
        android:duration="3000"  
        android:fillAfter="true">  
    </rotate>  
    

    android:fromDegrees 开始旋转的角度位置,正值代表顺时针方向度数,负值代码逆时针方向度数
    android:toDegrees 结束时旋转到的角度位置,正值代表顺时针方向度数,负值代码逆时针方向度数
    android:pivotX 缩放起点X轴坐标,可以是数值、百分数、百分数p 三种样式,比如 50、50%、50%p
    android:pivotY 缩放起点Y轴坐标,可以是数值、百分数、百分数p 三种样式,比如 50、50%、50%p

    通过AnimationUtils从XML文件中获取动画

    ImageView iv = (ImageView) findViewById(R.id.iv);
    RotateAnimation ro = (RotateAnimation) AnimationUtils.loadAnimation(this, R.anim.rotate);
    iv.startAnimation(ro);
    

    3.Translate
    代码中使用方法
    TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)
    是从(fromXDelta,fromYDelta)坐标点移动到(toXDelta,toYDelta)坐标点。
    这些坐标点指的是增量坐标。

    ImageView iv = (ImageView) findViewById(R.id.iv);
    //是从起始点(当前x+10,当前y+10),移动到终点(当前x+100,当前y+100)。
    //x轴y轴Type为Animation.ABSOLUTE  
    //Animation.ABSOLUTE值的是具体的坐标值,指绝对的屏幕像素单位
    TranslateAnimation ta = new TranslateAnimation(10, 10, 100, 100);
    //设置动画播放时间,单位是毫秒值
    ta.setDuration(2000);
    //设置重复次数
    ta.setRepeatCount(1);
    //设置重复动画的执行方式 Animation.REVERSE为反方向执行 
    ta.setRepeatMode(Animation.REVERSE);
    iv.startAnimation(ta);
    

    TranslateAnimation(int fromXType, float fromXValue, int toXType, float toXValue, int fromYType, float fromYValue, int toYType, float toYValue)
    Type参数有三种
    Animation.ABSOLUTE:具体的坐标值,屏幕像素单位
    Animation.RELATIVE_TO_SELF:相对自己的宽高的倍数
    Animation.RELATIVE_TO_PARENT:相对父容器的宽高的倍数

    ImageView iv = (ImageView) findViewById(R.id.iv);
    //假设iv的宽是100,高是50
    //是从起始点(当前x+(-0.5*100),当前y+1*50)移动到终点(当前x+(-2*100),当前y+2*50)。
    //Animation.RELATIVE_TO_PARENT则是iv的父容器的宽高
    TranslateAnimation ta = new TranslateAnimation(Animation.RELATIVE_TO_SELF,-0.5f, Animation.RELATIVE_TO_SELF, 1, Animation.RELATIVE_TO_SELF, -2, Animation.RELATIVE_TO_SELF, 2);
    ta.setDuration(2000);
    //设置重复次数
    ta.setRepeatCount(1);
    //设置重复动画的执行方式 Animation.REVERSE为反方向执行 
    ta.setRepeatMode(Animation.REVERSE);
    iv.startAnimation(ta);
    

    xml的使用方法
    同上新建一个translate.xml文件

    <?xml version="1.0" encoding="utf-8"?>  
    <translate xmlns:android="http://schemas.android.com/apk/res/android"  
        android:fromXDelta="0"   
        android:toXDelta="100"  
        android:fromYDelta="0"  
        android:toYDelta="100"  
        android:duration="200"  
        android:fillAfter="true">  
    </translate>  
    
    

    android:fromXDelta 起始点X轴坐标,可以是数值、百分数、百分数p 三种样式,比如 50、50%、50%p
    android:fromYDelta 起始点Y轴从标,可以是数值、百分数、百分数p 三种样式
    android:toXDelta 结束点X轴坐标
    android:toYDelta 结束点Y轴坐标
    android:duration 动画持续时间,以毫秒为单位
    android:fillAfter 如果设置为true,控件动画结束时,将保持动画最后时的状态
    android:fillBefore 如果设置为true,控件动画结束时,还原到开始动画前的状态
    android:fillEnabled 与android:fillBefore 效果相同,都是在动画结束时,将控件还原到初始化状态
    android:repeatCount 重复次数
    android:repeatMode 重复类型,有reverse和restart两个值,reverse表示倒序回放,restart表示重新放一遍,必须与repeatCount一起使用才能看到效果。
    android:interpolator 设定插值器,其实就是指定的动作效果,比如弹跳效果等。

    通过AnimationUtils从XML文件中获取动画

    ImageView iv = (ImageView) findViewById(R.id.iv);
    TranslateAnimation ta = (TranslateAnimation) AnimationUtils.loadAnimation(this, R.anim.translate);
    iv.startAnimation(ta);
    

    4.Scale
    代码中使用方法
    ScaleAnimation(float fromX, float toX, float fromY, float toY)
    以View左上角即坐标点0.0为缩放点,几倍View宽高放大到几倍View宽高

    ImageView iv = (ImageView) findViewById(R.id.iv);
    //在0.0坐标点由iv初始宽高放大两倍 
    ScaleAnimation sa= new ScaleAnimation(1.0f, 2.0f, 1.0f, 2.0f);  
    sa.setDuration(300);  
    iv.startAnimation(sa);
    

    ScaleAnimation(float fromX, float toX, float fromY, float toY,
    float pivotX, float pivotY)
    以view左上角,X轴增加pivotX点像素,Y轴增加pivotY点像素,即坐标点pivotX.pivotY为缩放点,几倍View宽高放大到几倍View宽高

    ImageView iv = (ImageView) findViewById(R.id.iv);
    //在100.200坐标点iv初始宽高放大两倍
    ScaleAnimation sa= new ScaleAnimation(1.0f, 2.0f, 1.0f, 2.0f,100.0f,200.0f);  
    sa.setDuration(300);  
    iv.startAnimation(sa);
    

    ScaleAnimation(float fromX, float toX, float fromY, float toY,
    int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)
    Type参数有三种
    Animation.ABSOLUTE:具体的坐标值,屏幕像素单位
    Animation.RELATIVE_TO_SELF:相对自己的宽高的倍数
    Animation.RELATIVE_TO_PARENT:相对父容器的宽高的倍数

    ImageView iv = (ImageView) findViewById(R.id.iv);
    //以iv自身中心为坐标点iv初始宽高放大两倍
    ScaleAnimation sa = new ScaleAnimation(1.0f, 2.0f, 1.0f, 2.0f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
    sa.setDuration(300);  
    iv.startAnimation(sa);
    

    xml的使用方法
    继续在anim文件夹下新建一个scale.xml文件

    <?xml version="1.0" encoding="utf-8"?>  
    <scale xmlns:android="http://schemas.android.com/apk/res/android"  
        android:fromXScale="0.0"  
        android:toXScale="1.4"  
        android:fromYScale="0.0"  
        android:toYScale="1.4"  
        android:pivotX="50%p"  
        android:pivotY="50%p"  
        android:duration="700" />  
    

    android:fromXScale 起始的X方向上相对自身的缩放比例,浮点值,比如1.0代表自身无变化,0.5代表起始时缩小一倍,2.0代表放大一倍;
    android:toXScale 结尾的X方向上相对自身的缩放比例,浮点值;
    android:fromYScale 起始的Y方向上相对自身的缩放比例,浮点值,
    android:toYScale 结尾的Y方向上相对自身的缩放比例,浮点值;
    android:pivotX 缩放起点X轴坐标,可以是数值、百分数、百分数p 三种样式,比如 50、50%、50%p,当为数值时,表示在当前View的左上角,即原点处加上50px,做为起始缩放点;如果是50%,表示在当前控件的左上角加上自己宽度的50%做为起始点;如果是50%p,那么就是表示在当前的左上角加上父控件宽度的50%做为起始点x轴坐标。(具体意义,后面会举例演示)
    android:pivotY 缩放起点Y轴坐标,取值及意义跟android:pivotX一样。

    通过AnimationUtils从XML文件中获取动画

    ImageView iv = (ImageView) findViewById(R.id.iv);
    ScaleAnimation sa = (ScaleAnimation) AnimationUtils.loadAnimation(this, R.anim.scale);
    iv.startAnimation(sa);
    
    1. AnimationSet
      在代码中使用
      AnimationSet(boolean shareInterpolator)
      shareInterpolator为false时,AnimationSet中的每个Animation使用的Interpolator效果都能单独生效。
      shareInterpolator为true时,AnimationSet中的每个Animation使用的Interpolator将无效果,通过设置AnimationSet的Interpolator可以设置所有动画的Interpolator且所有动画的Interpolator都一样。
    //将四个动画添加到动画集合中一起运行
    ImageView iv = (ImageView) findViewById(R.id.iv);
    AnimationSet set = new AnimationSet(false);
    set .addAnimation(al);
    set .addAnimation(sa);
    set .addAnimation(ro);
    iv.startAnimation(set );
    

    xml的使用方法
    在res文件夹下,新建一个anim文件夹,然后再新建一个set.xml文件

    <?xml version="1.0" encoding="utf-8"?>  
    <set xmlns:android="http://schemas.android.com/apk/res/android"  
        android:duration="3000"  
        android:fillAfter="true">        
      <alpha   
        android:fromAlpha="0.0"  
        android:toAlpha="1.0"/>      
      <scale  
        android:fromXScale="0.0"  
        android:toXScale="1.4"  
        android:fromYScale="0.0"  
        android:toYScale="1.4"  
        android:pivotX="50%"  
        android:pivotY="50%"/>     
      <rotate  
        android:fromDegrees="0"  
        android:toDegrees="720"  
        android:pivotX="50%"  
        android:pivotY="50%"/>           
    </set>  
    

    通过AnimationUtils从XML文件中获取动画

    ImageView iv = (ImageView) findViewById(R.id.iv);
    AnimationSet set = (AnimationSet ) AnimationUtils.loadAnimation(this, R.anim.set);
    iv.startAnimation(set);
    

    Translate和Scale一起执行是需要重新计算偏移量,否则动画显示会有偏移。用属性动画则不会出现问题。

    除了这些基本用法外,我们还可以监听动画的运行情况

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

    PS.好记性真的不如烂笔头

    相关文章

      网友评论

          本文标题:Android补间动画

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