如何给元素添加入场动画和特效

选中元素后,在右侧面板点击「动画」标签,从入场、退出、强调三类预设中选一个,调整时长和延迟后保存。编辑器画布不会自动播放动画,需在预览中翻页才能看到效果。特效元素(参数化特效 / 媒体特效)通过左侧「特效库」添加,媒体类 Lottie/特效素材需要专业版套餐。

本文步骤

  1. 添加入场 / 退出 / 强调动画
  2. 点击画布上的元素将其选中
  3. 在右侧面板顶部,点击「动画」标签(与「样式」「事件」并排)
  4. 面板出现三个子标签:入场、退出、强调
  5. 在预设列表中选择一个效果
  6. 根据需要调整以下参数(可选): 时长:动画播放时长(秒)
  7. 如需预览效果,点击面板底部「预览动画」按钮
  8. 设置完成后,动画配置会随作品自动保存
  9. 在预览中查看动画效果
  10. 添加参数化特效(runtimeEffect)
  11. 在左侧面板点击「素材」(Material)入口,进入素材库
  12. 在素材库内找到「特效库」入口,进入后切换到「参数化特效」轨道
  13. 浏览预设画廊,点击想要使用的特效,即可插入到当前页面
  14. 选中插入的特效元素后,在右侧「样式」面板调整其参数(如颜色、速度)
  15. 参数化特效在编辑器中实时渲染,发布后在阅读器中同样有效
  16. 添加媒体特效(Lottie / 效果素材)
  17. 在左侧特效库面板切换到「媒体特效」轨道
  18. 平台素材库会展示可用的 effect(特效素材)、lottie(Lottie 动画)和 gif
  19. 点击选中的素材,系统检查套餐权限后插入到当前页面
  20. 选中插入的动效元素,在右侧「样式」面板的「动效」区域可配置: 自动播放:翻到该页是否自动开始播放
  21. 动效元素在编辑器内只显示静态快照帧预览

在翻页宝编辑器中,你可以为任意元素单独配置入场动画(翻到该页时播放一次)、退出动画(翻走前播放)和强调动画(持续循环);也可以从特效库插入参数化特效或媒体特效(Lottie/GIF)元素来丰富页面效果。动画功能对所有套餐免费,媒体特效素材需要专业版或以上套餐。

适用场景

  • 文字、图片、形状需要在进入视野时以淡入、滑入或弹跳等方式出现。
  • 某个按钮或图标需要持续跳动、脉冲,引导读者注意。
  • 翻页前希望元素有退出效果,让页面切换更流畅。
  • 页面需要嵌入循环播放的特效(粒子、光效、Lottie 动画)。

前置条件

  • 使用新版编辑器(编辑器 V2)编辑作品。
  • 画布上已存在想要添加动画的元素(文字、图片、形状等)。
  • 如需使用 Lottie 或媒体特效素材,当前套餐需为专业版或以上。

操作步骤

添加入场 / 退出 / 强调动画

编辑器 V2 右侧面板切换到「动画」标签后展示入场动画预设列表,左上方可见「入场」「退出」「强调」三个子标签

  1. 点击画布上的元素将其选中。
  2. 在右侧面板顶部,点击**「动画」**标签(与「样式」「事件」并排)。
  3. 面板出现三个子标签:入场、退出、强调。选择要配置的类型:
    • 入场:读者翻到该页时,元素从隐藏状态播放一次进入动画。
    • 退出:读者离开该页前,元素播放一次退出动画再翻页。
    • 强调:入场完成后持续循环播放(如心跳、脉冲、旋转)。
  4. 在预设列表中选择一个效果。可选项按类别分组:
    • 入场:淡入(5 种)、滑入(4 种)、缩放(5 种)、弹跳(5 种)、翻转(2 种)、旋转(5 种)、特殊(4 种),共 30 种;另有「无动画」。
    • 退出:淡出(5 种)、滑出(4 种)、缩放(1 种)、翻转(2 种),共 12 种;另有「无动画」。
    • 强调:脉冲、弹跳、震动、摆动、摇摆、闪烁、心跳、橡皮筋、果冻、庆祝、旋转,共 11 种;另有「无动画」。
  5. 根据需要调整以下参数(可选):
    • 时长:动画播放时长(秒)。入场默认 0.6 秒,退出默认 0.4 秒,强调默认 1 秒。
    • 延迟:翻页后等待多少秒再开始播放(0 = 立即)。
    • 缓动:控制速度曲线,如平缓、标准、强烈、弹跳、弹性、回弹等,共 15 种。
    • 强调动画还可以设置重复次数(-1 = 无限循环)和间隔(每次循环之间的停顿秒数)。
  6. 如需预览效果,点击面板底部「预览动画」按钮。
  7. 设置完成后,动画配置会随作品自动保存。

在预览中查看动画效果

  • 编辑器画布不会自动播放动画。元素在画布上始终以完整显示态呈现。
  • 点击顶部「预览」按钮进入预览界面,或发布后打开作品链接,在翻页时即可看到入场/退出/强调动画正常触发。

添加参数化特效(runtimeEffect)

编辑器 V2 左侧「素材库」面板内的特效库子视图,显示「参数化特效」和「媒体特效」两个切换标签及参数化特效预设网格

参数化特效是翻页宝内置的可配置视觉效果(如粒子、波纹、光效等),无套餐限制。

  1. 在左侧面板点击「素材」(Material)入口,进入素材库。
  2. 在素材库内找到「特效库」入口,进入后切换到「参数化特效」轨道。
  3. 浏览预设画廊,点击想要使用的特效,即可插入到当前页面。
  4. 选中插入的特效元素后,在右侧「样式」面板调整其参数(如颜色、速度)。
  5. 参数化特效在编辑器中实时渲染,发布后在阅读器中同样有效。

添加媒体特效(Lottie / 效果素材)

Lottie 动画和媒体效果素材(effect)为动态素材,需要专业版或以上套餐

  1. 在左侧特效库面板切换到「媒体特效」轨道。
  2. 平台素材库会展示可用的 effect(特效素材)、lottie(Lottie 动画)和 gif 类型素材。
  3. 点击选中的素材,系统检查套餐权限后插入到当前页面。
  4. 选中插入的动效元素,在右侧「样式」面板的「动效」区域可配置:
    • 自动播放:翻到该页是否自动开始播放。
    • 循环播放:是否循环。
    • 播放速度:0.25x 到 4x。
    • 快照帧:编辑器静态预览显示哪一帧(不影响实际播放)。
  5. 动效元素在编辑器内只显示静态快照帧预览;在阅读器中翻到该页时按配置播放。

预期结果

  • 设置完动画后,「动画」标签内对应子标签的选中预设会高亮显示。
  • 点击「预览动画」按钮可在本地看到一次临时效果预览。
  • 预览或发布链接中翻到该页,元素按配置的顺序和时长播放入场动画;强调动画在入场结束后持续循环。

常见问题

  • 在画布里看不到动画播放:这是设计行为。编辑器画布始终显示元素完整态,需进入预览或发布后在阅读器翻页才能看到。
  • 设置了动画,预览后元素消失不见:通常是入场动画的延迟过长,或误选了退出动画导致元素提前消失。检查「入场」标签下延迟设置,或将退出动画设为「无动画」。
  • 强调动画不停转,想让它停:将「强调」标签下的预设切换为「无动画」,或设置重复次数为 0。
  • Lottie 素材显示灰色或提示升级:媒体特效素材(lottie/effect)需要专业版套餐;参数化特效无此限制,可作为替代。
  • 动效元素在编辑器只显示一张静图:这是预期行为,动效素材在编辑器内只展示静态快照帧,阅读器和 MP4 导出中才会实际播放动画。

操作步骤

1

添加入场 / 退出 / 强调动画

编辑器 V2 右侧面板切换到「动画」标签后展示入场动画预设列表,左上方可见「入场」「退出」「强调」三个子标签

2

点击画布上的元素将其选中

点击画布上的元素将其选中。

3

在右侧面板顶部,点击「动画」标签(与「样式」「事件」并排)

在右侧面板顶部,点击「动画」标签(与「样式」「事件」并排)。

4

面板出现三个子标签:入场、退出、强调

面板出现三个子标签:入场、退出、强调。选择要配置的类型:
入场:读者翻到该页时,元素从隐藏状态播放一次进入动画。
退出:读者离开该页前,元素播放一次退出动画再翻页。
强调:入场完成后持续循环播放(如心跳、脉冲、旋转)。

5

在预设列表中选择一个效果

在预设列表中选择一个效果。可选项按类别分组:
入场:淡入(5 种)、滑入(4 种)、缩放(5 种)、弹跳(5 种)、翻转(2 种)、旋转(5 种)、特殊(4 种),共 30 种;另有「无动画」。
退出:淡出(5 种)、滑出(4 种)、缩放(1 种)、翻转(2 种),共 12 种;另有「无动画」。
强调:脉冲、弹跳、震动、摆动、摇摆、闪烁、心跳、橡皮筋、果冻、庆祝、旋转,共 11 种;另有「无动画」。

6

根据需要调整以下参数(可选): 时长:动画播放时长(秒)

根据需要调整以下参数(可选):
时长:动画播放时长(秒)。入场默认 0.6 秒,退出默认 0.4 秒,强调默认 1 秒。
延迟:翻页后等待多少秒再开始播放(0 = 立即)。
缓动:控制速度曲线,如平缓、标准、强烈、弹跳、弹性、回弹等,共 15 种。
强调动画还可以设置重复次数(1 = 无限循环)和间隔(每次循环之间的停顿秒数)。

7

如需预览效果,点击面板底部「预览动画」按钮

如需预览效果,点击面板底部「预览动画」按钮。

8

设置完成后,动画配置会随作品自动保存

设置完成后,动画配置会随作品自动保存。

9

在预览中查看动画效果

编辑器画布不会自动播放动画。元素在画布上始终以完整显示态呈现。
点击顶部「预览」按钮进入预览界面,或发布后打开作品链接,在翻页时即可看到入场/退出/强调动画正常触发。

10

添加参数化特效(runtimeEffect)

编辑器 V2 左侧「素材库」面板内的特效库子视图,显示「参数化特效」和「媒体特效」两个切换标签及参数化特效预设网格

参数化特效是翻页宝内置的可配置视觉效果(如粒子、波纹、光效等),无套餐限制。

11

在左侧面板点击「素材」(Material)入口,进入素材库

在左侧面板点击「素材」(Material)入口,进入素材库。

12

在素材库内找到「特效库」入口,进入后切换到「参数化特效」轨道

在素材库内找到「特效库」入口,进入后切换到「参数化特效」轨道。

13

浏览预设画廊,点击想要使用的特效,即可插入到当前页面

浏览预设画廊,点击想要使用的特效,即可插入到当前页面。

14

选中插入的特效元素后,在右侧「样式」面板调整其参数(如颜色、速度)

选中插入的特效元素后,在右侧「样式」面板调整其参数(如颜色、速度)。

15

参数化特效在编辑器中实时渲染,发布后在阅读器中同样有效

参数化特效在编辑器中实时渲染,发布后在阅读器中同样有效。

16

添加媒体特效(Lottie / 效果素材)

Lottie 动画和媒体效果素材(effect)为动态素材,需要专业版或以上套餐。

17

在左侧特效库面板切换到「媒体特效」轨道

在左侧特效库面板切换到「媒体特效」轨道。

18

平台素材库会展示可用的 effect(特效素材)、lottie(Lottie 动画)和 gif

平台素材库会展示可用的 effect(特效素材)、lottie(Lottie 动画)和 gif 类型素材。

19

点击选中的素材,系统检查套餐权限后插入到当前页面

点击选中的素材,系统检查套餐权限后插入到当前页面。

20

选中插入的动效元素,在右侧「样式」面板的「动效」区域可配置: 自动播放:翻到该页是否自动开始播放

选中插入的动效元素,在右侧「样式」面板的「动效」区域可配置:
自动播放:翻到该页是否自动开始播放。
循环播放:是否循环。
播放速度:0.25x 到 4x。
快照帧:编辑器静态预览显示哪一帧(不影响实际播放)。

21

动效元素在编辑器内只显示静态快照帧预览

动效元素在编辑器内只显示静态快照帧预览;在阅读器中翻到该页时按配置播放。