视差是最近流行的一种站点视觉效果，适用于迷你站点或小型动画。一般来说，要用JavaScript和CSS手工编码，才能达到视差滚动的效果。本文介绍了如何使用Edge Animate在十分钟内实现类似的效果，无需编码和压力。以上动画使用的图片资源是作者厚颜无耻地从一个视差滚动效果的JS库：spritely.net借来的。我真的很感激。
准备下载AdobeEdge Animate制作工具在本教程发布的时候，Edge Animate版本为1.5，可以在Adobe Cloud Creative Platform上免费下载。只需要在注册地址注册就可以登录下载了。
项目源文件Edge Animate Tutorial 4.zip本教程中使用的材料可以在项目解压缩后的images目录中找到，包括：
bird-forward-back . png cloud . pnghhill-with-windmill . png sky 1 . png hl2 . png教程本教程不会一步步介绍如何实现上述动画。上述动画中使用的一些技术在之前的教程中也有介绍。
1.滚动背景生成元素在上面的视差效果动画中，背景和前景是不断滚动的。这是通过处理图片来完成的。打开边动画，并创建一个新的工作。快捷键Cmd I/Ctrl I导入背景图片hill2.png。在舞台上选中图片后，快捷键Cmd Y/Ctrl Y将其转换为符号，命名为symHillBack。如图：“symHill”可以在舞台右侧库面板下的符号子面板中看到。现在，您可以在舞台上删除symHill实例。让我们开始编辑symHill组件。
潘图片希拉
在符号子面板中，选择symHill，右键单击Edit进入组件编辑状态。我们预计背景山将在15秒内滚出舞台到屏幕左侧。状态如下：使用之前教程介绍的方法(比如通过改变X坐标设置关键帧，或者使用自动关键帧生成模式，或者大头针按钮)可以快速达到这个效果。
首先，将舞台上的图片元素命名为hillA。将播放头移动到时间轴的开头，并在舞台右侧面板的“位置和大小”子面板中设置其x=0和y=0。然后，单击X属性的菱形按钮，将hillA的关键帧设置为0:00秒，left=0。如下图：关键帧左=0
激活自动关键帧模式和自动过渡模式，并将播放头移动到0:15秒。在舞台上选中希拉，按住shift键，用鼠标将希拉平移出舞台(x=-1110)。此时，时间轴上会自动生成关键帧和补间(即过渡)。第二张图是：hillB。但从操作中可以看出，当背景山向左滚出舞台时，舞台就会空出来，我们希望整个过程是一个连续的滚动。为了达到这个效果，我们用了两个希尔的例子。在symHill组件的编辑状态下，将hill2.png的图片从“库”面板的“资源”子面板拖放到舞台上。现在舞台上应该有两个hill2.png像素，一个是以前的hillA，我们把新引进的像素命名为hillB。两个图片元素来自同一个源，浏览器只会请求它们一次。我们希望当hillA向左移动，导致舞台空缺时，hillB可以同步跟随，以补充舞台的空缺部分，从而产生连续的效果。
首先，将播放头移动到时间轴的开头，并确保hillB的位置靠近舞台的右侧(550，0)。调整hillB初始位置时，请注意避免自动生成关键帧属性。(注：本例中舞台宽度为0)这里我们要保证hillB的滚动效果(速度和方向)和hillA的完全一样。Edge Animate提供的一个强大功能是，可以在不同对象之间复制和粘贴时间轴效果。这个功能可以用来非常快速地完成这个任务。在时间轴上选择希拉的特效，通过ctrl C/cmd C复制特效或者从右键弹出菜单中复制。复制特效
接下来，在时间轴上向后移动播放头，直到舞台hillA图片的右边缘移动到舞台的右边缘，即left=-560。在这个时间点(00:07.572)之后，hillA的移动会导致舞台被腾空，此时hillB需要开始移入。确保播放头在这个时间点，选择hillB，在时间轴上点击右键弹出菜单，选择“粘贴特效-从位置粘贴转场”，就是从这个时间点开始将之前复制的hillA特效粘贴到hillB。如下图：粘贴效果如下图所示：
但是，我们不需要hillB来完成所有的动画。HillB的任务只是在hillA运动的时候补充舞台空置时的特效。因此，将播放头移到希拉特效的结尾，即00:153:000位置。在这里，希尔布的工作已经完成。选择hillB，当播放头位于00:15336000(即hillA时间轴效果的尾部位置)时，在“位置和大小”子面板中，单击X属性的菱形按钮，生成带有hillB的X属性的关键帧。下图：hillB左侧属性的关键帧
现在已经不需要00:15:00时间点的hillB特效了。在时间轴上，选中hillB元素左侧属性栏中的这部分特效，删除。请确保只删除左边特效的这一部分，而不是hillB的整体特效。删除后，symHill组件的特效如下：symHill时间轴特效
现在，向symHill的Complete事件添加一个脚本，使其循环播放。symHill的时间线事件添加的脚本如下：完成事件现在可以运行动画并查看效果。二。制作前景特效现在，背景山的滚动已经完成。我们只需要用类似的方法导入一个新的前景图像(hill-with-windmill.png)，用不同的步频(比背景山略快，比如10秒)做一个新的连续滚动组件。这部分工作就交给你了。(停！这是不是有点太正宗了？说要做视差教程，真的不做视差了？)复制组件symHill
复制符号当然，我们不需要从0开始做前景效果。现在symHill已经完成了，当然我们的前景效应会在完成的工作基础上继续下去。在符号子面板中，选择symHill，然后从右键菜单中选择Duplicate来复制一个新组件，我们将其命名为symFrontScene。编辑symFrontScene现在让我们编辑symFrontScene。在符号子面板中，选择symFrontScene的右键菜单Edit。
首先将symFrontScene的舞台大小修改为w=640px，h=90px。如下。在symFrontScene的前景组件中，我们将使用的图片是bird-forward-back.png。因为是前景图，我们把它的大小和高度设置得比背景山低，以产生层次感。当高度为90px时，其宽度应为640px。调整组件阶段大小
接下来，我们将进口前景图片bird-forward-back.png。在阶段中，ctrl-I/cmd I导入图片。导入后，图片将出现在舞台上和库的面板资源中。我们在舞台上删除这个新导入的图片。它将保留在“资源”面板列表中。接下来，我们需要用bird-forward-back.png替换symFrontScene组件中的图片元素。在舞台中选择希拉，并在“图像”面板中将图像源更改为bird-forward-back.png。同样，将hillB的图像替换为bird-forward-back.png的修改元素图像源。
换上新图后，可以看到原图的大小和比例是一样的。我们需要手工修改它。确保自动关键帧模式和自动过渡模式已关闭。选择hillA和hillB，将它们的高度改为90px，宽度改为640px。现在，如果你移动播放头来查看动画效果，你会看到当hillA的右边缘由于大小变化而移动到舞台时，hillB没有及时跟随。这是因为hillA和hillB的宽度小于背景山的宽度。让我们调整动画来解决这个问题。选择hillA并移动播放头，使图片的右边缘刚好到达舞台的右边缘。可以用鼠标调整舞台下的时间标记，实现精确调整。调整播放头
在最后一步中找到的时间，hillB应该跟随进入阶段。因此，我们在时间轴上选择hillB效果，用鼠标拖动该效果，使其起始位置位于上一步找到的时间点。拖动特效
现在hillB已经可以同步跟随hillA进入舞台，向左平移。我们需要删除希拉无用的特效。将播放头移动到hillB特效的结尾，hillB的左边缘与舞台的左侧重合。在时间轴上选择hillA，通过“位置和大小”面板上的X属性菱形按钮为hillA添加关键帧属性。如下图。截止日期关键帧
然后，删除关键帧后希拉左属性的特效。结果如下：
最后，我们需要加快symFrontScene的动画播放速度，它已经在背景中造成了视差效果。在时间轴上，按住shift键，用鼠标同时选中hillA和hillB。然后将时间轴上hillA或hillB效果最右边的菱形符号向左拖动，以减少动画完成所需的帧数，即时间。例如，拖到0:06秒。至此，symFrontScene已经完成。三。视差完成，返回主舞台，播放头移动到0:00。将symFrontScene从“元件”子面板拖到舞台上。将其图片的下边缘与舞台中背景山组件的下边缘对齐。我们已经完成了视差动画。运行ctrl enter/cmd enter查看效果。
暂无讨论，说说你的看法吧
