Android动画<第一篇>：视图动画

视图动画，也叫 Tween （补间）动画，可以在一个视图容器内执行一系列简单变换（位置、大小、旋转、透明度）。Android已经为我们提供了四个已经封装好了的视图动画接口，分别是AlphaAnimation（透明度动画）、RotateAnimation（旋转动画）、ScaleAnimation（缩放动画）、TranslateAnimation（位移动画），这四个接口都是Animation的子类。如果这种动画用xml实现，xml的目录是res/anim/。

下面用一张表格来展示一下Animation的属性

java 方法	xml 属性	描述信息
setDetachWallpaper(boolean)	android:detachWallpaper	是否在壁纸上运行
setDuration(long)	android:duration	动画持续时间，毫秒为单位
setFillAfter(boolean)	android:fillAfter	控件动画结束时是否保持动画最后的状态
setFillBefore(boolean)	android:fillBefore	控件动画结束时是否还原到开始动画前的状态
setFillEnabled(boolean)	android:fillEnabled	与android:fillBefore效果相同
setInterpolator(Interpolator)	android:interpolator	设定插值器（指定的动画效果，譬如回弹等）
setRepeatCount(int)	android:repeatCount	重复次数
setRepeatMode(int)	android:repeatMode	重复类型有两个值，reverse表示倒序回放，restart表示从头播放
setStartOffset(long)	android:startOffset	调用start函数之后等待开始运行的时间，单位为毫秒
setZAdjustment(int)	android:zAdjustment	表示被设置动画的内容运行时在Z轴上的位置（top/bottom/normal），默认为normal
reset()	无	重置 Animation 的初始化
cancel()	无	取消 Animation 动画
start()	无	开始 Animation 动画
setAnimationListener(AnimationListener listener)	无	给当前 Animation 设置动画监听
hasStarted()	无	判断当前 Animation 是否开始
hasEnded()	无	判断当前 Animation 是否结束

另外，AlphaAnimation、RotateAnimation、ScaleAnimation、TranslateAnimation都有特有方法。

【AlphaAnimation特有方法】

java 方法	xml 属性	描述信息
AlphaAnimation(float fromAlpha, …)	android:fromAlpha	动画开始的透明度（0.0到1.0，0.0是全透明，1.0是不透明）
AlphaAnimation(…, float toAlpha)	android:fromAlpha	动画结束的透明度

【RotateAnimation特有方法】

java 方法	xml 属性	描述信息
RotateAnimation(float fromDegrees, …)	android:fromDegrees	旋转开始角度，正代表顺时针度数，负代表逆时针度数
RotateAnimation(…, float toDegrees, …)	android:toDegrees	旋转结束角度，正代表顺时针度数，负代表逆时针度数
RotateAnimation(…, float pivotX, …)	android:pivotX	缩放起点X坐标（数值、百分数、百分数p，譬如50表示以当前View左上角坐标加50px为初始点、50%表示以当前View的左上角加上当前View宽高的50%做为初始点、50%p表示以当前View的左上角加上父控件宽高的50%做为初始点）
RotateAnimation(…, float pivotY)	android:pivotY	缩放起点Y坐标，同上规律

【ScaleAnimation特有方法】

java 方法	xml 属性	描述信息
ScaleAnimation(float fromX, …)	android:fromXScale	初始X轴缩放比例，1.0表示无变化
ScaleAnimation(…, float toX, …)	android:toXScale	结束X轴缩放比例
ScaleAnimation(…, float fromY, …)	android:fromYScale	初始Y轴缩放比例
ScaleAnimation(…, float toY, …)	android:toYScale	结束Y轴缩放比例
ScaleAnimation(…, float pivotX, …)	android:pivotX	缩放起点X轴坐标（数值、百分数、百分数p，譬如50表示以当前View左上角坐标加50px为初始点、50%表示以当前View的左上角加上当前View宽高的50%做为初始点、50%p表示以当前View的左上角加上父控件宽高的50%做为初始点）
ScaleAnimation(…, float pivotY)	android:pivotY	缩放起点Y轴坐标，同上规律

【TranslateAnimation特有方法】

java 方法	xml 属性	描述信息
TranslateAnimation(float fromXDelta, …)	android:fromXDelta	起始点X轴坐标（数值、百分数、百分数p，譬如50表示以当前View左上角坐标加50px为初始点、50%表示以当前View的左上角加上当前View宽高的50%做为初始点、50%p表示以当前View的左上角加上父控件宽高的50%做为初始点）
TranslateAnimation(…, float fromYDelta, …)	android:fromYDelta	起始点Y轴从标，同上规律
TranslateAnimation(…, float toXDelta, …)	android:toXDelta	结束点X轴坐标，同上规律
TranslateAnimation(…, float toYDelta)	android:toYDelta	结束点Y轴坐标，同上规律

（1）Interpolator 插值器

学习动画，必须知道插值器是什么东西？
一般默认情况下，动画都是匀速的，插值器可以让动画的速率发生改变，下面是Java和xml插值器的对应表

java 类	xml ID值	描述信息
AccelerateDecelerateInterpolator	@android:anim/accelerate_decelerate_interpolator	动画始末速率较慢，中间加速
AccelerateInterpolator	@android:anim/accelerate_interpolator	动画开始速率较慢，之后慢慢加速
AnticipateInterpolator	@android:anim/anticipate_interpolator	开始的时候从后向前甩
AnticipateOvershootInterpolator	@android:anim/anticipate_overshoot_interpolator	类似上面 AnticipateInterpolator
BounceInterpolator	@android:anim/bounce_interpolator	动画结束时弹起
CycleInterpolator	@android:anim/cycle_interpolator	循环播放速率改变为正弦曲线
DecelerateInterpolator	@android:anim/decelerate_interpolator	动画开始快然后慢
LinearInterpolator	@android:anim/linear_interpolator	动画匀速改变
OvershootInterpolator	@android:anim/overshoot_interpolator	向前弹出一定值之后回到原来位置
PathInterpolator		新增，定义路径坐标后按照路径坐标来跑。

（2）透明度动画演示

代码实现如下：

            //渐变透明度动画效果
            AlphaAnimation alphaAnimation = new AlphaAnimation(0,1);
            alphaAnimation.setDuration(2000);
            alphaAnimation.setInterpolator(new LinearInterpolator());
            imageView.startAnimation(alphaAnimation);

xml实现如下：

            Animation animation = AnimationUtils.loadAnimation(this, R.anim.alpha_ani);
            imageView.startAnimation(animation);

动画效果如下：

4.gif

（3）旋转动画演示

代码实现如下：

            RotateAnimation rotateAnimation = new RotateAnimation(0, 360, imageView.getWidth()/2, imageView.getHeight()/2);
            rotateAnimation.setDuration(2000);
            rotateAnimation.setInterpolator(new LinearInterpolator());
            imageView.startAnimation(rotateAnimation);

xml实现如下：

            Animation animation = AnimationUtils.loadAnimation(this, R.anim.alpha_ani);
            imageView.startAnimation(animation);

动画效果如下：

6.gif

（4）缩放动画演示

代码实现如下：

            ScaleAnimation scaleAnimation = new ScaleAnimation(0, 1, 0, 1, imageView.getWidth()/2, imageView.getHeight()/2);
            scaleAnimation.setDuration(2000);
            scaleAnimation.setInterpolator(new LinearInterpolator());
            scaleAnimation.setRepeatCount(2);
            imageView.startAnimation(scaleAnimation);

xml实现如下：

            Animation animation = AnimationUtils.loadAnimation(this, R.anim.alpha_ani);
            imageView.startAnimation(animation);

动画效果如下：

7.gif

另外，顺便提一下，我在电脑上安装了Android4.x和Android5.x的模拟器，缩放动画在Android5.0上一点问题都没有，但是在Android4.x上经常动画进行到一半就停止了。当我去监听这个动画的时候

            scaleAnimation.setAnimationListener(new Animation.AnimationListener() {
                @Override
                public void onAnimationStart(Animation animation) {
                    
                }

                @Override
                public void onAnimationEnd(Animation animation) {

                }

                @Override
                public void onAnimationRepeat(Animation animation) {

                }
            });

发现只走了onAnimationStart方法，没有走onAnimationEnd方法，具体原因还不是很清楚。

（5）位移动画

代码实现如下：

            TranslateAnimation translateAnimation = new TranslateAnimation(0, 300, 0, 0);
            translateAnimation.setDuration(2000);
            imageView.startAnimation(translateAnimation);

xml实现如下：

            Animation animation = AnimationUtils.loadAnimation(this, R.anim.alpha_ani);
            imageView.startAnimation(animation);

动画效果如下：

8.gif

和缩放动画遇到的现象一样，我在电脑上安装了Android4.x和Android5.x的模拟器，位移动画在Android5.0上一点问题都没有，但是在Android4.x上经常动画进行到一半就停止了。

（6）View上两个重要方法

前面已经为大家演示了4种已被封装好的基本动画，它们都必须执行开始动画代码：

view.startAnimation(Animation animation)

除了开始动画代码之外，我们还有一个清楚动画代码：

view.clearAnimation()

当我们销毁当前Activity时，动画仍在进行，这时候就会造成了内存泄漏，所以必须在onDestroy里添加如下代码：

@Override
protected void onDestroy() {
    super.onDestroy();
    
    imageView.clearAnimation();
}

（7）AnimationSet的使用

AnimationSet 继承自 Animation，是上面四种的组合容器管理类，没有自己特有的属性，他的属性继承自 Animation，所以特别注意，当我们对 set 标签使用 Animation 的属性时会对该标签下的所有子控件都产生影响。

代码实现如下：

            TranslateAnimation translateAnimation = new TranslateAnimation(0, 300, 0, 0);
            translateAnimation.setDuration(2000);
            
            AlphaAnimation alphaAnimation = new AlphaAnimation(0.5f,1f);
            alphaAnimation.setDuration(2000);
            alphaAnimation.setInterpolator(new OvershootInterpolator());

            RotateAnimation rotateAnimation = new RotateAnimation(0, 360, imageView.getWidth()/2, imageView.getHeight()/2);
            rotateAnimation.setDuration(2000);
            rotateAnimation.setInterpolator(new OvershootInterpolator());

            ScaleAnimation scaleAnimation = new ScaleAnimation(0, 1, 0, 1, imageView.getWidth()/2, imageView.getHeight()/2);
            scaleAnimation.setDuration(2000);
            scaleAnimation.setInterpolator(new OvershootInterpolator());

            AnimationSet animationSet = new AnimationSet(true);
            animationSet.addAnimation(translateAnimation);
            animationSet.addAnimation(alphaAnimation);
            animationSet.addAnimation(rotateAnimation);
            animationSet.addAnimation(scaleAnimation);
            animationSet.setDuration(8000);
            imageView.startAnimation(animationSet);

xml实现如下：

            Animation animation = AnimationUtils.loadAnimation(this, R.anim.alpha_ani);
            imageView.startAnimation(animation);

动画效果如下：

9.gif

（8）特别注意

补间动画执行之后并未改变 View 的真实布局属性值。切记这一点，譬如我们在 Activity 中有一个 Button 在屏幕上方，我们设置了平移动画移动到屏幕下方然后保持动画最后执行状态在屏幕下方，这时如果点击屏幕下方动画执行之后的 Button 是没有任何反应的，而点击原来屏幕上方没有 Button 的地方却响应的是点击Button的事件。

属性动画可以实现补间动画的一切，而且属性动画是没有上述的弊端的。

（9）PopupWindow淡入弹出动画

如果PopupWindow不加入动画效果是这样的，如图：

9.gif

为了增加用户友好性，我们给它增加淡入淡出效果：

mImgPopupWindow.setAnimationStyle(R.style.popup_animation_style);

PopupWindow可以设置动画样式，添加动画样式之后的效果如图：

10.gif

当然，您也可以给它添加旋转效果，具体可以自由发挥了。

全部代码如下：

            if(mImgPopupWindow == null){
                View view = LayoutInflater.from(this).inflate(R.layout.layout_popup, null);
                mImgPopupWindow = new PopupWindow(view, anchor.getMeasuredWidth(), anchor.getMeasuredWidth());
                mImgPopupWindow.setAnimationStyle(R.style.popup_animation_style);
            }
            if(mImgPopupWindow.isShowing()){
                mImgPopupWindow.dismiss();
            }else{
                mImgPopupWindow.showAsDropDown(anchor);
            }

popup_animation_style

animation_popup_enter

animation_popup_exit

（10）布局动画--LayoutAnimation

现有一个ViewGroup布局，如下：

LinearLayout是ViewGroup中的一种，其有若干子View，那些子View入场的时候是没有动画的，现在想要为那些子View添加入场动画，效果如下：

96.gif

以上图片所展示的View的入场动画是不是很逼格？那么怎么做到的呢？只需要为ViewGroup添加一个布局动画即可。

[方式一] xml方式

图片.png

layout_anim.xml

有关layoutAnimation标签下的属性的解释：

android:delay 表示动画播放的延时，既可以是百分比，也可以是 float 小数。
android:animationOrder 表示动画的播放顺序，有三个取值 normal(顺序)、reverse(反序)、random(随机)。
android:animation 指向了子控件所要播放的动画。

layout_item_anim_set.xml

[方式二] java代码方式

    Animation animation = AnimationUtils.loadAnimation(this, R.anim.layout_item_anim_set);
    LayoutAnimationController controller = new LayoutAnimationController(animation);
    controller.setDelay(0.5f);
    controller.setOrder(LayoutAnimationController.ORDER_NORMAL);
    ll_root.setLayoutAnimation(controller);

它的效果和方式一一样。

现在著名的RecyclerView也有自己的入场动画，RecyclerView也是ViewGroup中的一种，xml现实方式和上面一样，java实现方式也和上面一致：

    Animation animation = AnimationUtils.loadAnimation(this, R.anim.layout_item_anim_set);
    LayoutAnimationController controller = new LayoutAnimationController(animation);
    controller.setDelay(0.5f);
    controller.setOrder(LayoutAnimationController.ORDER_NORMAL);
    mRecyclerView.setLayoutAnimation(controller);

效果如下：

97.gif

参考文献：

https://github.com/OCNYang/Android-Animation-Set/tree/master/view-animation

[本章完...]

Android动画<第一篇>：视图动画

（1）Interpolator 插值器

（2）透明度动画演示

（3）旋转动画演示

（4）缩放动画演示

（5）位移动画

（6）View上两个重要方法

（7）AnimationSet的使用

（8）特别注意

（9）PopupWindow淡入弹出动画

（10）布局动画--LayoutAnimation

参考文献：

你可能感兴趣的:(Android动画<第一篇>：视图动画)