RelativeLayout实现叠加View的动画效果

动画效果说明

需要实现一个箭头消失出现的动画

没点击前是未选中的灰色箭头， 点击之后变为选中的红色箭头

点击过程需要增加动画效果

灰色箭头向上位移加渐变消失

红色箭头从灰色箭头原来的位置向上位移加渐变出现

实现方式

选择layout

由于动画效果过程中，会存在灰色箭头和红色箭头叠加的情况，最早考虑通过LinearLayout来实现布局，后面没有找到Linearlayout怎么能让两个View叠加显示，即同一个LinearLayout下的两个子View的 x y位置一样。

后面发现通过RelativeLayout可以很好的让两个View能叠加显示，当然RelativeLayout布局相对要复杂一些，布局文件：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout  xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_marginLeft="8dp"
    android:layout_marginRight="8dp"
    android:id="@+id/recommend_moudle"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content">
    <ImageView
        android:id="@+id/comment_agree_icon"
        style="@style/auto_size"
        android:layout_centerVertical="true"
        android:layout_alignParentLeft="true"
        android:gravity="bottom"
        android:paddingRight="12dp"
        android:paddingLeft="12dp"
        android:layout_marginRight="3dp"
        android:src="?attr/comment_agree_default_attr" />
    <TextView
        android:id="@+id/recommend"
        style="@style/auto_size"
        android:layout_alignParentBottom="true"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@id/comment_agree_icon"
        android:gravity="bottom"
        android:text="33"
        android:textColor="?attr/channel_left_message_attr"
        android:textSize="13sp" />
    <ImageView
        android:id="@+id/comment_disagree_icon"
        style="@style/auto_size"
        android:layout_toRightOf="@id/recommend"
        android:layout_centerVertical="true"
        android:layout_marginLeft="3dp"
        android:paddingLeft="12dp"
        android:gravity="bottom"
        android:paddingRight="12dp"
        android:src="?attr/comment_disagree_default_attr" />

</RelativeLayout>

新的view是静态布局还是动态添加

选择的是动态添加新的红色箭头View的方式

        final RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
        lp.addRule(RelativeLayout.ALIGN_PARENT_LEFT);
        lp.addRule(RelativeLayout.CENTER_VERTICAL);
        final ImageView agreeClickedImgSlice; // 已顶内容的容器：imgView
        Animation agreeClickedIconAnimation;

        final View aniamtionClickedIconView = LayoutInflater.from(mContext).inflate(
                R.layout.comment_agree_animation_clicked, null);
        agreeClickedImgSlice = (ImageView) aniamtionClickedIconView.findViewById(R.id.comment_agree_icon_appear);
        ((RelativeLayout)clickViewItem.findViewById(R.id.recommend_moudle)).addView(aniamtionClickedIconView, lp);
        agreeClickedIconAnimation = AnimationUtils.loadAnimation(mContext,
                R.anim.comment_agree_clicked_appear);

        agreeClickedImgSlice.setAnimation(agreeClickedIconAnimation);

两个View的动画如何同步播放

通过AnimationSet， 但其实看了一下Andoird源码View.startAnimation方法， 只要调用了start方法，就会指定动画下一帧就开始播放刷新。AnimationSet也会指定子动画都从下一帧开始播放。

public void startAnimation(Animation animation) {
        animation.setStartTime(Animation.START_ON_FIRST_FRAME);
        setAnimation(animation);
        invalidateParentCaches();
        invalidate(true);
    }

原来的灰色箭头就是一个translate + alpha动画 新的红色箭头也是translate + alpha动画。  动画结束后将原来的灰色箭头的view对应的img替换为红色箭头图片

    private Animation getAgreeIconUpAnimation(final View clickViewItem) {
        Animation agreeDefaultIconAnimation;
        final ImageView agreeIcon;
        agreeIcon = (ImageView) clickViewItem.findViewById(R.id.comment_agree_icon);
        agreeDefaultIconAnimation = AnimationUtils.loadAnimation(mContext,
                R.anim.comment_agree_default_disappear);
        agreeIcon.setAnimation(agreeDefaultIconAnimation);

        final RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
        lp.addRule(RelativeLayout.ALIGN_PARENT_LEFT);
        lp.addRule(RelativeLayout.CENTER_VERTICAL);
        final ImageView agreeClickedImgSlice; // 已顶内容的容器：imgView
        Animation agreeClickedIconAnimation;

        final View aniamtionClickedIconView = LayoutInflater.from(mContext).inflate(
                R.layout.comment_agree_animation_clicked, null);
        agreeClickedImgSlice = (ImageView) aniamtionClickedIconView.findViewById(R.id.comment_agree_icon_appear);
        ((RelativeLayout)clickViewItem.findViewById(R.id.recommend_moudle)).addView(aniamtionClickedIconView, lp);
        agreeClickedIconAnimation = AnimationUtils.loadAnimation(mContext,
                R.anim.comment_agree_clicked_appear);

        agreeClickedImgSlice.setAnimation(agreeClickedIconAnimation);
        final AnimationSet animationSet = new AnimationSet(false);
        animationSet.addAnimation(agreeDefaultIconAnimation);
        animationSet.addAnimation(agreeClickedIconAnimation);
        setAnimationStart(ANIMATION_AGREE_ICON_DEFAULT_DISAPPEAR);
        setAnimationStart(ANIMATION_AGREE_ICON_CLICKED_APPEAR);
        agreeClickedIconAnimation.setStartOffset(0);
        agreeDefaultIconAnimation.setStartOffset(0);

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

            @Override
            public void onAnimationRepeat(Animation animation) {
            }

            @Override
            public void onAnimationEnd(Animation animation) {

                agreeIcon.setImageResource(R.drawable.comment_agree_clicked);
                agreeClickedImgSlice.clearAnimation();
                ((RelativeLayout)clickViewItem.findViewById(R.id.recommend_moudle)).removeView(aniamtionClickedIconView);
                setAnimationEnd(ANIMATION_AGREE_ICON_CLICKED_APPEAR);
                animationEnd();
            }
        });
        agreeDefaultIconAnimation.setAnimationListener(new Animation.AnimationListener() {

            @Override
            public void onAnimationStart(Animation animation) {

            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }

            @Override
            public void onAnimationEnd(Animation animation) {
                agreeIcon.setImageResource(Config.pageNightMode ?
                        R.drawable.comment_agree_clicked_night : R.drawable.comment_agree_clicked);
                agreeIcon.clearAnimation();
                setAnimationEnd(ANIMATION_AGREE_ICON_DEFAULT_DISAPPEAR);
                animationEnd();

            }
        });
        return animationSet;
    }