了解如何在 Adobe Muse 中为页面元素应用动画和不透明度滚动效果。
“滚动效果”面板包含四个选项卡,用于根据页面的滚动方式控制运动、不透明度、幻灯片构件和 Adobe Edge Animate 内容。当结合使用滚动效果时,以及某些元素已固定、设置为 100% 宽度和/或使用“图层”面板彼此前后覆盖排列时,可以创建各种引人注目的效果。
“滚动效果”面板的界面类似于浏览器填色和背景填充滚动效果面板的界面。按照以下步骤操作,使用“滚动效果”面板的“运动”选项卡向页面元素应用滚动效果:
在下面的示例中,关键位置设置为 500 像素。当浏览器开始移动时,元素 1 倍速度(与页面滚动速度相同)向下移动并到位。当页面滚动到关键位置时,元素到达其位置。当页面滚动通过关键位置后,元素以 2 倍于页面滚动的速度移到右侧。
在本节中,您将了解如何对可见性应用转换,来根据访客的滚动交互更改元素的显示。这种方法非常有用,可通过在访客向下滚动到页面的一个新部分时让项目显示为淡入或淡出,来显示和隐藏内容。按照以下步骤操作,使用“滚动效果”面板的“不透明度”选项卡应用可影响页面元素透明度的滚动效果:
启用不透明度选项会让不同类型的手柄出现在元素上。正如“运动”选项卡中用于设置关键位置的 T 形手柄一样,您可以单击该手柄并将其拖动到元素上方、向下拖动以使其与顶部边缘对齐(或拖动到元素的任何部分上)或将其拖到元素下方。不透明度手柄有三个不同的部分,可以独立拖动来设置“关键位置”、“淡化位置 1”和“淡化位置 2”。
如有必要,可以沿淡化位置手柄拖动关键位置,以设置为相同值。除拖动手柄外,还可以在“滚动效果”面板中为这些字段分别输入数值。
在此示例中,元素开始完全透明,然后越来越不透明,直至页面达到关键位置时,变得完全不透明(与关键位置对应的不透明度值当前设置为 100%)。当页面滚动通过关键位置后,元素重新逐渐变得越来越透明,在通过 200 像素后淡出视图。
滚动运动的另一种常见用法是在幻灯片中将滚动交互与图像的显示结合起来。可以将“幻灯片”构件添加到页面,然后使用“滚动效果”面板的“幻灯片”选项卡应用滚动效果,例如每当页面滚动到特定位置时,幻灯片中自动显示新图像。
单击“幻灯片”选项卡(从左边数起的第三个选项卡),以查看此部分的设置。
滚动运动界面这一部分的常见用法是将“幻灯片”构件固定到页面上。通常,“幻灯片”构件将(使用“选项”菜单)配置为只显示较大的幻灯片容器,同时隐藏缩略图以及“下一张”和“上一张”按钮。
全屏幻灯片特别适合于此效果,尽管您选择添加的“幻灯片”构件类型最终取决于网站的设计。
按照以下步骤操作,向“幻灯片”构件应用滚动效果:
添加并配置固定的幻灯片后,就可以添加滚动效果了。
在“滚动效果”面板的“幻灯片”选项卡中,在选中“幻灯片”构件的情况下启用“幻灯片”复选框。
请注意,启用“幻灯片”选项后,“设计”视图中会有关键位置手柄添加到幻灯片。如果要更新关键滚动位置值,可以拖动手柄的左侧和右侧,或在“关键滚动位置”字段中输入数字。还可以单击“滚动效果”面板中的上下箭头以上调或下调数值。
“滚动效果”面板的“幻灯片”选项卡包含两个按钮:1 和 2,提供两种方法来控制幻灯片图像的播放。可以将幻灯片设置为自动播放,也可以将其设置为根据图像滚动渐进地播放图像。
第一种方法是设置所需的关键位置,然后启用“自动播放”复选框。
当页面滚动通过关键位置时(或者当访客单击指向锚点标记的链接并向下跳过关键位置时),幻灯片会开始播放。自动播放功能将继续显示图像,循环播放图像集,直至页面滚动回关键位置的上方或访客离开页面。
在上图的示例中,当页面滚动到 100 像素(或关键位置设置以下的任何位置)时,幻灯片开始播放。如果访客滚动回来,当页面滚动到关键位置以上(99 像素或更少)时,幻灯片会停止播放。
第二种控制“幻灯片”构件的方法是设置关键位置,然后启用“切换幻灯片间隔”单选按钮。在此工作流程中,还要在单选按钮下方的字段中设置像素数,以指示幻灯片中的图像将根据页面向下滚动的程度进行播放的频率。
例如,可以将“幻灯片”构件固定到较长的页面上,以便其在其他页面内容滚动时保持在固定的位置。通过设置“切换幻灯片间隔”数值,可以将幻灯片设置为:页面每向下滚动指定的像素数,切换至图像集中的下一张图像。
在上面的图像中,关键位置设置为 200。当页面从顶部滚动通过 200 像素后,每次再滚动 30 像素,幻灯片中就会显示图像序列中的下一张图像。
Adobe Edge Animate 是直观的设计工具,使用它可以创建基于 HTML5 的网站动画。通过 Edge Animate 中的界面,可以使用循环动态图形和符号生成构图。使用 Adobe Edge Animate 创建的动画可以导出为 OAM 文件,然后置入 Muse 网站的网页中。无需插件,使用 Edge Animate 创建的动画即可在浏览器中播放。
在 Adobe Edge Animate 中构建动画时,请将元素拖放到演示区域上,并使用时间轴操纵其移动。除了将元素直接添加到主时间轴外,还可以创建包含子元素的嵌套元素,它们使用自己的内部时间轴播放。要了解有关如何使用 Adobe Edge Animate 的更多信息,请参阅 Adobe Edge Animate 产品页面。另请观看 Adobe TV 上的 Adobe Edge Animate 视频教程。
要使用 Adobe Edge Animate 滚动运动功能,第一步应设计专门针对此目的的构图。可以将滚动效果应用于 OAM 文件,以影响置于主时间轴上的动画。通过策略性地设计动画,只让想要其在页面滚动时移动的项目位于主时间轴上(将所有其他项目置入嵌套符号时间轴上的动画内),可以创建交互式动画。当访客滚动页面时,滚动效果设置将仅控制主时间轴上的动画元素的播放。
有关创建专门添加到 Adobe Muse 网站的动画的信息,请参阅添加 Adobe Edge Animate 内容。
按照以下步骤使用“滚动效果”面板中的“幻灯片放映”选项卡:
在上面的图像中,关键位置设置为 50 像素。您可以拖放 T 型手柄或者在“关键位置”字段中输入其他值以进行调整。
设置关键位置后,您可以使用以下两个选项控制动画的播放:
Adobe Edge Animate 构图中从主时间轴嵌套或链接的任何动画对象不受滚动运动效果设置的影响。因此,无论访客以何种方式滚动页面,您都可以选择使用静态背景或一直移动的连续循环嵌套元素。
登录到您的帐户