Android 缩放动画 ScaleAnimation

浅浅的花香味﹌ 2022-12-07 12:08 332阅读 0赞

什么是ScaleAnimation

> ScaleAnimation即缩放动画，应用场景特别多，比如常见的隐藏菜单点击显示

下面我分两种方式来介绍ScaleAnimation如何使用。

> **1. xml文件形式**  
> 文件名：anim\_scale\_in.xml  
> 效果：呈现view放大显示效果  
> 源码：

> 属性解释：  
> **interpolator**：动画插入器，该功能在xml里设置貌似无效，需在代码中加  
> **fromXScale**:从自身x轴长度多少倍开始缩放，如：fromXScale= 0.5表示从自身X轴长度0.5倍开始缩放  
> **toXScale**:缩放到自身x轴长度多少倍结束,如：toXScale = 2.0表示x轴缩放到自身x轴长度2倍结束  
> 上面两条意思就是：该view的x轴从自身x轴长度的0.5倍开始缩放到自身x轴长度的2倍结束  
> **fromYScale**：从自身y轴长度多少倍开始缩放，如：fromYScale= 0.5表示从自身y轴长度0.5倍开始缩放  
> **toYScale**：缩放到自身y轴长度多少倍结束,如：toYScale = 2.0表示x轴缩放到自身y轴长度2倍结束  
> **pivotX**:动画相对于控件X坐标的开始位置  
> **pivotY**:动画相对于控件Y坐标的开始位置  
> 如：pivotX = 50%,pivotY = 50% 表示从该控件的中心开始缩放

//表示控件左下角开始
       android:pivotX="0"
       android:pivotY="100%"
    
       //表示控件左上角开始
       android:pivotX="0"
       android:pivotY="0"
    
       //表示控件右下角开始
        android:pivotX="100%"
        android:pivotY="100%"
    
       //表示控件右上角开始
       android:pivotX="100%"
       android:pivotY="0"

<?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android">
        <scale
            android:interpolator="@android:anim/accelerate_interpolator"
            android:duration="1000"
            android:fillAfter="true"
            android:fromXScale="1.0"
            android:fromYScale="1.0"
            android:pivotX="50%"
            android:pivotY="50%"
            android:toXScale="0"
            android:toYScale="0" />
    </set>

**OK，现在有了xml布局文件，我们需要用Java代码让他工作起来，如下;**

/**
         * 缩放变大动画
         *
         * @param context
         * @param view 目标view
         */
        public static void startScaleInAnim(Context context, View view) {
            Animation animation = AnimationUtils.loadAnimation(context, R.anim.anim_scale_in);
            if (view != null)
                view.startAnimation(animation);
        }
    
        /**
         * 缩放缩小动画
         *
         * @param context
         * @param view 目标view
         */
        public static void startScaleOutAnim(Context context, View view) {
            Animation animation = AnimationUtils.loadAnimation(context, R.anim.anim_scale_out);
            if (view != null)
                view.startAnimation(animation);
        }

我单独封装在一个动画工具类中，哪里需要就哪里调用。

--------------------

下面看看代码的执行效果：  
![这里写图片描述][20160418104710371]

**缩放同时还可以添加透明度变化，如下：**

放大+淡入：

<?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android">
        <scale
            android:interpolator="@android:anim/decelerate_interpolator"
            android:duration="1000"
            android:fillAfter="true"
            android:fillEnabled="true"
            android:fromXScale="0"
            android:fromYScale="0"
            android:pivotX="50%"
            android:pivotY="50%"
            android:toXScale="1.0"
            android:toYScale="1.0" />
        
        <alpha
            android:duration="700"
            android:fillAfter="true"
            android:fromAlpha="0"
            android:toAlpha="1" />
    </set>

缩小+淡出

效果如下：  
![这里写图片描述][20160418104331585]

**下拉菜单显示与收回，效果：**

显示：

<?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android">
        <scale
            android:interpolator="@android:anim/decelerate_interpolator"
            android:duration="300"
            android:fillAfter="true"
            android:fillEnabled="true"
            android:fromXScale="1.0"
            android:fromYScale="0"
            android:pivotX="100%"
            android:pivotY="0"
            android:toXScale="1.0"
            android:toYScale="1.0" />
        
        <alpha
            android:duration="300"
            android:fillAfter="true"
            android:fromAlpha="0"
            android:toAlpha="1" />
    </set>

收起：

<?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android">
        <scale
            android:interpolator="@android:anim/accelerate_interpolator"
            android:duration="300"
            android:fillAfter="true"
            android:fromXScale="1.0"
            android:fromYScale="1.0"
            android:pivotX="100%"
            android:pivotY="0"
            android:toXScale="1.0"
            android:toYScale="0" />
        
        <alpha
            android:duration="300"
            android:fillAfter="true"
            android:fromAlpha="1"
            android:toAlpha="0" />
    </set>

效果：  
![这里写图片描述][20160418105955239]

**缩放下拉与收回效果：**

显示：

<?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android">
        <scale
            android:interpolator="@android:anim/decelerate_interpolator"
            android:duration="200"
            android:fillAfter="true"
            android:fillEnabled="true"
            android:fromXScale="0"
            android:fromYScale="0"
            android:pivotX="100%"
            android:pivotY="0"
            android:toXScale="1.0"
            android:toYScale="1.0" />
        
        <alpha
            android:duration="200"
            android:fillAfter="true"
            android:fromAlpha="0"
            android:toAlpha="1" />
    </set>

收起：

<?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android">
        <scale
            android:interpolator="@android:anim/accelerate_interpolator"
            android:duration="200"
            android:fillAfter="true"
            android:fromXScale="1.0"
            android:fromYScale="1.0"
            android:pivotX="100%"
            android:pivotY="0"
            android:toXScale="0"
            android:toYScale="0" />
        
        <alpha
            android:duration="200"
            android:fillAfter="true"
            android:fromAlpha="1"
            android:toAlpha="0" />
    </set>

效果：  
![这里写图片描述][20160418111043759]

**类似游戏按钮的按下放大再还原效果：**

public static void animScaleIn(View view){
            //缩放动画
            ScaleAnimation animation = new ScaleAnimation(1,1.2f,1,1.2f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
            animation.setDuration(100);
            animation.setFillAfter(true);
            animation.setRepeatMode(Animation.REVERSE);
            animation.setRepeatCount(1);
    
            //透明度动画
            AlphaAnimation animation1 = new AlphaAnimation(1,0.8f);
            animation1.setDuration(100);
            animation1.setRepeatCount(1);
            animation1.setRepeatMode(Animation.REVERSE);
            animation1.setFillAfter(true);
    
            //装入AnimationSet中
            AnimationSet set = new AnimationSet(true);
            set.addAnimation(animation);
            set.addAnimation(animation1);
    
            if (view != null)
            view.startAnimation(set);
    
        }

效果如下：

![这里写图片描述][20160418191105977]

备注：由于我的图片是导出视频再用PS转换成的gif，故效率上有所损失，实际动画效果和速度比图片的快。

[20160418104710371]: /images/20221123/be68a4f038df427d8cdf33e01391a23d.png
[20160418104331585]: /images/20221123/47c9a0584a3a4b78996b78063a736ed2.png
[20160418105955239]: /images/20221123/4b248ed6db794b1680ab5a6871133207.png
[20160418111043759]: /images/20221123/89e4f83175ec4fcdab0cdf28c481cca2.png
[20160418191105977]: /images/20221123/ac37089873af4f5c81b6426a3233cb12.png