Kazumi 中的列表项动画：进入与退出效果实现

Kazumi 中的列表项动画：进入与退出效果实现

【免费下载链接】Kazumi 基于自定义规则的番剧采集APP，支持流媒体在线观看，支持弹幕。 项目地址: https://gitcode.com/gh_mirrors/ka/Kazumi

在视频播放应用中，流畅的列表项动画能够显著提升用户体验。Kazumi 作为基于自定义规则的番剧采集 APP，在列表项的进入与退出动画实现上采用了多种 Flutter 动画组件，结合业务场景打造了符合观看习惯的过渡效果。本文将详细解析这些动画效果的实现方式及核心代码。

动画实现的核心组件与配置

Kazumi 的列表动画系统基于 Flutter 的 AnimationController 和多种过渡组件构建，主要集中在视频播放页面和播放器控制面板中。核心实现文件包括 lib/pages/video/video_page.dart 和 lib/pages/player/player_item_panel.dart。

在视频页面初始化阶段，创建了用于控制动画时长和曲线的基础配置：

animation = AnimationController(
  duration: const Duration(milliseconds: 120),
  vsync: this,
);
_rightOffsetAnimation = Tween<Offset>(
  begin: const Offset(1.0, 0.0),
  end: const Offset(0.0, 0.0),
).animate(CurvedAnimation(
  parent: animation,
  curve: Curves.easeOut,
));
_maskOpacityAnimation = Tween<double>(
  begin: 0.0,
  end: 1.0,
).animate(CurvedAnimation(
  parent: animation,
  curve: Curves.easeIn,
));

这段代码定义了两种基础动画：

• 位移动画（_rightOffsetAnimation）：从右侧（X轴1.0位置）平移至目标位置
• 透明度动画（_maskOpacityAnimation）：从不透明到完全显示的淡入效果

动画时长统一设置为120毫秒，并使用了不同的缓动曲线（easeOut和easeIn）以实现更自然的视觉过渡。

列表项的滑入动画实现

在宽屏模式下，剧集列表采用侧边滑入的动画效果，通过 SlideTransition 组件实现。当用户打开剧集列表时，触发动画控制器的正向播放：

void openTabBodyAnimated() {
  if (videoPageController.showTabBody) {
    if (!disableAnimations) {
      animation.forward();
    }
    menuJumpToCurrentEpisode();
  }
}

对应的 Widget 构建代码如下：

SlideTransition(
  position: _rightOffsetAnimation,
  child: sideTabBody,
)

其中 sideTabBody 是包含剧集列表的容器组件，通过 lib/pages/video/video_page.dart 实现：

Widget get sideTabBody {
  return SizedBox(
    height: MediaQuery.sizeOf(context).height,
    width: (!Utils.isDesktop() && !Utils.isTablet())
        ? MediaQuery.sizeOf(context).height
        : (MediaQuery.sizeOf(context).width / 3 > 420
            ? 420
            : MediaQuery.sizeOf(context).width / 3),
    child: Container(
      color: Theme.of(context).canvasColor,
      child: GridViewObserver(
        controller: observerController,
        child: (Utils.isDesktop() || Utils.isTablet())
            ? tabBody
            : Column(
                children: [
                  menuBar,
                  menuBody,
                ],
              ),
      ),
    ),
  );
}

退出动画与用户交互

当用户关闭剧集列表或切换全屏模式时，动画控制器反向播放以实现平滑退出效果：

void closeTabBodyAnimated() {
  if (!disableAnimations) {
    animation.reverse();
    Future.delayed(const Duration(milliseconds: 120), () {
      videoPageController.showTabBody = false;
    });
  } else {
    videoPageController.showTabBody = false;
  }
  keyboardFocus.requestFocus();
}

在播放器控制面板中，类似的滑入/滑出动画被广泛应用于各种控制元素。例如 lib/pages/player/player_item_panel.dart 中实现的进度条和音量控制：

: SlideTransition(
    position: Tween<Offset>(
      begin: const Offset(0, 1),
      end: Offset.zero,
    ).animate(CurvedAnimation(
      parent: _controller,
      curve: Curves.easeOut,
    )),
    child: _buildProgressBar(),
  )

动画禁用与性能优化

考虑到不同设备性能和用户偏好，Kazumi 提供了动画禁用选项，通过读取设置项控制动画开关：

disableAnimations =
    setting.get(SettingBoxKey.playerDisableAnimations, defaultValue: false);

在构建 UI 时根据此标志决定是否使用动画组件：

if (disableAnimations) ...[
  sideTabMask,
  sideTabBody,
] else ...[
  FadeTransition(
    opacity: _maskOpacityAnimation,
    child: sideTabMask,
  ),
  SlideTransition(
    position: _rightOffsetAnimation,
    child: sideTabBody,
  ),
]

多场景动画应用

Kazumi 在多个页面和组件中应用了类似的动画模式，主要包括：

1. 视频播放页面：剧集列表的滑入/滑出（lib/pages/video/video_page.dart）
2. 播放器控制面板：底部控制栏的淡入/淡出（lib/pages/player/player_item_panel.dart）
3. 迷你播放器：小窗口模式的尺寸变换（lib/pages/player/smallest_player_item_panel.dart）

这些动画效果共同构成了 Kazumi 流畅的用户体验，尤其在剧集切换和界面转场时提供了清晰的视觉引导。

动画系统的扩展建议

基于现有实现，开发者可以通过以下方式扩展动画效果：

1. 添加更多动画曲线选项，在 lib/bean/settings/theme_provider.dart 中增加动画曲线配置
2. 实现列表项的交错动画，通过 lib/modules/bangumi/bangumi_item.dart 控制单个列表项的动画延迟
3. 添加动画速度调节，在 lib/pages/settings/player_settings.dart 中增加相关设置项

通过合理使用 Flutter 的动画系统，Kazumi 实现了性能与视觉体验的平衡，为用户提供了流畅且可定制的番剧观看体验。

【免费下载链接】Kazumi 基于自定义规则的番剧采集APP，支持流媒体在线观看，支持弹幕。 项目地址: https://gitcode.com/gh_mirrors/ka/Kazumi