标签: shared-element-transition

我正在开发的应用程序显示图像网格.点击图像时,它会进入详细信息视图.详细信息视图包含一个ViewPager,允许您在网格中的每个图像之间滑动.这是通过传递路径列表(包含网格中的每个图像)以及被点击的图像的偏移来完成的,因此可以将ViewPager设置为最初显示该页面.

在ViewPager中当前偏移页面的Fragment内部进行共享元素转换的最佳方法是什么？网格(RecyclerView)图像应扩展为当前页面中的全屏图像.我看到了推迟和恢复活动转换的能力,因此应用程序将等待显示共享元素转换,直到从磁盘加载图像.但我希望能够使其在视图寻呼机中对正确的页面进行动画处理,并在用户返回时退出到当前页面的任何内容(因为您可以在页面之间滑动).如果您现在滑动到其他页面,则初始页面会回显到网格中.

目前,我使用"image_ [index]"格式的transitionName为视图寻呼机的片段中的每个图像分配.当我启动详细信息活动时,我使用相同的transitionName,索引是偏移量.

与此相关,我也想知道如何使用长按压使涟漪起作用.当您更改视图的激活状态时,它似乎取消了波纹.我想要一种类似于Gmail的效果,其中纹波重新开始并在长按完成后快速完成并触发激活状态.

新的共享元素转换工作时,我使用的片段" 替代 ",但我似乎无法使它发挥片段" 添加 ".我在两种情况下使用相同的容器.

更多细节:

活动 - 布局 - >

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#00ffff"
    android:orientation="vertical" >

</FrameLayout>

在启动Activity时,我将Fragment1添加到屏幕上

getFragmentManager().beginTransaction().replace(R.id.container,new TransitionTestFragment1(), "TransitionTestFragment1").commit();

在Fragment1布局中的视图的单击事件 - >我将Fragment2添加到屏幕.我在第一个Fragment的onCreateView中设置了监听器

public View onCreateView(LayoutInflater inflater, ViewGroup container,
    Bundle savedInstanceState) {
final TransitionSet transitionSet = new TransitionSet();
transitionSet.addTransition(new ChangeImageTransform());
transitionSet.addTransition(new ChangeBounds());
transitionSet.addTransition(new ChangeTransform());
transitionSet.setDuration(300);

View v=inflater.inflate(R.layout.fragment1, null);
final View image=v.findViewById(R.id.image);
image.setOnClickListener(new OnClickListener() {

    @Override
    public void onClick(View v) {
        setSharedElementReturnTransition(transitionSet);
        Fragment fragment = new TransitionTestFragment2();
        fragment.setSharedElementEnterTransition(transitionSet);

        FragmentTransaction ft = getFragmentManager().beginTransaction()
                .replace(R.id.container, fragment) …

我能够使TextViews在两个活动之间完美地过渡ActivityOptions.makeSceneTransitionAnimation.但是我希望在文本转换时使文本向上扩展.我可以看到材料设计示例在联系卡过渡中放大文本"Alphonso Engelking".

我已尝试在目标TextView上设置scale属性并使用changeTransform共享元素转换,但它不会缩放,并且文本最终会在转换时被截断.

如何使用共享元素转换来缩放TextView？

我正在尝试将RecyclerView中所选项目的2个简单视图设置为新片段.我已经查看了很多将共享元素从一个Activity动画到另一个Activity的示例,但很少有动画将共享元素从一个Fragment动画到同一个Activity中的另一个Fragment的示例.它几乎可以工作.

这是我的结构.

活动

- 使用RecyclerView的全屏Fragment1

- 带有详细信息的全屏Fragment2

当用户在Fragment1中的RecyclerView中选择一个项目时,我将Fragment1替换为具有View的Fragment2,其中包含不同位置和大小的共享元素.

要使它工作有一些技巧,你必须确保你的transitionName对于列表中的每个项都是唯一的,当然,transitionName必须与Fragment2中元素的transitionName匹配才能播放动画.我有这个部分工作,当我选择一个项目时,2个共享视图会动画,而不是在2个活动之间进行动画时的预期.

如果我在屏幕底部附近选择一个项目,它会绘制View for Fragment2并为2个共享视图设置动画,就好像它们位于屏幕顶部的项目中一样.难以解释.这是一些照片

片段1

Fragment2

在这两个片段中我都设置了以下内容

        setSharedElementEnterTransition(new ChangeBounds());
        setSharedElementReturnTransition(new ChangeBounds());
        setAllowEnterTransitionOverlap(true);
        setAllowReturnTransitionOverlap(true);

同样在他们的onCreate()中的父Activity中我已经设置了

        getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);

知道为什么我的共享元素动画从我的屏幕顶部开始,即使它们是在屏幕底部的选定项目中开始的吗？

我在Lollipop的共享元素转换中看到奇怪的事情.共享元素在开始制作动画之前就会闪烁(请参阅视频https://www.youtube.com/watch?v=DCoyyC_S-9A)

我不知道为什么会这样.然而,当我添加<item name="android:windowSharedElementsUseOverlay">false</item>到我的主题时,我看不到闪烁,但过渡看起来并不好(看起来只有一半是动画"隐藏"动画的后半部分).

其他过渡设置:

<item name="android:windowActivityTransitions">true</item>
<item name="android:windowContentTransitions">true</item>
<item name="android:windowAllowEnterTransitionOverlap">true</item>
<item name="android:windowAllowReturnTransitionOverlap">true</item>
<item name="android:windowSharedElementEnterTransition">@android:transition/move</item>
<item name="android:windowSharedElementExitTransition">@android:transition/move</item>

我正在使用ActivityCompat和ActivityOptionsCompat开始活动:

ActivityOptionsCompat options = ActivityOptionsCompat.makeSceneTransitionAnimation(ActivityMain.this,
                        new Pair<View, String>(playButton, getString(R.string.translation_control_button)),
                        new Pair<View, String>(findViewById(R.id.playerImage), getString(R.string.translation_artwork)));

ActivityCompat.startActivity(this, pendingIntent, options.toBundle());

第一项活动:

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:id="@+id/main_container">

        <include layout="@layout/toolbar"/>

        <FrameLayout
            android:id="@+id/activity_main_fragment_container"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"></FrameLayout>

        <TableLayout
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="fill_parent"
            android:layout_height="45dp"
            android:padding="7dp"
            android:stretchColumns="*"
            android:id="@+id/player_toolboxTable"
            android:background="?colorPrimary">

            <TableRow
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:id="@+id/player_toolbox">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:clickable="true"
                    android:id="@+id/player_fav"
                    android:src="@drawable/rating_not_important"
                    android:onClick="playerFav"
                    android:background="@drawable/button_selector_semi_white"
                    />

                <ImageView
                    android:src="@drawable/av_pause_over_video"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:clickable="true"
                    android:id="@+id/player_play"
                    android:onClick="playerPlay"
                    android:background="@drawable/button_selector_semi_white"
                    android:transitionName="@string/translation_control_button"
                    /> …

所以,我面临的问题是我在两个活动和两个共享视图之间做的动画看起来不太好.

问题是它的"小问题",当从Activity2回到Activity1时,TextViews在动画结束时共享闪烁,从Activity2中显示"更大的文本"几分之一秒,所以它"闪烁" ".

活动1(RecyclerView有三个项目):

活动2(详情):

我在制作动画时拍摄了屏幕.从Activity2返回到Activit2时,您可以看到文本最后闪烁.这段视频(36MB,对不起大小)显示:

https://drive.google.com/file/d/0B3wIZ9CS9Kj_a0MyVFlzX1YtY0E/view?usp=sharing

问题是:我做错了什么？为什么会这样闪烁？我看到其他动画的视频,它们都非常流畅和漂亮.

我已经测试了不同类型的转换(changeBounds,explode等),但总会有一些奇怪的事情发生.任何提示,想法将不胜感激=)

我的代码

MainActivity(Activity1):

package se.snapcode.lollipoptest;

import android.app.Activity;
import android.app.ActivityOptions;
import android.content.Intent;
import android.os.Bundle;
import android.support.v4.view.GestureDetectorCompat;
import android.support.v7.widget.DefaultItemAnimator;
import android.support.v7.widget.LinearLayoutManager;
import android.util.Pair;
import android.view.GestureDetector;
import android.view.Menu;
import android.view.MenuItem;
import android.support.v7.widget.RecyclerView;
import android.view.MotionEvent;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast;


public class MainActivity extends Activity {

    private RecyclerView mRecyclerView;
    private MyAdapter mAdapter;
    private RecyclerView.LayoutManager mLayoutManager;
    GestureDetectorCompat gestureDetector;

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

        mRecyclerView = (RecyclerView) findViewById(R.id.my_recycler_view);

        // use this setting to improve …

我正在使用来自ViewPager(在调用活动中)的Activity转换以及共享元素和内容转换.重新进入调用活动时,我遇到了这个崩溃:

java.lang.NullPointerException: Attempt to invoke virtual method 'void android.os.ResultReceiver.send(int, android.os.Bundle)' on a null object reference
  at android.app.EnterTransitionCoordinator.sendSharedElementDestination(EnterTransitionCoordinator.java:199)
  at android.app.EnterTransitionCoordinator.viewsReady(EnterTransitionCoordinator.java:123)
  at android.app.EnterTransitionCoordinator$2.onPreDraw(EnterTransitionCoordinator.java:148)
  at android.view.ViewTreeObserver.dispatchOnPreDraw(ViewTreeObserver.java:895)
  at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:2153)
  at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:1180)
  at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:6558)
  at android.view.Choreographer$CallbackRecord.run(Choreographer.java:777)
  at android.view.Choreographer.doCallbacks(Choreographer.java:590)
  at android.view.Choreographer.doFrame(Choreographer.java:560)
  at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:763)
  at android.os.Handler.handleCallback(Handler.java:739)
  at android.os.Handler.dispatchMessage(Handler.java:95)
  at android.os.Looper.loop(Looper.java:145)
  at android.app.ActivityThread.main(ActivityThread.java:5832)
  at java.lang.reflect.Method.invoke(Native Method)
  at java.lang.reflect.Method.invoke(Method.java:372)
  at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1399)

此外,一旦返回,屏幕开始闪烁,白色屏幕闪烁.

这是我的过渡标志:

<item name="android:windowContentTransitions">true</item>
<item name="android:windowActivityTransitions">true</item>
<item name="android:windowAllowReturnTransitionOverlap">false</item>

我尝试在Calling和Called活动中设置Enter/Exit转换,但没有运气.

我试图将一个ImageView动画设置为Android API级别21中两个活动之间的另一个位置.由于Android L预览中的"MoveImage"已被删除,我使用" ChangeImageTransform "代替,但文档中的示例代码无法解决(这两个图像分别动画).

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
    <changeImageTransform>
        <targets>
            <target android:targetId="@id/ivA" />
            <target android:targetId="@id/ivB" />
        </targets>
    </changeImageTransform>
</transitionSet>

有没有工作的例子？谢谢!

在Android Lollipop中,Activity#postponeEnterTransition()和Activity#startPostponedEnterTransition()方法使Activity能够延迟开始进入和退出共享元素转换,直到加载所有数据.这些非常适合Activity过渡.

有没有办法在使用Fragment过渡时达到相同的效果？

我把一个非常简单的应用程序放在一起,在使用Dialog主题(github上的源代码)启动活动时使用共享元素转换.

我得到了以下结果:

如您所见,转换/动画有2个问题:

1. 动画仅在对话框活动区域中可见,因此它会剪辑并看起来很难看.
2. 当我在活动之外点击以返回时,没有过渡/动画.

我该如何解决这些问题？任何帮助,将不胜感激.

编辑:在Quanturium的回答之后,我做了以下事情来使它工作:

使用以下主题而不是Dialog主题:

<style name="AppTheme.Transparent" parent="AppTheme">
    <item name="android:windowIsTranslucent">true</item>
    <item name="android:windowBackground">@android:color/transparent</item>
    <item name="android:windowContentOverlay">@null</item>
    <item name="android:windowNoTitle">true</item>
    <item name="android:backgroundDimEnabled">true</item>
</style>

使用CardView作为Dialog外观和圆角和阴影的背景.

调用finishAfterTransition(); 当用户点击CardView外部时.

现在它看起来像这个(代码),CardView需要精炼以更好地匹配Dialog,但它至少工作: