View向两侧展开的动画、View向中间隐藏的动画

350 阅读1分钟

View向两侧展开的动画、View向中间隐藏的动画 动画效果如下: 简单的布局文件

activity_test.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal"
    android:orientation="vertical"
    android:paddingTop="200dp"
    tools:context="com.example.jxlauncher.test.MainActivity">

    <TextView
        android:id="@+id/textview"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:layout_margin="50dp"
        android:background="@color/purple_200"
        android:gravity="center"
        android:padding="10dp"
        android:visibility="invisible"
        android:text="我是内容" />

    <Button
        android:id="@+id/button"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:text="点击我显示"/>
    <Button
        android:id="@+id/buttonHide"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:text="点击我隐藏"/>
</LinearLayout>

代码中设置动画

TestActivity.java

import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.ScaleAnimation;
import android.widget.Button;
import android.widget.TextView;

import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;

import com.example.myapplication.R;

public class TestActivity extends AppCompatActivity {

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_test);
        TextView textView = findViewById(R.id.textview);
        Button button = findViewById(R.id.button);
        button.setOnClickListener(v -> animateView(textView));
        Button buttonHide = findViewById(R.id.buttonHide);
        buttonHide.setOnClickListener(v -> {
            animateViewHide(textView);
        });
    }

    public void animateView(View view) {
        // 设置pivotX和pivotY为视图的中心
        view.setPivotX(view.getWidth() / 2);
        view.setPivotY(view.getHeight() / 2);

        // 创建X轴缩放的ObjectAnimator
        ObjectAnimator scaleXAnimator = ObjectAnimator.ofFloat(view, "scaleX", 0f, 1f);

        // 创建AnimatorSet来同时执行动画
        AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.setDuration(500);
        animatorSet.playTogether(scaleXAnimator);

        // 动画开始前将视图设置为可见
        animatorSet.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationStart(Animator animation) {
                view.setVisibility(View.VISIBLE);
            }
        });

        // 开始动画
        animatorSet.start();
    }

    public void animateViewHide(View view) {
        // 创建一个从正常大小到中间隐藏的ScaleAnimation
        ScaleAnimation scaleAnimation = new ScaleAnimation(
                1f, 0f, // X轴从1倍缩小到0倍
                1f, 1f, // Y轴保持不变
                Animation.RELATIVE_TO_SELF, 0.5f, // X轴相对view的中心点
                Animation.RELATIVE_TO_SELF, 0.5f  // Y轴相对view的中心点
        );

        // 设置动画持续时间
        scaleAnimation.setDuration(500);

        // 动画结束后将视图设置为不可见
        scaleAnimation.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
            }

            @Override
            public void onAnimationEnd(Animation animation) {
                view.setVisibility(View.INVISIBLE);
            }

            @Override
            public void onAnimationRepeat(Animation animation) {
            }
        });

        // 开始动画
        view.startAnimation(scaleAnimation);
    }
}