在 GemPages 中为元素添加动画

关于 GemPages 动画

动画涉及为网页上的元素引入动作或移动，范围从淡入淡出或滑动等微妙效果到更动态的过渡和交互。您可以灵活地将动画应用于 GemPages 中的任何元素。按照以下步骤将动画添加到 GemPages 元素。 

如何添加动画？

请按照以下步骤为您的元素添加动画：

第四步： 访问 Shopify 管理员 > 应用 并选择 GemPages 构建器 访问 GemPages 仪表板。单击您喜欢的模板以访问编辑器。 

第四步：点击要添加动画的元素。元素配置 将显示在左侧边栏中。接下来，切换到 先进的 标签。 

第四步: 向下滚动到 动画 部分并切换开关 on.

您将看到四个可用的动画预设：

• 褪色：元素逐渐从完全透明过渡到完全可见。
• 滑：元素在屏幕上平滑过渡，通常是水平或垂直方向。
• 通过Zoom：涉及元素大小的动态调整的视觉效果，在给定空间内产生元素靠近（放大）或远离（缩小）的错觉。
• 摇：赋予元素快速、抖动的运动的视觉效果，模拟颤抖或振动的运动。

配置动画设置

每个动画都会有不同的设置。总共有 9 设置，包括：

1。 速度

使用滑块调整动画速度。滑块越靠右，动画速度越快。

2.延迟

动画开始或每次循环（如果启用了循环）的延迟秒数。最大延迟时间为 20 秒。

3. 宽松

在此步骤中，您可以从不同类型的缓动函数中进行选择，以控制关键帧之间的过渡速度。选择正确的缓动函数取决于您希望动画具有的具体特性以及您希望实现的整体用户体验。

• 线性推力器：以直线和一致的方式发生的运动
• 缓入：动画开始时逐渐加速的运动
• 缓出：动画结束时逐渐减速的运动
• 缓入缓出：运动开始时逐渐加速，然后是一段时间的稳定运动，最后逐渐减速。

4。 触发

选择动画的触发方式。

• 每个视图： 每次访问者滚动到该元素时都会播放动画。
• 第一视角： 动画仅在访问者第一次查看元素时运行。

5。 方向

指示元素的滑动动画将要移动的路径。

6.距离

调整元素移动的距离。

7.强度

特定时间内震动的频率。强度越大，震动越明显。

8. 变焦倍数

指示在缩放动画过程中元素放大或缩小的程度（以百分比表示）。

9. 循环

只要元素存在，动画是否会随着时间重复。