android - 作为场景更改动画/过渡的一部分，我如何为高程变化设置动画？

Question

在我的Android应用中，我需要实现一个场景转换，其中涉及其中一个元素的高度（z-index）的变化。如您在左侧开始场景中的下图所示，狗的图像下方显示了蓝色弧形。在右侧显示的最后一个过渡中，狗的图像显示在蓝色弧线下方。我的愿望是先使图像的changeBounds过渡开始，然后稍后再进行弧的changeBounds过渡。在过渡的大约一半时，图像的底部应位于圆弧上方。在这个中间点，我希望图像的高程/ z索引发生变化，以便将狗图像显示在蓝色弧线的下方。


目前，我的应用程序主题已配置为使用以下TransitionSet进行此场景更改。

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android"
    android:transitionOrdering="together"
    android:duration="2000">

    <changeBounds
        android:startDelay="0"
        android:duration="1000"
        android:resizeClip="false"
        >
        <targets>
            <target android:targetId="@id/charlie"/>
        </targets>
    </changeBounds>

    <transition class="com.motb.transitiontest.ElevationTransition">
        android:startDelay="0"
        android:duration="1000"
        <targets>
            <target android:targetId="@id/charlie"/>
            <target android:targetId="@id/arc1"/>
        </targets>
    </transition>


    <changeBounds
        android:startDelay="300"
        android:duration="1000"
        >
        <targets>
            <target android:targetId="@id/arc1"/>
            <target android:targetId="@id/helloText" />
        </targets>
    </changeBounds>

</transitionSet>

我正在尝试使用以下所示的自定义“ ElevationTransition”来更改高程：

public class ElevationTransition extends Transition {

public static final String TAG = "ElevationTransition" ;

public ElevationTransition(Context context, AttributeSet attributes ) {
    super( context, attributes );
}

private static final String PROPNAME_TRANS_Z = "com.motb:transition:transz";
@Override
public void captureStartValues(TransitionValues transitionValues) {
    float translationZ = transitionValues.view.getTranslationZ() ;
    transitionValues.values.put(PROPNAME_TRANS_Z + "_start" , translationZ );
}

@Override
public void captureEndValues(TransitionValues transitionValues) {
    float translationZ = transitionValues.view.getTranslationZ() ;
    transitionValues.values.put(PROPNAME_TRANS_Z + "_end", translationZ );
}
@Override
public Animator createAnimator(ViewGroup sceneRoot, TransitionValues startValues,
                               TransitionValues endValues) {
    if (startValues == null || endValues == null) {
        return null;
    }
    final View view = endValues.view;
    float startElevation = (Float) startValues.values.get(PROPNAME_TRANS_Z + "_start");
    float endElevation = (Float) endValues.values.get(PROPNAME_TRANS_Z + "_end" );
    if (startElevation != endElevation) {
        view.setTranslationZ(startElevation);
        return ObjectAnimator.ofFloat(view, View.TRANSLATION_Z,
                startElevation, endElevation);
    }
    return null;
}

}

主要活动仅使用以下布局显示空白地图：

<RelativeLayout 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"
tools:context="com.motb.transitiontest.MainActivity"
android:id="@+id/main"
android:onClick="onClick"
android:background="@drawable/treasuremap"
>

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="250dp"
    android:id="@+id/fragmentContainer"
    android:layout_alignParentBottom="true"
    />


</RelativeLayout>

单击地图可将上面的FrameLayout替换为一个片段，该片段显示使用以下布局的底部“卡片”：

<RelativeLayout 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="250dp"
tools:context="com.motb.transitiontest.MainActivity"
android:id="@+id/main"
android:background="@android:color/transparent"
>


<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="160dp"
    android:background="@drawable/arc_bg"
    android:backgroundTint="#ff0000ff"
    android:layout_alignParentBottom="true"
    android:transitionName="rv1"
    android:id="@+id/arc1"
    android:translationZ="20dp"

    >

    <TextView
        android:id="@+id/helloText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World Transition Test"
        android:layout_marginStart="165dp"
        android:layout_marginTop="27dp"
        android:textSize="40dp"
        android:gravity="left"
        android:transitionName="tv1"
        android:textColor="#ffffffff"
        />


</RelativeLayout>

<ImageView
    android:layout_width="300px"
    android:layout_height="300px"
    android:layout_alignParentTop="true"
    android:layout_marginTop="80dp"
    android:layout_marginStart="20dp"
    android:transitionName="iv1"
    android:src="@drawable/charlie"
    android:id="@+id/charlie"
    android:translationZ="30dp"
    android:stateListAnimator="@null"
    />


</RelativeLayout>

单击该片段，使用下面的xml从狗的较大图片开始第二个活动：

`
<RelativeLayout 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"
tools:context="com.motb.transitiontest.Activity2"
android:theme="@android:style/Theme.Translucent.NoTitleBar"
>


  <RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.motb.transitiontest.Activity2"
    android:layout_marginTop="200dp"
    android:background="@drawable/arc_bg"
    android:layout_alignParentBottom="true"
    android:transitionName="rv1"
    android:id="@+id/arc1"
    android:backgroundTint="#ff0000ff"
    android:translationZ="40dp"
    >


    <TextView
        android:id="@+id/helloText"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:layout_marginLeft="50dp"
        android:layout_marginRight="50dp"
        android:text="Hello World Transition Test"
        android:textSize="40dp"
        android:textAlignment="center"
        android:transitionName="tv1"
        android:textColor="#ffffffff"
        />


</RelativeLayout>


<ImageView
    android:id="@+id/charlie"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:src="@drawable/charlie"
    android:transitionName="iv1"
    android:scaleType="centerCrop"
    android:translationZ="0dp"
    android:stateListAnimator="@null"
    />



</RelativeLayout>`

目前，我看到的是，高度在过渡开始时立即发生变化，导致狗的图像被弧线遮挡。

Answer 1

我检查了github。这是一个错误。

我可以使用Transtions和TransitionManager.go（）分类运行场景之间的过渡。但是，当您在片段和活动之间运行过渡时，它总是立即更改淡入淡出动画。支持26.0.0 beta-1中修复了一些淡入淡出错误


当淡入淡出过渡被中断和反转时，视图将从头开始动画。 （修复了从Android Framework移植的问题。）
Transition.Fade忽略View的初始Alpha（AOSP问题221820）


但是，问问自己，您是否全心全意地看到它进行了实际的淡入淡出过渡？ -否。就像忽略所有移动一样，您是否可以完全消除它？因为这就是我的全部建议，而我无法按照您的要求运行。但是，显然所有元素的移动都有效，因此这是该死的错误。



您也可以完全伪造它。如果出现淡入淡出，则可以调用它并使它起作用。如果将Activity2中的onCreate（）更改为以下内容，则将获得正确的动画：

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);

    setContentView(R.layout.activity2);
    findViewById(R.id.arc1).setVisibility(View.VISIBLE);
    findViewById(R.id.arc2).setAlpha(0);
    findViewById(R.id.arc2).animate().alpha(1).setDuration(2000).start();
}

我只将arc1的可见性设置为正确的可见性，因为您输入的是错误的。那是总是可见的。

我认为，然后在与其他动画相同的时间段内添加动画以使其逐步播放并蓬勃发展。有用。这是一个愚蠢的错误。完全没有充分的理由，您无法在活动之间逐渐消失。



我自己发现了阿尔法。第一个可能是正在发生的事情。或者它可能完全是另一类错误。但是，我可以向您保证。我检查并正确执行了所有操作。而且它仍然失败。显然，解决方法是在他们工作的地方使用场景过渡。也许根本不使用新的活动。

您显然可以提出许多解决方法。只需使用本应具有的布局启动活动，然后设置场景即可过渡到正确的布局。在第一个活动中，自己向布局添加另一个过渡。还是什么。但是，它不起作用。您执行了从片段到活动的过渡，并且东西会移动，但是淡入淡出总是会产生混乱并拒绝。它立即呈现了另一个视图的可见性，并且两个视图都不起作用，也无法轻松地对其进行纠正。

我可以正常工作的原始代码正在使用场景：

boolean to = true;
public void onClick(View view) {
    Scene scene;
    ViewGroup mSceneRoot = (ViewGroup) findViewById(R.id.container);
    if (to) {
        Transition mFadeTransition =
                TransitionInflater.from(this).
                        inflateTransition(R.transition.transitionset);
        scene = Scene.getSceneForLayout(mSceneRoot, R.layout.fragment_replacement, this);

        TransitionManager.go(scene, mFadeTransition);
    }
    else {
        Transition mFadeTransition =
                TransitionInflater.from(this).
                        inflateTransition(R.transition.backwardstransitionset);
        scene = Scene.getSceneForLayout(mSceneRoot, R.layout.fragment_rep, this);
        TransitionManager.go(scene, mFadeTransition);
    }
    to = !to;
}

当我发现这是他的错，因为他无法实施我关于如何进行过渡的非常出色的想法时，留下了一些旧的答案。错误是他没有该死的褪色效果，而这始终是问题所在。



您不能仅使用Z顺序对其进行动画处理。更改顺序后，它们会相互叠加，而不是相反。要执行您所建议的操作，实际上是同时拥有两个订单，并以透明的方式使其过渡动画。

您绘制，弧，狗，另一个弧。那么Z阶的变化实际上就是在顶部绘制的弧的透明度。如果它完全不透明，则弧在狗的顶部。如果它是完全透明的，那么狗就在弧上。但是，如果最上面的弧是部分透明的，则看起来就像是狗在通过弧融化，或者弧在狗中融化，这取决于我们如何调整透明度。您可以在其他地方使用相同的技巧。只是把东西放在两个地方。如果它是不透明的，则将其覆盖，但是如果它是透明的，则仅显示最低的弧，如果部分透明，则将弧与对象之间的弧混合。在动画结束时，只需按正确的顺序放置它们即可。

因此，在动画期间，始终将2条弧线移动到相同位置。您应该将它们视为相同的弧线。并更改顶部的Arc的不透明度，并执行与该狗有关的任何操作。



视频：

https://youtu.be/zVs3qzPU2FM



创建布局。将要更改高度的位夹在另一个对象的两个副本之间。在布局之一中，将可见性设置为 invisible。因此，所有项目在两种布局中的排列顺序相同。但是，其中一个元素的第二个副本是不可见的。确保两个副本在两个副本中的位置相同。更改一个副本的边界时，请确保还更改了另一个副本的边界。将它们作为一个整体移动。切换视图时，在移动项目时淡出该​​项目或不进行其他操作。由于有第二个副本，它看起来不会像是淡出，而是看起来像是融化。