android - 如何使用 Whatsapp 等动画放大图像
问题描述
我想要像 WhatsApp 动画这样的打开图像。就我而言,我有图像列表。当我点击列表中的特定图像时,我想要放大带有动画的图像,例如 Whatsapp 在该聊天列表中打开 profilePhoto
我使用警报对话框打开放大图像。并添加动画。但我无法像whatsapp那样控制效果。
最终的 AlertDialog.Builder 构建器;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
builder = new AlertDialog.Builder(Objects.requireNonNull(context), android.R.style.Theme_Material_Light_Dialog_NoActionBar);
} else {
builder = new AlertDialog.Builder(Objects.requireNonNull(context));
}
LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
final View dialogLayout = inflater.inflate(R.layout.profile_layout, null);
ImageView ivProfile = dialogLayout.findViewById(R.id.ivProfileImage);
ivProfile.getLayoutParams().height = (int) (width / 1.2);
ivProfile.getLayoutParams().width = (int) (width / 1.2);
Glide.with(context).load(url)
.apply(RequestOptions.centerInsideTransform().diskCacheStrategy(DiskCacheStrategy.ALL).placeholder(R.drawable.ic_profile_fill)).into(ivProfile);
builder.setView(dialogLayout);
AlertDialog alertDialog = builder.create();
Objects.requireNonNull(alertDialog.getWindow()).setWindowAnimations(R.style.ProfileImageAnimation);
alertDialog.setCancelable(true);
alertDialog.show();
//动画文件:
<!--<translate
android:fromXDelta="-100%p"
android:fromYDelta="0"
android:duration="500"/>-->
<scale
android:fromXScale="0.3"
android:fromYScale="0.3"
android:pivotX="50%"
android:pivotY="50%"
android:duration="150"
android:toXScale="1.0"
android:toYScale="1.0" />
解决方案
You can try this :
class AnimationActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_animation_start)
showAnimationButton.setOnClickListener { showAnimation() }
}
private fun showAnimation() {
val activityOptionsCompat =
ActivityOptionsCompat.makeSceneTransitionAnimation(this, showAnimationButton, "TRANSITION_NAME")
intent = Intent(this, AnimationDetailActivity::class.java)
startActivity(intent, activityOptionsCompat.toBundle())
}
}
layout : activity_animation_start
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:context=".AnimationActivity">
<ImageView
android:transitionName="TRANSITION_NAME"
android:id="@+id/showAnimationButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@mipmap/ic_launcher"/>
</RelativeLayout>
class AnimationDetailActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_animation_detail)
}
}
layout :activity_animation_detail
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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">
<ImageView android:layout_width="300dp"
android:layout_height="300dp"
android:transitionName="TRANSITION_NAME"
android:scaleType="fitCenter"
android:background="@mipmap/ic_launcher"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
</android.support.constraint.ConstraintLayout>
Note : Make sure you keep the name transition name same in both the layouts.
推荐阅读
- amazon-web-services - Cloudformation 用于快速查看
- audio - HuBERT:RuntimeError:3 维权重的预期 3 维输入,但得到 5 维输入
- mysql - 使用 ONLY_FULL_GROUP_BY 获得所需的结果
- ti-basic - Comlpex if 语句在 tibasic 中不起作用
- apache-spark - 如何有效地选择按年月日划分的两个日期之间的数据?
- google-analytics - 不发送 expo-firebase-analytics 屏幕分辨率
- ruby - 如何将局部变量从模块导入到Ruby中的另一个类
- azure-data-explorer - 如何基于 Azure 数据资源管理器 KQL 中的其他列构建新的动态列
- vue.js - 我如何在 ionic-vue 中实现 Web 视图
- inno-setup - 使用命令行参数抑制 Inno Setup 任务