Android动画效果之自定义ViewGroup添加布局动画

约定不等于承诺〃 2022-06-04 00:07 519阅读 0赞

# [Android动画效果之自定义ViewGroup添加布局动画][Android_ViewGroup] #

### 前言： ###

前面几篇文章介绍了补间动画、逐帧动画、属性动画，大部分都是针对View来实现的动画，那么该如何为了一个ViewGroup添加动画呢？今天结合自定义ViewGroup来学习一下布局动画。本文将通过对自定义图片选择控件设置动画为例来学习布局动画。

其他几种动画效果：

*  [Android动画效果之Tween Animation（补间动画）][Android_Tween Animation]
 *  [Android动画效果之Frame Animation（逐帧动画）][Android_Frame Animation]
 *  [Android动画效果之初识Property Animation（属性动画）][Android_Property Animation]
 *  [Android动画效果之Property Animation进阶（属性动画）][Android_Property Animation 1]
 *  [Android动画效果之自定义ViewGroup添加布局动画][Android_ViewGroup]

### 自定义一个显示多行图片的ViewGroup： ###

这里不再对自定义控件做解说，想了解的可以看下以下几篇文章

*  [Android自定义控件之基本原理（一）][Android]
 *  [Android自定义控件之自定义属性（二）][Android 1]
 *  [Android自定义控件之自定义组合控件（三）][Android 2]
 *  [Android自定义控件之自定义ViewGroup实现标签云（四）][Android_ViewGroup 1]

声明几个属性值：

<declare-styleable name="GridImageViewGroup">
            <attr name="childVerticalSpace" format="dimension"/>
            <attr name="childHorizontalSpace" format="dimension"/>
            <attr name="columnNum" format="integer"/>
        </declare-styleable>

GridImageViewGroup.java 代码

![ContractedBlock.gif][] GridImageViewGroup.java

在xml中引用：

![复制代码][copycode.gif]

<com.whoislcj.animation.GridImageViewGroup
                android:id="@+id/image_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:animateLayoutChanges="true"
                lee:childHorizontalSpace="10dp"
                lee:childVerticalSpace="10dp"
                lee:columnNum="3"/>

![复制代码][copycode.gif]

在Activity中调用：

![复制代码][copycode.gif]

private void initViews() {
            mImageViewGroup = (GridImageViewGroup) findViewById(R.id.image_layout);
            ImageView imageView = new ImageView(this);
            imageView.setImageResource(R.mipmap.add_image);
            imageView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    addImageView();
                }
            });
            mImageViewGroup.addView(imageView);
        }
    
        public void addImageView() {
            final ImageView imageView = new ImageView(MainActivity4.this);
            imageView.setImageResource(R.mipmap.lottery);
            imageView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    mImageViewGroup.removeView(imageView);
                }
            });
            mImageViewGroup.addView(imageView, 0);
        }

![复制代码][copycode.gif]

实现效果如下：

![950883-20160824151605823-1505116752.gif][]

### 布局动画产生的背景： ###

凡事总要问个明白，为何要引入布局动画呢？其实通过上面的实现效果可以看出，在添加和删除图片时都显得很突兀，不知道该用什么语言形容了，总之就是感觉不舒服。其实我平时在开发中调用View.setVisibility()方法时也会有这种感受，这也是布局动画产生的一个背景吧。

### 布局动画： ###

布局动画是指ViewGroup在布局时产生的动画效果 。实现布局动画有如下几种方式

#### 第一种方式：在xml中，对ViewGrope设置`android:animateLayoutChanges="true"`属性： ####

![复制代码][copycode.gif]

就这么简单的一句话实现的效果就可以实现了，看看效果如何

![950883-20160824153403261-1946525516.gif][]

这种方式虽然简单但是实现的布局动画比较单一，下面看第二种方式。

#### 第二种方式：LayoutTransition实现 ####

![复制代码][copycode.gif]

LayoutTransition mLayoutTransition = new LayoutTransition();
    
            //设置每个动画持续的时间
            mLayoutTransition.setStagger(LayoutTransition.CHANGE_APPEARING, 50);
            mLayoutTransition.setStagger(LayoutTransition.CHANGE_DISAPPEARING, 50);
            mLayoutTransition.setStagger(LayoutTransition.APPEARING, 50);
            mLayoutTransition.setStagger(LayoutTransition.DISAPPEARING, 50);
    
            PropertyValuesHolder appearingScaleX = PropertyValuesHolder.ofFloat("scaleX", 0.5f, 1.0f);
            PropertyValuesHolder appearingScaleY = PropertyValuesHolder.ofFloat("scaleY", 0.5f, 1.0f);
            PropertyValuesHolder appearingAlpha = PropertyValuesHolder.ofFloat("alpha", 0f, 1f);
            ObjectAnimator mAnimatorAppearing = ObjectAnimator.ofPropertyValuesHolder(this, appearingAlpha, appearingScaleX, appearingScaleY);
            //为LayoutTransition设置动画及动画类型
            mLayoutTransition.setAnimator(LayoutTransition.APPEARING, mAnimatorAppearing);
    
    
            PropertyValuesHolder disappearingAlpha = PropertyValuesHolder.ofFloat("alpha", 1f, 0f);
            PropertyValuesHolder disappearingRotationY = PropertyValuesHolder.ofFloat("rotationY", 0.0f, 90.0f);
            ObjectAnimator mAnimatorDisappearing = ObjectAnimator.ofPropertyValuesHolder(this, disappearingAlpha, disappearingRotationY);
            //为LayoutTransition设置动画及动画类型
            mLayoutTransition.setAnimator(LayoutTransition.DISAPPEARING, mAnimatorDisappearing);
    
    
            ObjectAnimator mAnimatorChangeDisappearing = ObjectAnimator.ofFloat(null, "alpha", 1f, 0f);
            //为LayoutTransition设置动画及动画类型
            mLayoutTransition.setAnimator(LayoutTransition.CHANGE_DISAPPEARING, mAnimatorChangeDisappearing);
    
            ObjectAnimator mAnimatorChangeAppearing = ObjectAnimator.ofFloat(null, "alpha", 1f, 0f);
            //为LayoutTransition设置动画及动画类型
            mLayoutTransition.setAnimator(LayoutTransition.CHANGE_APPEARING, mAnimatorChangeAppearing);
    
            //为mImageViewGroup设置mLayoutTransition对象
            mImageViewGroup.setLayoutTransition(mLayoutTransition);

![复制代码][copycode.gif]

上面通过自定义LayoutTransition 修改系统提高的默认动画效果，如果不需要自定义的动画效果的话，不调用mLayoutTransition.setAnimator(LayoutTransition.DISAPPEARING, mAnimatorDisappearing);就行了。

LayoutTransition 提供了以下几种过渡类型：

*  APPEARING —— 元素在容器中显现时需要动画显示。
 *  CHANGE\_APPEARING —— 由于容器中要显现一个新的元素，其它元素的变化需要动画显示。
 *  DISAPPEARING —— 元素在容器中消失时需要动画显示。
 *  CHANGE\_DISAPPEARING —— 由于容器中某个元素要消失，其它元素的变化需要动画显示。

看下修改过的动画效果：

![950883-20160824162322589-166403964.gif][]

#### 第三种方式：通过设置LayoutAnimation来实现布局动画 ####

AlphaAnimation alphaAnimation = new AlphaAnimation(0f, 1f);
            alphaAnimation.setDuration(200);
            LayoutAnimationController animationController = new LayoutAnimationController(alphaAnimation, 0.5f);
            animationController.setOrder(LayoutAnimationController.ORDER_NORMAL);
            mImageViewGroup.setLayoutAnimation(animationController);

显示顺序有以下几种：

*  ORDER\_NORMAL;//顺序显示
 *  ORDER\_REVERSE;//反显示
 *  ORDER\_RANDOM//随机显示

也可以通过xml实现

![复制代码][copycode.gif]

<?xml version="1.0" encoding="utf-8"?>
    <layoutAnimation
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:delay="0.5"
        android:animationOrder="normal"
        android:animation="@anim/alpha"
        />

![复制代码][copycode.gif]

ViewGroup xml添加android:layoutAnimation属性

![复制代码][copycode.gif]

<com.whoislcj.animation.GridImageViewGroup
                android:id="@+id/image_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:layoutAnimation="@anim/layoutanimation"
                lee:childHorizontalSpace="10dp"
                lee:childVerticalSpace="10dp"
                lee:columnNum="3"/>

![复制代码][copycode.gif]

由于这种方式采用的是补间动画，个人不再推荐使用这种方式，原因很简单实现的动画效果相对单一。

[Android_ViewGroup]: http://www.cnblogs.com/whoislcj/p/5802899.html
[Android_Tween Animation]: http://www.cnblogs.com/whoislcj/p/5730520.html
[Android_Frame Animation]: http://www.cnblogs.com/whoislcj/p/5733740.html
[Android_Property Animation]: http://www.cnblogs.com/whoislcj/p/5738478.html
[Android_Property Animation 1]: http://www.cnblogs.com/whoislcj/p/5796803.html
[Android]: http://www.cnblogs.com/whoislcj/p/5708778.html
[Android 1]: http://www.cnblogs.com/whoislcj/p/5711001.html
[Android 2]: http://www.cnblogs.com/whoislcj/p/5714760.html
[Android_ViewGroup 1]: http://www.cnblogs.com/whoislcj/p/5720202.html
[ContractedBlock.gif]: /images/20220604/60ce672514ee436ab5529229c5ab2feb.png
[copycode.gif]: /images/20220604/17be73b1aa254d3db93c808d9b1c750e.png
[950883-20160824151605823-1505116752.gif]: /images/20220604/2fbf2bd555654678979473d4b654d76a.png
[950883-20160824153403261-1946525516.gif]: /images/20220604/4c0b79d501e24a5ca16b4bc0aeb28889.png
[950883-20160824162322589-166403964.gif]: /images/20220604/696855b1ff404fcaaca6849a0d17215c.png