TranslationY 动画不与 TransitionManager 一起播放

Posted 2023-04-18

【中文标题】TranslationY 动画不与 TransitionManager 一起播放

【英文标题】：TranslationY animation doesn't play with TransitionManager

【发布时间】：2021-05-31 11:33:35

【问题描述】：

我对动画有疑问。我定义了两个简单的布局：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/root"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_
    android:layout_>

    <ImageView
        android:id="@+id/player1"
        android:layout_
        android:layout_
        android:layout_marginStart="32dp"
        android:layout_marginTop="16dp"
        android:src="@drawable/two_hearts"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

看起来像这样：

和

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/root"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_
    android:layout_>

    <ImageView
        android:id="@+id/player1"
        android:layout_
        android:layout_
        android:layout_marginStart="32dp"
        android:layout_marginTop="16dp"
        android:src="@drawable/two_hearts"
        android:translationY="-60dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

长相：

它们之间的区别是android:translationY="-60dp"。

我在 GameFragment.kt 中切换它们：

class GameFragment: Fragment() 

    private lateinit var root: ConstraintLayout
    private var expanded = false

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View 
        root = inflater.inflate(R.layout.fragment_game_hidden, container, false) as ConstraintLayout
        root.setOnClickListener 
            show()
        
        return root
    

    private fun show() 
        if (expanded) 
            updateConstraints(R.layout.fragment_game_hidden)
         else 
            updateConstraints(R.layout.fragment_game_shown)
        
        expanded = !expanded
    

    private fun updateConstraints(@LayoutRes id: Int) 
        val newConstraintSet = ConstraintSet()
        newConstraintSet.clone(context, id)
        val transition = ChangeBounds()
        transition.interpolator = AccelerateDecelerateInterpolator()
        transition.duration = 1000
        newConstraintSet.applyTo(root)
        TransitionManager.beginDelayedTransition(root, transition)
    

我的问题是，动画根本没有播放，布局上的卡片只是跳转到目标位置而没有任何过渡。为什么？我觉得我在这里遗漏了一些明显的东西......

【参考方案1】：

删除 android:translationY="-60dp" 中的：fragment_game_hidden.xml 。直接用margin就好了。

尝试更改以下代码：

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/root"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_
    android:layout_>

    <ImageView
        android:id="@+id/player1"
        android:layout_
        android:layout_
        android:layout_marginStart="32dp"
        android:src="@drawable/two_hearts"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toTopOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

【讨论】：

不幸的是，负边距顶部会导致图像向上移动（带有动画），但仅移动到屏幕顶部，仅此而已。不离屏。它变为 0 然后停止

hi@Jakub Lipowski ，这样动画问题就解决了，希望画面脱离屏幕。这很容易 。只需删除 app:layout_constraintTop_toTopOf="parent" 并使用 app:layout_constraintBottom_toTopOf="parent" 就可以了。我刚刚更新了我的代码，请参考。

雪莉是对的。如果您希望图像一半离开屏幕，您可以同时使用 app:layout_constraintTop_toTopOf="parent" 和 app:layout_constraintBottom_toTopOf="parent" 。这是一个关于如何使用 ConstraintLayout 的问题。如果您不熟悉 ConstraintLayout。您可以使用 LinearLayout 和负边距顶部来实现它。

使用app:layout_constraintTop_toTopOf="parent" 和app:layout_constraintBottom_toTopOf="parent" 确实将卡放置在屏幕之外的一半位置，但是如果我需要将它放置在屏幕之外的2/3 处怎么办？这很重要，因为我的应用程序的其余部分严重依赖部分隐藏的图像。我不确定这是否需要在这里详细说明，因为它不再是动画问题了

hi@Jakub Lipowski ，我认为问题解决了。现在你问了一个新问题。你最好ask一个新的。如果它对你有帮助，我的回答会很高兴。谢谢:)