Android之多个View同时动画

最新推荐文章于 2025-08-23 10:35:18 发布

原创最新推荐文章于 2025-08-23 10:35:18 发布 · 1.2w 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#同时动画

android studio 专栏收录该内容

91 篇文章

订阅专栏

本文探讨了Android开发中实现多个View同时动画的方法，重点介绍了使用AnimatorSet进行动画组合。作者指出，若试图在一个View中包含另一个View进行同时动画会导致问题。另外，文章提到了一个常见坑点，即未初始化或隐藏的View在动画过程中可能出现闪烁，解决方案是为View添加背景。

本文主要是记录开发过程中遇到的坑

动画是为了提高交互性而在应用里增加的，单个动画的实现有好几种方式，比如

(View).animate().scaleY(0.5f).alpha(0.5f).translationX(100f).setDuration(500).start();

这是单个view属性动画的两种实现

要实现多个view 同时动画，也提供了方法 AnimatorSet，比如这样的效果

先说坑，两个view，上面一个叫top，上移，变小；下面一个叫bottom，只有上移

首先，top 和 bottom 是两个单独的view，不能bottom里包含top，我一开始就是这么干的，结果无法实现同时动画。

上面的view黑色部分，如果没有view（view没有初始化，没有显示出来）top 在移上去后会有一个闪动，给加个背景，不让其消失就好了

android:background="@drawable/border_top"

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item >
        <shape >
            <stroke android:width="1dp" android:color="#00000000"/>
        </shape>
    </item>

</layer-list>

<!--  http://www.thinksaas.cn/topics/0/213/213132.html -->

布局文件（测试）

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

   
    <FrameLayout
        android:id="@+id/pic_take_pic_big_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:paddingBottom="@dimen/common_measure_6dp"
        >

        <ImageView
            android:id="@+id/pic_dynamic_lv3_item_like"
            android:layout_gravity="bottom"
            android:layout_width="@dimen/common_measure_40dp"
            android:layout_height="@dimen/common_measure_40dp"
            android:padding="@dimen/common_measure_10dp"
            android:src="@drawable/unlike"
            android:visibility="gone"
            />

       

    </FrameLayout>

    <!-- dynamic 把这个控件放到屏幕最底下 -->

    <LinearLayout
        android:id="@+id/pic_dynamic_recycle_view"
        android:layout_width="match_parent"
        android:layout_height="@dimen/common_measure_184dp"
        android:layout_alignParentBottom="true"
        android:background="@color/white"
        android:orientation="vertical"
        android:paddingBottom="@dimen/common_measure_3dp"
        android:visibility="gone"
        >

      

        <TextView
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="#e5e5e5" />

        

    </LinearLayout>


</RelativeLayout>

动画

AnimatorSet animatorSet;
    int drawableId;

    // 两个动画同时 TODO
    protected void showDynamic(int id) {

        drawableId = id;

        animatorSet = new AnimatorSet();

        dynamicRecycleView.setVisibility(View.VISIBLE);
        dynamicRecycleView.post(new Runnable() {
            @Override
            public void run() {
                int height = dynamicRecycleView.getMeasuredHeight();
                // view 移动
                ObjectAnimator animator = ObjectAnimator.ofFloat(dynamicRecycleView, "translationY", height, 0f);
                // 移动 + 缩小
                ObjectAnimator animator1 = ObjectAnimator.ofFloat(cameraView, "translationY", -(height - 10));
                ObjectAnimator animator2 = ObjectAnimator.ofFloat(bigCameraView, "scaleX", 0.73f);
                ObjectAnimator animator3 = ObjectAnimator.ofFloat(bigCameraView, "scaleY", 0.73f);
                // 缩放中心
                bigCameraView.setPivotX(bigCameraView.getMeasuredWidth() / 2);
                bigCameraView.setPivotY(bigCameraView.getMeasuredHeight());
                bigCameraView.invalidate();//显示的调用invalidate

                animatorSet.play(animator1).with(animator2).with(animator3)// ;
                        .with(animator);

                animatorSet.setDuration(600);
//                animatorSet.setInterpolator(new AccelerateDecelerateInterpolator());
                animatorSet.addListener(showListener);
                animatorSet.start();


            }
        });

       
    }

    Animator.AnimatorListener showListener = new Animator.AnimatorListener() {
        @Override
        public void onAnimationStart(Animator animation) {

        }

        @Override
        public void onAnimationEnd(Animator animation) {
            if(drawableId != -1) {
                bigCameraView.setImageResource(drawableId);
            }
        }

        @Override
        public void onAnimationCancel(Animator animation) {

        }

        @Override
        public void onAnimationRepeat(Animator animation) {

        }
    };


    protected void dismissDynamic(int id) {
        animatorSet = new AnimatorSet();
        int height = dynamicRecycleView.getMeasuredHeight();
        // 相对位置
        ObjectAnimator animator = ObjectAnimator.ofFloat(dynamicRecycleView, "translationY", 0f, height);
        ObjectAnimator animator1 = ObjectAnimator.ofFloat(cameraView, "translationY", -height, 0f);
        ObjectAnimator animator2 = ObjectAnimator.ofFloat(bigCameraView, "scaleX", 0.73f, 1f);
        ObjectAnimator animator3 = ObjectAnimator.ofFloat(bigCameraView, "scaleY", 0.73f, 1f);


        animatorSet.play(animator1).with(animator2).with(animator3).with(animator);

        animatorSet.setDuration(600);
        animatorSet.setInterpolator(new AccelerateDecelerateInterpolator());
        animatorSet.addListener(dismissListener);
        animatorSet.start();
        if (id != -1) {
            bigCameraView.setImageResource(id);
        }


    }

    Animator.AnimatorListener dismissListener = new Animator.AnimatorListener() {
        @Override
        public void onAnimationStart(Animator animation) {

        }

        @Override
        public void onAnimationEnd(Animator animation) {
            dynamicRecycleView.setVisibility(View.GONE);
        }

        @Override
        public void onAnimationCancel(Animator animation) {

        }

        @Override
        public void onAnimationRepeat(Animator animation) {

        }
    };