fragment 动画
使用 setCustomAnimations 绘制转场动画
概述
在 Android 中,可以使用 setCustomAnimations()
方法来绘制自定义的 Fragment 转场动画。该方法接受四个参数,分别对应四种类型的动画:
- enter: 新 Fragment 进入时的动画
- exit: 旧 Fragment 离开时的动画
- popEnter: 从 Back Stack 中弹出 Fragment 时的动画
- popExit: 将 Fragment 添加到 Back Stack 时的动画
步骤
1.创建动画资源文件。
转场动画可以使用 XML 动画资源文件来定义。每个动画资源文件定义一种类型的动画,例如 enter.xml
、exit.xml
、pop_enter.xml
和 pop_exit.xml
。
动画资源文件的格式与其他动画资源文件相同,可以使用各种动画属性来定义动画效果。例如,可以使用 alpha
属性来定义透明度变化,使用 translate
属性来定义位移变化,使用 scale
属性来定义缩放变化等等。
2.在 Fragment 中设置自定义动画。
在 Fragment 中,可以使用 setCustomAnimations()
方法来设置自定义的转场动画。该方法接受四个参数,分别对应四个类型的动画资源文件的 ID。
例如,以下代码设置了 Fragment 进入和离开时的自定义动画:
fragment.setCustomAnimations(R.anim.enter, R.anim.exit);
示例
以下是一个示例,演示如何使用 setCustomAnimations()
方法来绘制自定义的 Fragment 转场动画。
1. 创建动画资源文件
<set xmlns:android="http://schemas.android.com/apk/res/android"> <alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="500" /> </set> <set xmlns:android="http://schemas.android.com/apk/res/android"> <alpha android:fromAlpha="1.0" android:toAlpha="0.0" android:duration="500" /> </set>
2. 在 Fragment 中设置自定义动画
public class MyFragment extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { // Inflate the layout for this fragment View view = inflater.inflate(R.layout.fragment_my, container, false); // Set custom animations setCustomAnimations(R.anim.enter, R.anim.exit); return view; } }
效果
运行该示例后,可以看到 Fragment 进入和离开时都会播放自定义的动画效果。
注意事项
- 使用
setCustomAnimations()
方法设置自定义动画时,必须在 Fragment 添加到 Activity 之前调用该方法。 - 如果不设置自定义动画,则 Fragment 会使用系统默认的转场动画。
进阶
除了使用 XML 动画资源文件来定义动画效果之外,还可以使用代码来定义动画效果。例如,可以使用 ObjectAnimator
类来创建更加复杂的动画效果。
使用共享元素的动画
在 FirstFragment
中:
public class FirstFragment extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { return inflater.inflate(R.layout.fragment_first, container, false); } @Override public void onViewCreated(View view, Bundle savedInstanceState) { super.onViewCreated(view, savedInstanceState); ImageView sharedImageView = view.findViewById(R.id.shared_image); sharedImageView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { navigateToSecondFragment(sharedImageView); } }); } private void navigateToSecondFragment(View sharedElement) { SecondFragment newFragment = new SecondFragment(); FragmentTransaction transaction = getParentFragmentManager().beginTransaction(); // 设置退出动画 TransitionSet exitTransition = new TransitionSet(); exitTransition.addTransition(new Fade()); exitTransition.addTransition(new Slide(Gravity.START)); newFragment.setExitTransition(exitTransition); // 设置共享元素退出动画 TransitionSet sharedElementExitTransition = new TransitionSet(); sharedElementExitTransition.addTransition(new ChangeBounds()); sharedElementExitTransition.addTransition(new ChangeTransform()); sharedElementExitTransition.addTransition(new ChangeImageTransform()); newFragment.setSharedElementExitTransition(sharedElementExitTransition); // 设置进入动画 TransitionSet enterTransition = new TransitionSet(); enterTransition.addTransition(new Fade()); enterTransition.addTransition(new Slide(Gravity.END)); newFragment.setEnterTransition(enterTransition); // 设置共享元素进入动画 TransitionSet sharedElementEnterTransition = new TransitionSet(); sharedElementEnterTransition.addTransition(new ChangeBounds()); sharedElementEnterTransition.addTransition(new ChangeTransform()); sharedElementEnterTransition.addTransition(new ChangeImageTransform()); newFragment.setSharedElementEnterTransition(sharedElementEnterTransition); // 添加共享元素 可以添加多个共享元素 transaction.addSharedElement(sharedElement, sharedElement.getTransitionName()); // 替换当前 Fragment transaction.replace(R.id.fragment_container_view, newFragment); transaction.addToBackStack(tag); transaction.commit(); } }
在 SecondFragment
中:
public class SecondFragment extends Fragment { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { return inflater.inflate(R.layout.fragment_second, container, false); } }
recyclerview in
对于在 RecyclerView 或 ListView 中使用共享元素的情况,你可以在适配器的 onBindViewHolder()
方法中为每个共享元素设置 transitionName
属性。
假设你有一个 RecyclerView,其中的每个项目包含一个 ImageView,并且你想要在这些 ImageView 之间应用共享元素动画。在 RecyclerView 的适配器中,你可以这样设置 transitionName
:
public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> { private List<MyData> dataList; public MyAdapter(List<MyData> dataList) { this.dataList = dataList; } @NonNull @Override public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) { View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_layout, parent, false); return new ViewHolder(view); } @Override public void onBindViewHolder(@NonNull ViewHolder holder, int position) { MyData data = dataList.get(position); // 设置 transitionName holder.imageView.setTransitionName("shared_image_" + position); // 加载图片或其他数据 // Glide.with(holder.imageView.getContext()).load(data.getImageUrl()).into(holder.imageView); } @Override public int getItemCount() { return dataList.size(); } public static class ViewHolder extends RecyclerView.ViewHolder { ImageView imageView; public ViewHolder(@NonNull View itemView) { super(itemView); imageView = itemView.findViewById(R.id.imageView); } } }
在这个示例中,我们在适配器的 onBindViewHolder()
方法中为每个 ImageView 设置了唯一的 transitionName
属性,例如 "shared_image_" + position
。这样做可以确保 RecyclerView 中的每个共享元素都具有唯一的 transitionName
,以便在共享元素动画中正确识别和匹配它们。
参考地址
chatgpt