标签: shared-element-transition

我刚开始使用appcompat支持库重建我的Android 5.0应用程序.我刚刚完成了一个以共享元素为特色的过渡.它似乎运作良好,直到我添加一个webview.

我制作了一个视频来演示故障. https://www.youtube.com/watch?v=MuuGZc0Vwow

正如你所看到的,当我打开活动时一切都很好.当我关闭它时,会发生故障.正如你所看到的,除了webview之外,所有元素都应该像它们应该的那样淡出.在动画结束之前,它就会挂在那里,有点破坏了动画的整体流畅度.

我该如何解决？如果它与我设置的方式有关,我很乐意分享一些代码.

提前致谢.

我正在尝试使用 Android 中的 SharedElements 和 Content Transitions。我试图结合 Content Transitions 和 Shared Elements 并创建一个特定的动画，但是我遇到了一个问题。在共享元素 (ImageView) 上的过渡结束后，我使用内容过渡将文本视图动画化到使用幻灯片过渡的位置。然而，当 textViews 从底部滑动到它们在图像视图顶部的位置时，文本会在 ImageView（共享元素）下方，然后才出现在 ImageView 的顶部。有没有办法做到这一点？

我在这里分享一个简短的代码，其中包含一些解释这一点的屏幕截图：

Activity_A.java

package com.example.mehulp.sharedelementsviewheirarchy;

import android.app.Activity;
import android.app.ActivityOptions;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;


public class Activity_a extends Activity {
ImageView imageView_a;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_activity_a);

    imageView_a = (ImageView) findViewById(R.id.imgView_a);
    imageView_a.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            imageClickListener();
        }
    });
}

private void imageClickListener() {
    Intent intent = new Intent(Activity_a.this, Activity_b.class);
    startActivity(intent, …

我有 2 个活动，共享元素转换工作正常。ChangeBounds是唯一应用的过渡。

我想在共享元素移动时应用淡入淡出过渡，因此排序是 ORDERING_TOGETHER。

public class TransitionUtils {

    public static Transition makeSharedElementEnterTransition(final Context context, final long duration) {
        TransitionSet set = new TransitionSet();
        set.setOrdering(TransitionSet.ORDERING_TOGETHER);
        set.setDuration(duration);

        Transition changeBounds = new ChangeBounds();
        changeBounds.addTarget(context.getString(R.string.transition_name_search_text));
        set.addTransition(changeBounds);

        Transition fade = new Fade(Fade.OUT);
        fade.addTarget(context.getString(R.string.transition_name_search_text));
        set.addTransition(fade);

        return set;
    }

}

该startActivity调用ActivityOptions.makeSceneTransitionAnimation

在 EndActivity 中，设置了输入共享元素过渡

public class EndActivity extends Activity{
    @Override
    protected void onCreate(final Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.blabla);
        getWindow().setSharedElementEnterTransition(TransitionUtils.makeSharedElementEnterTransition(this,2000));
    }
}

笔记：我注意到

• Fade() 通常应用于 getWindow().setEnterTransition()
• 将持续时间设置为 TransitionSet 适用于除 Fade 之外的所有 Transistions。 …

我正在尝试执行从片段 A 中的 RecyclerView 项目到片段 B 的共享元素转换。转换名称设置在两个布局中最外层的 CardView 上。我的实现与本示例中的实现基本相同。

一切正常，直到我在片段 B 中添加了一个 ViewPager2。

我尝试按照此答案中的步骤进行操作，但没有运气。

堆栈跟踪：

java.lang.IndexOutOfBoundsException: Index: 5, Size: 5
        at java.util.ArrayList.get(ArrayList.java:437)
        at androidx.fragment.app.FragmentTransitionImpl.setNameOverridesReordered(FragmentTransitionImpl.java:182)
        at androidx.fragment.app.DefaultSpecialEffectsController.startTransitions(DefaultSpecialEffectsController.java:665)
        at androidx.fragment.app.DefaultSpecialEffectsController.executeOperations(DefaultSpecialEffectsController.java:114)
        at androidx.fragment.app.SpecialEffectsController.executePendingOperations(SpecialEffectsController.java:294)
        at androidx.fragment.app.Fragment$3.run(Fragment.java:2776)
        at android.os.Handler.handleCallback(Handler.java:938)
        at android.os.Handler.dispatchMessage(Handler.java:99)
        at android.os.Looper.loop(Looper.java:223)
        at android.app.ActivityThread.main(ActivityThread.java:7656)
        at java.lang.reflect.Method.invoke(Native Method)
        at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:592)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:947)

编辑：显示我的依赖项以回应建议片段版本需要更新的答案：

ext.kotlin_version = "1.5.10"
ext.navigation_version="2.4.0-alpha02"

implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
implementation 'androidx.core:core-ktx:1.5.0'
implementation 'androidx.appcompat:appcompat:1.3.0'
implementation 'com.google.android.material:material:1.3.0'
implementation 'androidx.constraintlayout:constraintlayout:2.0.4'

implementation 'androidx.preference:preference-ktx:1.1.1'
implementation 'androidx.lifecycle:lifecycle-livedata-ktx:2.3.1'
implementation 'androidx.lifecycle:lifecycle-viewmodel-ktx:2.3.1'
implementation 'androidx.legacy:legacy-support-v4:1.0.0'

coreLibraryDesugaring 'com.android.tools:desugar_jdk_libs:1.1.5'
implementation 'org.jetbrains.kotlinx:kotlinx-coroutines-android:1.4.3'
implementation …

我尝试在我的应用程序中添加自定义共享元素转换，并使其在不同活动中的某些不同模式下工作。但在我的测试中，仅执行被调用活动的进入转换。

这是我在调用活动 A 中的代码：

    TransitionSet set = new TransitionSet();
    set.setOrdering(TransitionSet.ORDERING_TOGETHER);
    set.addTransition(new ChangeBounds());
    PortalHeaderBackgroundTransition back = new PortalHeaderBackgroundTransition();
    back.setMode(0);
    set.addTransition(back);
    getWindow().setSharedElementEnterTransition(set);

    set = new TransitionSet();
    set.setOrdering(TransitionSet.ORDERING_TOGETHER);
    set.addTransition(new ChangeBounds());
    back = new PortalHeaderBackgroundTransition();
    back.setMode(1);
    set.addTransition(back);
    getWindow().setSharedElementExitTransition(set);

这是我在被调用的活动 B 中的代码：

    TransitionSet set = new TransitionSet();
    set.setOrdering(TransitionSet.ORDERING_TOGETHER);
    set.addTransition(new ChangeBounds());
    PortalHeaderBackgroundTransition back = new PortalHeaderBackgroundTransition();
    back.setMode(2);
    set.addTransition(back);
    getWindow().setSharedElementEnterTransition(set);

    set = new TransitionSet();
    set.setOrdering(TransitionSet.ORDERING_TOGETHER);
    set.addTransition(new ChangeBounds());
    back = new PortalHeaderBackgroundTransition();
    back.setMode(3);
    set.addTransition(back);
    getWindow().setSharedElementExitTransition(set);

我在 PortalHeaderBackgroundTransition 中添加断点，每当 A 调用 B 或 B 返回 A 时，仅执行模式 2 转换。 …

我有一个带有图像的RecyclerView,当我按下图像时,应用程序会打开另一个包含ViewPager的活动,该活动具有相同的图像但位于我选择的图像的位置.

我已经在Lollipop中完成了转换,在活动之间使用supportPostponeEnterTransition和supportStartPostponedEnterTransition在被调用的活动中共享此图像,等待viewPager加载图像以开始转换.

当我进入被调用的活动时,当我按下时,转换是正常的.

我面临的问题是,如果我移动到被调用活动的ViewPager中的另一个图像,当我按下它时动画显示它在开始时选择的图像,而不是当前选择的图像.

我已经能够将动画图像更改为在被调用活动中选择的图像:

@Override
public void onBackPressed() {
  View view = ((ImageDetailFragment) adapter.getFragment(viewPager,
      viewPager.getCurrentItem())).getTransitionView();

  ViewCompat.setTransitionName(view, Constants.TRANSITION_IMAGE);
  super.onBackPressed();
}

但它返回到调用活动列表中原始图像的相同位置.

如何使图像返回其在调用活动列表中的位置？

我正在尝试使用回收器视图中的元素进行共享元素转换.当用户单击我的回收器视图项内的textview时,将打开详细信息活动.在详细内容活动中,我显示了一些信息,我还有一个标签布局,使用毕加索从网址加载一些图像.转换为详细活动正在运行,但如果用户在加载所有图像之前返回主活动,则主活动中的回收器视图在反向动画后消失!当我禁用共享元素转换时,问题就消失了.

这两个活动都与片段有关.所以,我正在尝试在两个片段之间创建一个过渡,这两个片段处于不同的活动中.

在RecyclerViewAdapter中,我设置了转换名称:

public void onBindViewHolder(final ViewHolder viewHolder, int position) {
  ... 
 viewHolder.profileImage.setTransitionName("profile"+position);

我的textview的onClickListener(在Main Activity中的一个片段内):

Intent i = new Intent(getCurrentActivity(), DetailActivity.class);
        ActivityOptionsCompat options = ActivityOptionsCompat.
               makeSceneTransitionAnimation(getCurrentActivity(), (View) profileImage, "profile"+position);
        getCurrentActivity().startActivity(i, options.toBundle());

在具有共享元素的详细活动的片段内(在onCreateView中):

profileImage.setTransitionName("profile"+position);

当意图发生时,我已经检查了两个活动中的转换名称.

我陷入了这个问题两天,看不到发生了什么.如果您需要更多关于它的信息或代码,请询问.

谢谢!

我有一个RecyclerView在一个Viewpager片段内和从一个项目中共享元素RecyclerView的DetailActivity含有片段.我正在DetailActivity为片段的进入和退出设置转换.

public static void sharedTransitionReceiver(Activity activity, Fragment fragment) {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        activity.getWindow().getEnterTransition().setDuration(500);
        Slide slideTransition = new Slide(Gravity.START);
        slideTransition.setDuration(500);
        fragment.setReenterTransition(slideTransition);
        fragment.setExitTransition(slideTransition);
        fragment.setSharedElementEnterTransition(new ChangeBounds());
    }
}

它运行得很好但是当我导航回包含Viewpager退出的上一个活动时,动画不起作用,并且项目不会动画回原始位置.

我正在学习如何使用 react native 制作漂亮的动画，并且在使用 react-native-fluid-transitions 库时遇到了问题。

当我将共享元素与图像一起使用时，它们在过渡期间闪烁并且仅在过渡结束时出现，有人遇到过同样的问题吗？我没有找到有同样问题的人：/

这是它的样子：

它应该是这样的：

左边的纸完美地变形，但鞋子闪烁。

这是代码（不是我的，但完全相同，即使这个也不起作用）：https : //snack.expo.io/@chrfalch/shoe-shop

它来自本指南：https : //medium.com/@christian.falch/react-native-animation-challenge-1-7022e48a226

谢谢你的帮助

我在项目中使用导航组件。尝试设置来自回收器的共享元素转换。在第二个片段中输入过渡效果很好，但是当我返回到第一个片段时 - 没有返回过渡。

我尝试在第一个片段中显式设置输入和返回转换，就像我在第二个片段中所做的那样

val transition = TransitionInflater.from(context).inflateTransition(android.R.transition.move)

sharedElementEnterTransition = transition

sharedElementReturnTransition = transition

但这没有帮助。

还尝试删除进入和退出片段动画。对于第二个片段，输入过渡适用于动画，但谁知道呢。

还尝试使用此问题的解决方案，但就我而言，它不起作用。 /sf/answers/3704598481/

主片段

stickyAdapter.onItemClick = { event, imageView, textView ->
            val args = bundleOf(EventDetailFragment.EVENT to event)
            val extras = FragmentNavigatorExtras(
                imageView to imageView.transitionName,
                textView to textView.transitionName
            )
            findNavController().navigate(R.id.action_global_eventDetailFragment, args, null, extras)
        }

在适配器 onClick 中，我为视图设置了唯一的转换名称： mainFragmentAdapter

eventImageView.setOnClickListener {
            titleTextView.transitionName = "${event.title}$TRANSITION_TITLE"
            eventImageView.transitionName = "${event.title}$TRANSITION_IMAGE" 
            onItemClick?.invoke(event, eventImageView, titleTextView) 
        }

在detailsFragment中，我从参数中获取转换名称（复制粘贴它们以确保没有错误，并且对于输入转换它有效）我在OnCreate方法中调用推迟EnterTransition（）等待，直到我可以在onViewCreated中设置转换名称，sharedElementEnterTransition和sharedElementReturnTransition，然后调用startPostponedEnterTransition()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        postponeEnterTransition()
    }

override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?, …