Android 动画使用 scale、alpha、transla

作者: Pencilso | 来源:发表于2017-07-17 11:32 被阅读997次

    scale:尺寸伸缩动画

    alpha:渐变透明动画

    translate:位移动画

    rotate:旋转动画

    调用动画文件 给View执行动画

    动画文件可以存放在res下的anim目录 Android Studio的话 需要自己手动创建这个文件夹
    比如说我在anim下创建了一个动画文件名为scaleanim.xml那么在Java中引用的话
    //加载动画对象
    Animation animation = AnimationUtils.loadAnimation(this, R.anim.scaleanim);
    //启动动画
    view.startAnimation(animation);
    //另外 动画animation还有一个执行监听事件  使用如下 使用场景比如说启动页面 动画结束后跳转页面
    
     animation.setAnimationListener(new Animation.AnimationListener() {
            /**
             * 动画启动
             * @param animation
             */
            @Override
            public void onAnimationStart(Animation animation) {
    
            }
    
            /**
             * 动画结束
             * @param animation
             */
            @Override
            public void onAnimationEnd(Animation animation) {
    
            }
    
            /**
             * 动画重复
             * @param animation
             */
            @Override
            public void onAnimationRepeat(Animation animation) {
    
            }
        });
    

    Animation属性

    android:duration        动画持续时间,以毫秒为单位 
    android:fillAfter          如果设置为true,控件动画结束时,将保持动画最后时的状态
    android:fillBefore       如果设置为true,控件动画结束时,还原到开始动画前的状态
    android:fillEnabled    与android:fillBefore 效果相同,都是在动画结束时,将控件还原到初始化状态
    android:repeatCount 重复次数
    android:repeatMode  重复类型,有reverse和restart两个值,reverse表示倒序回放,restart表示重新放一遍,必须与repeatCount一起使用才能看到效果。因为这里的意义是重复的类型,即回放时的动作。
    android:interpolator  设定插值器,其实就是指定的动作效果,比如弹跳效果等。
    

    scale尺寸伸缩动画

    首先在anim目录下创建scaleanim.xml文件
    <?xml version="1.0" encoding="utf-8"?>
    <scale xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="700"
        android:fromXScale="0.0"
        android:fromYScale="0.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1.0"
        android:toYScale="1.0" />
    
    1. duration:动画的执行时间 毫秒为单位
    2. fromXScale:执行动画的起始缩放X轴
    3. fromYScale:执行动画的起始缩放Y轴
    4. pivotX:缩放起点X轴坐标
    5. pivotY:缩放起点Y轴坐标
    6. toXScale:执行动画的结束缩放X轴
    7. toYScale:执行动画的结束缩放Y轴

    toYScale、toXScale、fromXScale、fromYScale这几个属性都是缩放比例 浮点数类型 一般使用0-1之间的数值

    pivotX、pivotY 这两个属性可以是数值、百分数、百分数p 三种样式。

    先上一张效果图

    可以看到该图片的图片动画启动点是中间 因为pivot的X Y轴设置的是50%的缩放 fromXScale fromYScale写的是0 所以从小到大缩放

    如果toXScale 设置超过1会怎么样

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

    可以看到动画执行结束的时候 图片比之前变大了一些
    因为结尾的X、Y 轴设置的是1.5则表示在原大小 放大了0.5倍 1是原比例
    另外 这里将pivot的X、Y轴缩放属性给删除了,所以这个动画起始位置是从左上角开始执行的
    因为x y轴默认值是0 所以没有进行缩放的话 就是从左上角开始执行 如果需要效果由大变小的话 将fromScale和toScale的值互换即可。

    保留缩放后的大小

    <?xml version="1.0" encoding="utf-8"?>
    <scale xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="1000"
        android:fillAfter="true"
        android:fromXScale="0.5"
        android:fromYScale="0.5"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1.5"
        android:toYScale="1.5" />
    
    添加属性android:fillAfter="true" 即可保留结束的状态
    而且我这里将起始X、Y轴(fromXScale、fromYScale)缩放了0.5 
    可以看到现在效果是把图片缩小了一半再慢慢放大。之前是缩小到最小 再放大的。
    另外pivotY、pivotX属性 当取值在百分数后面加上一个字母p,就表示,取值的基数是父控件,即在原点的基础上增加的值是父标签的百分值。  
    

    alpha渐变动画

    先在anim文件夹下创建动画文件alphaanim.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:fillAfter="true">
    </alpha>
    fromAlpha:起始透明度  1为不透明 0为透明
    toAlpha:结束透明度
    duration:动画执行时间 单位毫秒
    fillAfter:是否保留结束后的状态
    
    fromAlpha、toAlpha都是比例 浮点类型 0.0-1.0  1为原样 0最透明看不见
    透明动画其实比较简单  就不做过多叙述了。
    

    rotate旋转动画

    创建动画文件
    <?xml version="1.0" encoding="utf-8"?>
    <rotate xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="3000"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="360">
    </rotate>
    
    • fromDegrees:开始旋转的角度 正值表示顺时针 负值表示逆时针
    • toDegrees:结束旋转的角度 正值表示顺时针 负值表示逆时针
    • pivotX、pivotY跟scale动画的概念一样。

    第一张图是没有缩放pivotX pivotY的 那么它的起始x y都是0 所以是从左上角开始旋转

    第二张图是 x y都缩放50% 即从中间开始旋转

    忘了录屏重复旋转的了 就简单写一下吧  
    android:repeatCount 重复次数 如果想一直自动重复的话  给它一个-1就好
    android:repeatMode 这个属性是重复类型 有reverse和restart两个值,reverse表示倒序回放,restart表示重新放一遍
    另外repeatMode必须与repeatCount一起使用才能看到效果
    
    未添加pivot缩放
    缩放pivot 50%

    translate平移动画

    android:fromXDelta 起始点X轴坐标,可以是数值、百分数、百分数p 三种样式,比如 50、50%、50%p

    android:fromYDelta 起始点Y轴从标,可以是数值、百分数、百分数p 三种样式;

    android:toXDelta 结束点X轴坐标

    android:toYDelta 结束点Y轴坐标

    创建动画 移动Y轴
    <?xml version="1.0" encoding="utf-8"?>
    <translate xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="2000"
        android:fillAfter="true"
        android:fromYDelta="0"
        android:toYDelta="79%p">
    </translate>
    
    创建动画 向左横移
    <?xml version="1.0" encoding="utf-8"?>
    <translate xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="2000"
        android:fillAfter="true"
        android:fromXDelta="0"
        android:toXDelta="-43%p">
    </translate>
    
    抛物线 (虽然抛的不好看)同时移动X Y轴
    <?xml version="1.0" encoding="utf-8"?>
    <translate xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="2000"
        android:fillAfter="true"
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="43%p"
        android:toYDelta="79%p">
    </translate>
    

    动画组 SET

    set标签自已是没有属性的,他的属性都是从Animation继承而来,但当它们用于Set标签时,就会对Set标签下的所有子控件都产生作用。
    还是创建一个xml文件在anim文件夹下
    <?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>
    

    相关文章

      网友评论

        本文标题:Android 动画使用 scale、alpha、transla

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