时间戳

首页 > 解决方案 > 当ImageView在android中扩展到屏幕尺寸时如何为ImageView提供流畅的动画

android - 当ImageView在android中扩展到屏幕尺寸时如何为ImageView提供流畅的动画

问题描述

我正在创建一个聊天应用程序，当图像到达聊天室时，它看起来像这样。

在此处输入图像描述

现在我想实现类似WhatsApp的效果。我认为在 WhatsApp 上，当您单击图像时，它会以流畅的动画扩展到整个屏幕。我可以在图像上添加单击侦听器，但我不知道如何通过流畅的动画来实现该效果。

标签： android

解决方案

您可以使用SharedElementTransition轻松实现此效果。简而言之，您创建一个仅显示图像的新活动，并告诉框架来自第一个活动/片段的哪个视图对应于新活动中的图像，其余的会自动完成。

在新的活动布局中，为 ImageView 添加一个过渡名称。您必须手动加载此活动中的图像，因此如果您从网络加载，则必须将 URL 传递给活动，或者以其他方式传递位图。

<ImageView
    android:id="@+id/image"
    android:layout_width="match_parent"
    android:layout_height="match_parent"

    android:transitionName="image"/>

单击图像时，您启动活动并指定单击的 ImageView 并将其映射到 transitionName：

 // If you're in a fragment
val activity = requireActivity()

// imageView here corresponds to the image before it is animated
// "image" is transitionName in the new activity
val options = ActivityOptionsCompat.makeSceneTransitionAnimation(activity, imageView, "image")
activity.startActivity(Intent(context, ImageActivity::class.java), options.toBundle())

此外，用于活动的样式必须设置android:windowContentTransitions为 true：

<style name="...">
    <item name="android:windowContentTransitions">true</item>
</style>

推荐阅读