指南百分比变化时的幻灯片动画

Posted 2023-04-18

【中文标题】指南百分比变化时的幻灯片动画

【英文标题】：Slide animation when guideline percent changes

【发布时间】：2021-04-14 11:55:06

【问题描述】：

我的视图如下所示：

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_
    android:layout_
    android:layout_marginBottom="4dp">

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

    <View
        android:id="@+id/background"
        android:layout_
        android:layout_
        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%），它只是交叉淡入淡出。

我做错了什么？我将如何更改我的代码，以便在指导百分比更改时动画滑动背景颜色？

【参考方案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();

            
        );

【讨论】：

这行得通，但为什么在我的问题中它不能与ConstraintSet 一起使用？

据我了解，您没有获得滑动动画，我尝试了您的代码，它显示了滑动动画（与上面的代码完全相同）。您可以尝试将AutoTransition 对象参数传递给您的beginDelayedTransition 调用吗，就像这样：TransitionManager.beginDelayedTransition(contentView,AutoTransition())