电影过渡

用于内容间上下文变化的电影级过渡效果

电影过渡

电影过渡是在无关联或距离较远的内容之间导航时使用的电影级过渡模式。与淡入淡出类似，它传达了进入全新区域的感觉，但提供了更特别的视觉体验。

演示

用户体验原则

何时使用？

电影过渡用于上下文变化。

按内容关系的适用性

主要使用场景

• 顶级导航：在底部标签或侧边栏菜单中的部分之间移动
• 上下文切换：没有连接点的屏幕之间的过渡
• 开始新任务：进入完全不同的任务流程
• 特殊时刻演出：重要屏幕过渡时需要视觉强调的情况

为什么这样工作？

1. 清晰分离：像淡入淡出一样在前一个屏幕和新屏幕之间创建明确的边界
2. 视觉兴趣：比简单的淡入淡出更动态的过渡以吸引用户注意力
3. 高级体验：通过特殊的过渡效果提升应用质量和精致度

动效设计

电影过渡的灵感来自胶片通过放映机的机制。

退出屏幕的动作 当前屏幕在向上移动的同时缩小。就像胶片帧通过放映机镜头向上移动一样，屏幕变小并感觉从视野中远离。在这个过程中，页面周围出现黑色边距，使帧边界变得清晰。

帧间隔的演示 两个屏幕之间暴露出短暂的间隔。这代表了实际胶片条上帧与帧之间的黑色间隙，视觉上传达一个场景结束，下一个开始。

进入屏幕的出现 新屏幕从下方以小尺寸出现，在向上移动的同时逐渐扩大。它唤起了胶片帧到达放映机镜头并放大到屏幕尺寸的过程。最后，它完美聚焦在屏幕上，完成过渡。

这个序列为用户提供了"进入新场景"的清晰视觉隐喻，同时带有模拟电影的浪漫感。

基本用法

import { Ssgoi } from '@ssgoi/react';
import { film } from '@ssgoi/react/view-transitions';

const config = {
  defaultTransition: film()
};

export default function App() {
  return (
    <Ssgoi config={config}>
      {/* 应用内容 */}
    </Ssgoi>
  );
}

实际示例

1. 标签导航

在底部标签栏或顶部标签中的主要部分之间导航：

const config = {
  transitions: [
    {
      from: '/home',
      to: '/profile',
      transition: film(),
      symmetric: true
    },
    {
      from: '/home',
      to: '/settings',
      transition: film(),
      symmetric: true
    }
  ]
};

无障碍性

• 设置prefers-reduced-motion时自动禁用动画
• 屏幕阅读器在过渡期间正确识别内容更改
• 完全兼容键盘导航

最佳实践

✅ 应该

• 默认用于顶级导航
• 内容完全改变时使用
• 需要特殊品牌体验时使用

❌ 不应该

• 不要用于相关内容之间的导航（使用滑动或滚动）
• 避免过于复杂的动画（用户可能感到晕眩）
• 不要用于部分UI更改