Gamma零基础做动画：页面过渡效果添加指南【技巧教程】

很多人想在Gamma生成的网页里加入页面切换时的平滑过渡效果，但翻遍设置都找不到动画入口，甚至误以为Gamma不支持动效——其实Gamma虽然不提供传统的时间轴动画，但内置了一套轻量级的页面级过渡控制，只是藏得有点深。只要找到两处关键开关并正确配置，就能让页面切换不再是生硬的“啪”一下跳转。

确认当前文档支持过渡效果

打开Gamma编辑页后，先看一眼右上角是否显示「Web page」标识。如果显示的是「Presentation」或「Document」，那就需要点开右上角「Settings」→「Page type」→切换为「Web page」。很多人忽略了这个前提——只有网页类型文档才具备页面过渡配置项，Presentation模式下完全不可见过渡设置，这一点必须搞清楚。

切换完成后刷新一下页面，确保顶部状态栏明确显示「Web page」字样，再继续下一步操作。

开启全局页面过渡开关

关键一步在这里：点击右上角「Settings」齿轮图标→切换到「Na vigation」选项卡→找到「Page transitions」开关并启用它。这个开关是硬性前提——关闭状态下，无论后续如何配置，所有页面跳转都会表现为瞬时切换，没有任何缓动或淡入效果。开启后，Gamma会自动为所有内部链接（包括导航栏菜单、锚点跳转、区块内超链接）应用默认过渡行为。

自定义过渡样式与持续时间

在开启「Page transitions」的前提下，下拉「Transition style」选项可以看到五种过渡：Fade（渐变）、Slide left（左滑）、Slide right（右滑）、Slide up（上滑）、Slide down（下滑）。其中Fade在移动端弱网环境下兼容性最好，而Slide left最符合从左向右的阅读习惯，适合内容型网页。

拖动「Duration」滑块可以调整动画时长，范围从0.2秒到0.8秒。建议设置在0.4秒——短于0.3秒人眼几乎感知不到动效，长于0.6秒又容易让用户产生等待感。需要注意的是，这个值会影响所有页面跳转，无法针对单个页面单独设置。

另外提醒一下：Gamma不提供easing曲线调节选项，所有过渡都采用系统默认的ease-in-out缓动，不需要额外操作。

验证过渡是否生效

第一步：在编辑器内添加至少两个页面——点击左侧边栏底部的「+ Add page」两次，创建Page 2和Page 3。

第二步：回到首页，在任意文本块中输入“跳转到第二页”→全选文字→点击上方工具栏的链子图标→在弹出的对话框中选择「Page 2」→点击「Insert link」。

第三步：点击右上角「Preview」按钮进入预览模式→点击刚插入的链接→观察页面是否出现所选过渡效果。如果还是瞬间切换，返回「Settings→Na vigation」确认开关已开启且没有被意外关闭。