ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

Android fragment 转场动画

2026/8/21 19:16:33 拓冰建站 浏览量
Android fragment 转场动画

fragment 动画

  • 使用 setCustomAnimations 绘制转场动画
  • 使用共享元素的动画
    • recyclerview in
  • 参考地址

使用 setCustomAnimations 绘制转场动画

概述

在 Android 中,可以使用 setCustomAnimations() 方法来绘制自定义的 Fragment 转场动画。该方法接受四个参数,分别对应四种类型的动画:

  • enter: 新 Fragment 进入时的动画
  • exit: 旧 Fragment 离开时的动画
  • popEnter: 从 Back Stack 中弹出 Fragment 时的动画
  • popExit: 将 Fragment 添加到 Back Stack 时的动画

步骤

  1. 创建动画资源文件。

    转场动画可以使用 XML 动画资源文件来定义。每个动画资源文件定义一种类型的动画,例如 enter.xmlexit.xmlpop_enter.xmlpop_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"><alphaandroid:fromAlpha="0.0"android:toAlpha="1.0"android:duration="500" />
</set><set xmlns:android="http://schemas.android.com/apk/res/android"><alphaandroid:fromAlpha="1.0"android:toAlpha="0.0"android:duration="500" />
</set>

2. 在 Fragment 中设置自定义动画

public class MyFragment extends Fragment {@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {// Inflate the layout for this fragmentView view = inflater.inflate(R.layout.fragment_my, container, false);// Set custom animationssetCustomAnimations(R.anim.enter, R.anim.exit);return view;}
}

效果

运行该示例后,可以看到 Fragment 进入和离开时都会播放自定义的动画效果。

注意事项

  • 使用 setCustomAnimations() 方法设置自定义动画时,必须在 Fragment 添加到 Activity 之前调用该方法。
  • 如果不设置自定义动画,则 Fragment 会使用系统默认的转场动画。

进阶

除了使用 XML 动画资源文件来定义动画效果之外,还可以使用代码来定义动画效果。例如,可以使用 ObjectAnimator 类来创建更加复杂的动画效果。

使用共享元素的动画

FirstFragment 中:

public class FirstFragment extends Fragment {@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {return inflater.inflate(R.layout.fragment_first, container, false);}@Overridepublic void onViewCreated(View view, Bundle savedInstanceState) {super.onViewCreated(view, savedInstanceState);ImageView sharedImageView = view.findViewById(R.id.shared_image);sharedImageView.setOnClickListener(new View.OnClickListener() {@Overridepublic 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());// 替换当前 Fragmenttransaction.replace(R.id.fragment_container_view, newFragment);transaction.addToBackStack(tag);transaction.commit();}
}

SecondFragment 中:

public class SecondFragment extends Fragment {@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);}@Overridepublic 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@Overridepublic ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_layout, parent, false);return new ViewHolder(view);}@Overridepublic void onBindViewHolder(@NonNull ViewHolder holder, int position) {MyData data = dataList.get(position);// 设置 transitionNameholder.imageView.setTransitionName("shared_image_" + position);// 加载图片或其他数据// Glide.with(holder.imageView.getContext()).load(data.getImageUrl()).into(holder.imageView);}@Overridepublic 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