指南百分比更改时滑动动画

Question

我的视图如下所示：

https://i.stack.imgur.com/zKe01.png

单击时，我想设置灰色背景颜色的动画，使其从右侧滑动到其初始宽度的 50%：

https://i.stack.imgur.com/s96BX.png

这里是布局的相关部分xml:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/content_view"
    android:layout_width="match_parent"
    android:layout_height="44dp"
    android:layout_marginBottom="4dp">

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="1.0"/>

    <View
        android:id="@+id/background"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="@+id/guideline"
        android:background="@drawable/background" />

</androidx.constraintlayout.widget.ConstraintLayout>

我试过以下方法：

contentView.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        ConstraintSet constraintSet = new ConstraintSet();
        constraintSet.clone(contentView);
        constraintSet.setGuidelinePercent(guideline.getId(), 0.5f);

        TransitionManager.beginDelayedTransition(contentView);
        constraintSet.applyTo(contentView);
    }
});

但是背景颜色不是从右向左滑动（100% 到 50%），而是交叉淡化。

我做错了什么？我该如何更改我的代码，以便动画在准则百分比发生变化时滑动背景颜色？

Answer 1

您可以使用 android.animation.ValueAnimator 来更改 guideline 在 constraintLayout 中的百分比值，代码如下：

contentView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // initialize your guideline
                // Guideline guideline = findViewById ....
                
                ValueAnimator valueAnimator = ValueAnimator.ofFloat(1.0f, 0.5f);
                
                // set duration
                valueAnimator.setDuration(1000);
                // set interpolator and  updateListener to get the animated value
                valueAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
                
                // update guideline percent value through LayoutParams
                valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                    @Override
                    public void onAnimationUpdate(ValueAnimator animation) {
                        ConstraintLayout.LayoutParams lp = (ConstraintLayout.LayoutParams) guideline.getLayoutParams();
                        // get the float value
                        lp.guidePercent = (Float) animation.getAnimatedValue();
                        // update layout params
                        guideline.setLayoutParams(lp);
                    }

                });
                valueAnimator.start();

            }
        });

指南百分比更改时滑动动画

Slide animation when guideline percent changes

android

android-animation

android-layout

android-constraintlayout