属性动画的核心方法：ValueAnimator.ofInt(int... values)

该方法的实现目的：以整形初始值平稳过渡到整形结束值。

比如 ValueAnimator.ofInt(0,100) , 实现的即数值从0平稳的变化到100

 

比如实现如下一个效果：

改变控件的样式，圆形和圆角长方形切换

实现思路很简单，即高度不变，改变控件的宽度（圆形时：宽高相等，长方形时：宽度为屏幕宽度-两边边距），顺便设置一个背景值，动画执行过程随便设个值（例子250毫秒）

 

现在看具体实现：

1、首先布局文件，设置两个按钮和一个效果控件 ， 这里设置执行效果控件的高度固定为50dp,当然可以自行扩展

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/tvToCir"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="长方形变圆形"
        android:padding="10dp"
        ></TextView>


    <TextView
        android:id="@+id/tvToRect"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="圆形变长方形"
        android:padding="10dp"
        android:layout_marginTop="20dp"
        ></TextView>


    <TextView
        android:id="@+id/tvAdd"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:text="+"
        android:gravity="center"
        android:textColor="#fff"
        android:background="@drawable/shape_main_add_rect"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginRight="30dp"
        android:layout_marginLeft="30dp"
        android:layout_marginTop="30dp"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="30dp"
        />

</LinearLayout>

 

 

2、分别写下长方形和圆形状态时对应的背景文件，即drawable类型的shape属性

（1）圆形，圆角为25dp(因为宽度为50dp,设置一半数值即为圆形效果), 背景绿色，再加一个白色的边，为了效果好看些

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!--第一层阴影-->
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#0F000000" />
            <corners android:radius="25dp" />
        </shape>
    </item>
    <item
        android:bottom="2dp"
        android:left="2dp"
        android:right="2dp"
        android:top="2dp">
        <shape android:shape="rectangle">
            <solid android:color="#fff" />
            <corners android:radius="25dp" />
        </shape>
    </item>
    <!--第二层前景-->
    <item
        android:bottom="5dp"
        android:left="5dp"
        android:right="5dp"
        android:top="5dp">
        <shape android:shape="rectangle">
            <solid android:color="#29C66A"/>
            <corners android:radius="25dp" />
        </shape>
    </item>

</layer-list>

 

（2）长方形，同上，不过圆角设置可以设置小一点，这个读者可以仿着圆角自己写一个，完整代码请到最后查看 

 

3、动画的实现方法，以长方形到圆形为例，只需依赖ValueAnimator.ofInt()方法设置数值从25dp到屏幕宽度-两边边距即可

// 长方形变圆形
    public void rectToCir(){
        // 异常，如果动画对象为null 或者 动画在执行中
        if (valAnimator!=null && valAnimator.isRunning()){
            return;
        }
        // 长方形宽度为屏幕宽度-去两边各30dp, 圆形宽度为50dp, 因为设置的空间高度为50dp,圆角为25dp,即实现了圆形图标
        // ofInt(int a, int b)表示 动画取值从a到b
        valAnimator = ValueAnimator.ofInt(screenWidth-2*dpToPx(30), dpToPx(50));
        valAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                // 定义动画的值，即ofInt方法设置的取值范围，值变化时即执行该回调
                int h = (int) animation.getAnimatedValue();
                // 结果处理，若值为宽度-2*50dp，说明为长方形，则设置文案
                if (h==screenWidth-2*dpToPx(30)){
                    tvAdd.setText("");
                }else if (h==dpToPx(50)){
                    // 说明变圆形了，设置文案 ， 同时设置背景
                    tvAdd.setText("+");
                    tvAdd.setTextSize(14);
                    tvAdd.setBackgroundResource(R.drawable.shape_main_add_cir);
                }
                LinearLayout.LayoutParams linearParams = (LinearLayout.LayoutParams) tvAdd.getLayoutParams(); //取控件textView当前的布局参数
                linearParams.width = h;// 控件的高强制设成20
                tvAdd.setLayoutParams(linearParams);

            }
        });
        // 动画执行过程为250毫秒
        valAnimator.setDuration(250);
        // 开始执行动画
        valAnimator.start();
    }

 

   

Activity完整代码如下：

package com.mxqx.xqxtest;

import androidx.appcompat.app.AppCompatActivity;

import android.animation.ValueAnimator;
import android.content.res.Resources;
import android.os.Bundle;
import android.view.View;
import android.view.WindowManager;
import android.widget.LinearLayout;
import android.widget.TextView;
/**
 * @author : https://www.cnblogs.com/xqxacm/ xqx
 * @create_day : 2021/10/2
 * @description :
 */
public class MainActivity extends AppCompatActivity {

    TextView tvToCir;   // 长方形变圆形按钮
    TextView tvToRect;  // 圆形变长方形按钮
    TextView tvAdd;     // 添加按钮
    int screenWidth = 0;  // 屏幕宽度
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }

    private void initView() {
        tvToCir = findViewById(R.id.tvToCir);
        tvToRect = findViewById(R.id.tvToRect);
        tvAdd = findViewById(R.id.tvAdd);
        // 获取屏幕宽度
        WindowManager wm1 = this.getWindowManager();
        screenWidth = wm1.getDefaultDisplay().getWidth();

        // 点击事件
        tvToCir.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                // 长方形变圆形
                rectToCir();
            }
        });
        tvToRect.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                // 圆形变长方形
                cirToTri();
            }
        });
    }

    ValueAnimator valAnimator ;
    // 长方形变圆形
    public void rectToCir(){
        // 异常，如果动画对象为null 或者 动画在执行中
        if (valAnimator!=null && valAnimator.isRunning()){
            return;
        }
        // 长方形宽度为屏幕宽度-去两边各30dp, 圆形宽度为50dp, 因为设置的空间高度为50dp,圆角为25dp,即实现了圆形图标
        // ofInt(int a, int b)表示 动画取值从a到b
        valAnimator = ValueAnimator.ofInt(screenWidth-2*dpToPx(30), dpToPx(50));
        valAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                // 定义动画的值，即ofInt方法设置的取值范围，值变化时即执行该回调
                int h = (int) animation.getAnimatedValue();
                // 结果处理，若值为宽度-2*50dp，说明为长方形，则设置文案
                if (h==screenWidth-2*dpToPx(30)){
                    tvAdd.setText("");
                }else if (h==dpToPx(50)){
                    // 说明变圆形了，设置文案 ， 同时设置背景
                    tvAdd.setText("+");
                    tvAdd.setTextSize(14);
                    tvAdd.setBackgroundResource(R.drawable.shape_main_add_cir);
                }
                LinearLayout.LayoutParams linearParams = (LinearLayout.LayoutParams) tvAdd.getLayoutParams(); //取控件textView当前的布局参数
                linearParams.width = h;// 控件的高强制设成20
                tvAdd.setLayoutParams(linearParams);

            }
        });
        // 动画执行过程为250毫秒
        valAnimator.setDuration(250);
        // 开始执行动画
        valAnimator.start();
    }
    // 圆形变长方形
    public void cirToTri(){
        if (valAnimator!=null && valAnimator.isRunning()){
            return;
        }
        valAnimator = ValueAnimator.ofInt(dpToPx(50), screenWidth-2*dpToPx(30));
        valAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                int h = (int) animation.getAnimatedValue();
                if (h==screenWidth-2*dpToPx(30)){
                    tvAdd.setText("添加");
                    tvAdd.setBackgroundResource(R.drawable.shape_main_add_rect);
                }else if (h==dpToPx(50)){
                    tvAdd.setText("");
                }
                LinearLayout.LayoutParams linearParams = (LinearLayout.LayoutParams) tvAdd.getLayoutParams(); //取控件textView当前的布局参数
                linearParams.width = h;// 控件的高强制设成20
                tvAdd.setLayoutParams(linearParams);

            }
        });
        valAnimator.setDuration(250);
        valAnimator.start();
    }

    /**
     * 把以 dp 为单位的值，转化为以 px 为单位的值
     *
     * @param dpValue 以 dp 为单位的值
     * @return px value
     */
    public static int dpToPx(int dpValue) {
        return (int) (dpValue * DENSITY + 0.5f);
    }
    /**
     * 屏幕密度,系统源码注释不推荐使用
     */
    public static final float DENSITY = Resources.getSystem()
            .getDisplayMetrics().density;
}