标签: shared-element-transition

我正在尝试实现共享元素转换,当ImageViews一个屏幕上的2 转到下一个屏幕时.其中一个图像centerCrop在两个屏幕上都有scaleType .我面临的问题是,当转换开始时,图像将在其动画到下一个屏幕之前进入原始大小(裁剪之前).当它到达下一个屏幕时,它以原始大小到达它,然后它被裁剪到目标图像视图.

整个体验并不顺畅,真正让人眼前一亮.我使用的代码是:

public void animateIntent(View view, ArticleCoverData articleCoverData) {
    Intent intent = new Intent(mActivity, ReaderActivity.class);
    intent.putExtra(Constants.ARTICLE_DATA, articleCoverData);

    // The view animation will start from
    View coverStartView = view.findViewById(R.id.coverImage);
    View coverDiagonalDecoratorStartView = view.findViewById(R.id.diagonal_image_decorator);

    Pair<View, String> pair1 = Pair.create(coverStartView, mActivity.getString(R.string.transition_timeline_cover_image_to_reader_name));
    Pair<View, String> pair2 = Pair.create(coverDiagonalDecoratorStartView, mActivity.getString(R.string.transition_timeline_cover_image_diagonal_decorator_to_reader_name));

    ActivityOptionsCompat options = ActivityOptionsCompat.makeSceneTransitionAnimation(mActivity, pair1, pair2);
    ActivityCompat.startActivity(mActivity, intent, options.toBundle());
}

使用Glide以下代码从Web加载图像:

Glide.with(mActivity).load(articleCoverData.mImageUrl).skipMemoryCache(true).diskCacheStrategy(DiskCacheStrategy.SOURCE).dontTransform().into(holder.coverImage);

在接收方,图像加载如下:

Glide.with(mContext).load(mData.mImageUrl).skipMemoryCache(true).diskCacheStrategy(DiskCacheStrategy.SOURCE).into(mCoverImageView);

在我定义的样式中:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Add this line -->
    <item name="android:windowContentTransitions">true</item>

    <!-- This is …

我已经在这个问题上工作了好几个星期,我仍然无法解决这个问题.

所以,我有一个包含带有ImageView的LinearLayout的CardView.

没有该半径,Shared Element Transition可以无缝地工作.但是,当我将半径(app:cardCornerRadius ="25dp")添加到该CardView时,共享元素转换看起来很难看,因为它首先删除半径然后开始动画.

第一种方法:ObjectAnimator

我创建了ObjectAnimator来为卡上的半径值设置动画,并在动画结束后开始转换.

ObjectAnimator animator = ObjectAnimator
            .ofFloat(view, "radius", AppUtil.dpAsPixel(this, 25), 0);
animator.setDuration(150);
animator.addListener( // start new Activity with Transition );
animator.start();

这有效,但看起来不太好,因为转换在开始转换之前等待动画完成.我需要的是半径是在转换到新Activity时的动画(类似于TransitionSet中的ORDERING_TOGETHER).

第二种方法 - ChangeImageTransform

我已经阅读了StackOverflow帖子来使用Transformation Class,如ChangeImageTransform和ChangeBounds.

我确实定义了我建议的应用程序主题(my_transition包含ChangeImageTransform transitionSet)

<item name="android:windowSharedElementEnterTransition">@transition/my_transition</item>
<item name="android:windowSharedElementExitTransition">@transition/my_transition</item>

但它不起作用..

第三种方法 - 天真

我的最后一次尝试是强制目标ImageView的半径也是25dp.因为目标ImageView可能是方形的,因此可能我的CardView被转换为方形,但正如您所猜测的那样,它不起作用.

第四种方法 - 不使用CardView

如您所见,我正在使用Penguin图像并使用CardView来制作半径.我可以使用图像转换使图像四舍五入,但我仍然认为这不是创建共享元素转换的正确方法.

这是我的问题,有没有办法使CardView半径的共享元素转换工作而不首先删除半径？

我一直在搞乱Android 5.0中的新API,并且一直试图弄清楚是否有可能ViewGroup在活动转换期间将a 和它的一个子项分别作为共享元素动画化.

下面的屏幕截图给出了我想要实现的简化示例:

在第一个活动中,深灰色框是ViewGroup屏幕中心,红色框是其子框View(我在这里可以找到我使用的布局XML代码).当用户点击深灰色框时,深灰色框应逐渐向上扩展以填充第二个活动的背景.同时,红色框应逐渐缩放并重新定位在第二个活动的左上角.

活动和动画代码

Activity我用来执行转换的代码很简单:

/** FirstActivity.java */
public class FirstActivity extends Activity implements View.OnClickListener {
    private View mOuterBox, mInnerBox;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        getWindow().requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS);
        getWindow().setSharedElementExitTransition(new ChangeBounds());
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_first);
        mOuterBox = findViewById(R.id.outer_box);
        mInnerBox = findViewById(R.id.inner_box);
        mOuterBox.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        Pair<View, String> outerBox = Pair.create(mOuterBox, mOuterBox.getTransitionName());
        Pair<View, String> innerBox = Pair.create(mInnerBox, mInnerBox.getTransitionName());
        Bundle bundle = ActivityOptions.makeSceneTransitionAnimation(this, outerBox, innerBox).toBundle();
        startActivity(new Intent(this, …

对于共享元素转换,我遵循这个 github项目.它有2个屏幕 - 一个带有recyclerview,有多个卡片,第二个是细节屏幕.正如预期的那样,它展示了imageview&textview从recyclerview项目到详细屏幕和背面反向过渡的共享元素转换.

但是,如果用户在详细信息屏幕上更改方向,然后按下后退按钮,则反向过渡动画不起作用.看着这个 2:49之间的视频的帧2:57,似乎连方向更改后成为可能.有什么想法吗？

编辑:

请查看此视频以便更好地理解.

我对List<View> sharedElementSnapshots传递给SharedElementCallback's onSharedElementStart()和onSharedElementEnd()方法的论点感到困惑.据推测,这些快照视图旨在用作共享元素转换期间的临时占位符.例如,假设活动A显示缩略图图像,活动B显示同一图像的高分辨率版本,需要几秒钟才能加载并显示.快照视图可以暂时用于替代,而不必等待高分辨率图像完成加载.

我很困惑的部分是如何首先使用快照视图.它们应该被添加到活动的视图层次结构中吗？或者也许它们应该被添加到窗口装饰视图中ViewOverlay？无论哪种方式,我看不出它如何可能在这一点上切换过渡共享元素的观点...... onMapSharedElements()被调用之前onSharedElementStart()和onSharedElementEnd(),这意味着过渡名字的共享元素最终映射View旨意已经建立.

任何提示将不胜感激.

有没有办法以编程方式使用自定义插值器进行共享元素转换？请指出我正确的方向,在哪里阅读这个或一些例子.

最近我遇到了一个奇怪的问题.我有两个活动.第一个包含带缩略图的网格.一种画廊.第二个包含一个带有片段的视图寻呼机,其行为类似于图像查看器,您可以在图像之间滑动.我使用共享元素转换来启动第二个活动.就像谷歌照片应用程序.在第二个活动中,我可以向上或向下滑动以通过背景的淡出过渡来消除活动.我让我的第二个活动完全透明:

<item name="android:windowBackground">@color/palette_transparent</item>
<item name="android:colorBackgroundCacheHint">@null</item>
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowAnimationStyle">@android:style/Animation</item>

但问题是当我将图像滑动到顶部/底部并且第二个活动的背景消失时,我可以看到白色背景而不是第一个活动.如果我开始没有共享元素转换的第二个活动,一切都很好.

我做了一项研究,发现这个白色层可能覆盖了第一个活动.它不是第二个活动的一部分,正如我在Stetho视图层次结构中看到的那样.

可能我的解释不是很好,我的英语也不是很好,所以这里有几个视频也澄清了我的问题.

视频无转换和视频转换

在我的应用程序中,我将工具栏和状态栏设置为共享对象, 如本文第2项中的建议所示

工具栏和选项卡的一般行为和轮廓非常出色 - 唯一的问题是,当我转到活动B时,工具栏的某些UI元素不参与内容转换,尤其是工具栏标题和菜单图标.

我尝试添加一个SharedElementCallback并在其中循环工具栏和选项卡的子项并将它们全部添加到Fade转换 - 但它不会影响工具栏和选项卡内容的行为.

不知道怎么从这里开始？期望的效果是使工具栏的元素(标题,向上按钮,菜单图标)参与内容转换.

评论后添加了截图:

活动A.

活动B.

我想知道是否可以更改共享元素转换的z顺序？看:

我有一个图像布局,填满整个屏幕.图像前面是一个文本框,显示图像的标题.如果我点击文本框,则会开始转换到详细信息活动.因此,我实现了一个共享元素转换,其中全屏图像在详细视图中设置为较小版本的自身.下图说明了这种行为.

我现在的问题是,在两个活动中都是文本框,它们位于共享元素图像之上.如果我从概述到详细活动,我会在共享元素转换完成后看到带有数字的圆圈文本框.我想将带有数字的文本框放在共享元素转换之上,这样我也可以在这个视图元素上做一个动画.

关于如何解决这个问题的任何想法？

这里我们去:两个具有共享元素转换的活动(Button).第二个Activity有TextInputLayout一个提示:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:app="http://schemas.android.com/apk/res-auto"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:focusable="true"
              android:focusableInTouchMode="true"
              android:gravity="center_horizontal"
              android:orientation="vertical">

    <Button android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:text="GO"
            android:transitionName="test"/>

    <android.support.design.widget.TextInputLayout android:layout_width="match_parent"
                                                   android:layout_height="wrap_content"
                                                   android:hint="WTF?!">
        <android.support.design.widget.TextInputEditText android:layout_width="match_parent"
                                                         android:layout_height="wrap_content"/>
    </android.support.design.widget.TextInputLayout>
</LinearLayout>   

第二个的输入转换Activity被延迟以澄清问题:TextInputLayout忽略转换动画的提示并在转换开始后立即显示.在动画结束时,您可以在提示下方看到正确设置动画的EditText背景(水平线).这是一个错误还是我错过了什么？这是第二个Activity:

public class SecondActivity extends AppCompatActivity {

    public static void launch(Activity activity, View sharedElement) {
        Intent intent = new Intent(activity, SecondActivity.class);

        ActivityOptionsCompat options = ActivityOptionsCompat.
                makeSceneTransitionAnimation(activity, sharedElement, "test");
        activity.startActivity(intent, options.toBundle());
    }

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

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            getWindow().setEnterTransition(new Slide().setDuration(5000)); …