使用 MotionLayout 将 TextView 动画化为小写

Posted

技术标签:

【中文标题】使用 MotionLayout 将 TextView 动画化为小写【英文标题】:Animate TextView to lower case using MotionLayout 【发布时间】:2021-10-30 21:12:37 【问题描述】:

使用 MotionLayout 将大写的 textView 动画化为小写

喜欢事实 -> 事实

我已成功翻译和更改 textColor,因为我无法在动画期间将所有字母转换为小写

动态场景

<MotionScene 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:motion="http://schemas.android.com/apk/res-auto">

    <Transition
        motion:constraintSetEnd="@+id/end"
        motion:constraintSetStart="@id/start"
        motion:motionInterpolator="easeIn"
        motion:duration="1000">
       <KeyFrameSet>
           <KeyAttribute>

           </KeyAttribute>

       </KeyFrameSet>
        <OnClick motion:targetId="@+id/test_tv" />
    </Transition>

    <ConstraintSet android:id="@+id/start">

        <Constraint
            android:id="@+id/test_tv"
            android:layout_
            motion:layout_constraintEnd_toEndOf="parent"
            android:layout_
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintTop_toTopOf="parent"
            android:rotationX="0"
            android:rotationY="0"
            android:rotation="0">


            <CustomAttribute
                motion:attributeName="textColor"
                motion:customColorValue="#3F51B5" />
            <CustomAttribute
                motion:attributeName="inputType"
                motion:customStringValue="textCapCharacters"/>

        </Constraint>


    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
        <Constraint
            android:id="@+id/test_tv"
            android:layout_
            android:layout_
            android:scaleX="0.75"
            android:scaleY="0.75"
            android:layout_marginTop="10dp"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toBottomOf="@+id/center_horizontal_gl">

            <CustomAttribute
                motion:attributeName="textColor"
                motion:customColorValue="#EC0808" />
            <CustomAttribute
                motion:attributeName="inputType"
                motion:customStringValue="textCapSentences"/>
        </Constraint>


    </ConstraintSet>
</MotionScene>

我尝试过使用 inputType 但它不起作用,而 captialize 已被弃用..

我也试过

<CustomAttribute
                motion:attributeName="textAllCaps"
                motion:customBoolean="false"/>

但不工作..

谁能给我一个更好的解决方案

【问题讨论】:

【参考方案1】:

我相信你不能使用 CustomAttribute 来做到这一点,因为 CustomAttribute 只接受少数数据类型

motion:customColorValue 用于颜色 motion:customIntegerValue 用于整数 motion:customFloatValue 用于浮动 motion:customStringValue 用于字符串 motion:customDimension 用于维度 motion:customBoolean 用于布尔值

它们都不会帮助您实现从大写到小写的更改。 我建议使用下面的运动布局转换监听器。

motionLayout.setTransitionListener(object : MotionLayout.TransitionListener 
    override fun onTransitionTrigger(p0: MotionLayout?, p1: Int, p2: Boolean, p3: Float) 
        
    

    override fun onTransitionStarted(p0: MotionLayout?, p1: Int, p2: Int) 
        
    

    override fun onTransitionChange(p0: MotionLayout?, p1: Int, p2: Int, p3: Float) 
        textView.text.apply = if(p3==0f) textView.text.uppercase() else textView.text.lowercase()
    

    override fun onTransitionCompleted(p0: MotionLayout?, p1: Int) 

    
)

【讨论】:

以上是关于使用 MotionLayout 将 TextView 动画化为小写的主要内容,如果未能解决你的问题,请参考以下文章

Animation with MotionLayout

Animation with MotionLayout

Animation with MotionLayout

如何在 jetpack compose 中使用 MotionLayout、MotionScene、ConstraintSet?

MotionLayout的高级玩法

MotionLayout中的TextView在大小动画上闪烁