Adobe Edge Animate –地球自转动画的实现，类似flash遮罩层的效果

Adobe Edge Animate –地球自转动画的实现，类似flash遮罩层的效果

版权声明:

本文版权属于 北京联友天下科技发展有限公司。

转载的时候请注明版权和原文地址。

目前Edge的功能尚在不断完善中，没有类似flash遮罩层和引导层这些做动画十分好用的功能，但是依靠目前Edge已有的功能，我们还是可以在一定程度上实现遮罩层的效果，以下即为一个实现遮罩层效果的终极小例子：地球自转动画。

成果图：

 

众位网友一定好奇，Edge中并没这种功能啊，怎么实现的呢，请看以下讲解：

一、先找到一张符合要求的世界地图

 

地图要求：要有接近两张世界地图长度，这样才可以实现自转一周的动画，循环起来就可以实现无缝对接，就像地球一直在转一样！

二、制作遮罩层

1、  首先，将地图图片素材导入Edge素材库中，并将图片放置在舞台

 

2、  使用椭圆工具画一个正圆形

 

3、  接下来就是开始制作遮罩层的步骤了，首先，在属性面板中的颜色color选项，如下图

 

点第一个颜色选项，拖动最右侧的透明度滑块，将透明度将为0

 

点击第三个颜色边框选项，将模式改为solid，边框宽度改到最大值

 

这时的效果变成了这样：

 

4、  接下来的步骤就很明了了，使用矩形工具，画出四个矩形，分别把圆形周围的空白处遮盖，效果如下

      

三、制作动画

制作地图图片的位移动画，在0秒处，将地图最左侧显示在遮罩层中

 

在5秒处，将地图水平移动到左侧，注意：5秒处显示的地图要跟0秒处的一致

 

在5秒时间轴处添加触发事件，sym.play(0);，让动画从头开始播放。这样就实现了地球自转的循环动画了。

 

原文地址：http://www.cnblogs.com/adobeedge/p/Adobe_Edge_Cover.html