什么是ScaleAnimation
ScaleAnimation即缩放动画,应用场景特别多,比如常见的隐藏菜单点击显示
下面我分两种方式来介绍ScaleAnimation如何使用。
1. xml文件形式
文件名:anim_scale_in.xml
效果:呈现view放大显示效果
源码:
<?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:fromXScale="0.0" android:fromYScale="0.0" android:pivotX="50%" android:pivotY="50%" android:toXScale="1.0" android:toYScale="1.0" /> </set>
属性解释:
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); }
我单独封装在一个动画工具类中,哪里需要就哪里调用。
下面看看代码的执行效果:
缩放同时还可以添加透明度变化,如下:
放大+淡入:
<?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>
缩小+淡出
<?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" /> <!--同时配置淡出功能--> <alpha android:duration="700" android:fillAfter="true" android:fromAlpha="1" android:toAlpha="0" /> </set>
效果如下:
下拉菜单显示与收回,效果:
显示:
<?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>
效果:
缩放下拉与收回效果:
显示:
<?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>
效果:
类似游戏按钮的按下放大再还原效果:
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); }
效果如下:
备注:由于我的图片是导出视频再用PS转换成的gif,故效率上有所损失,实际动画效果和速度比图片的快。