Adobe Edge Animate1.0 --在Edge中创建一个Logo动画

Adobe Edge Animate1.0 --在Edge中创建一个Logo动画

 

版权声明:
本文版权属于 北京联友天下科技发展有限公司。
转载的时候请注明版权和原文地址。

用到的技术方法：

---径向擦除（旋转遮盖层，显示出被遮盖的logo）

---文本和文字下落时候的缓冲（Easing）

---循环（Looping）

 

一、创建径向擦除效果： 

1.创建一个新工程，保存。在属性面板中，改变Overflow属性为Hidden。 

2.设置参考线，如从标尺（Ruler）中拖动一条垂直参考线懂啊275px位置，拖动一条水平参考线到200px位置。

3.导入素材，并且参照以下截图将元素在舞台中放置，特别注意层叠关系。 

设置擦除效果：
1.选中pieShape图层，将它贴合参考线放置，如下图。

2. 选中工具栏中的变换工具（Transform），拖动pieShape的轴心点到左下角。 

3.复制pieShape三次，一共需要四个来完成动画。

4. 旋转每个pieShape，使它们将图片完全遮盖，也可以在属性面板中直接输入数值90,180,270来完成。

设置关键帧：

1.确保自动记录关键帧和自动创建动画为开启状态。

2.将播放头拖动到0.125秒处，使用Ctrl/Command + L添加一个标签，我们将它命名为“90”。这个时间点可以帮助我们准确设置动画的开始时间。在0.25s、0.375s、0.5s处做同样的操作，分别命名标签名为：90、180、270、360 。

3. 在0.125秒处（标签名为“90”）将pieShapeCopy图层的显示（Display）属性设置为关闭（off），在前一帧再添加一个关键帧并将显示属性设置为开启（on）。这种效果可以让观看者认为动画是连续的，无缝的。同样对其他几个pieShape复制的图层在不同时间点做修改。

4.在0.25秒-0.5秒处，将第一张pieShape图层的透明度设置为100%--0%，0.5秒处为0%。为图层添加旋转关键帧，在0秒处为0，在0.5秒处为360，这样pieShape图层将旋转360，出现遮盖的logo。使用Command/Ctrl + Enter/Return在浏览器中预览动画。

二、使用Easing创建掉落的动画

设置掉落的关键帧：

1.将播放头放置在0.5秒处，选中_07seedRight图层，点击属性面板中（Position and Size）位置Y的关键帧按钮，添加关键帧。

2.将播放头拖动到1.250秒处，再次点击添加关键帧。这时开始设置动画，将播放头拖回0.5秒处，拖动_07seedRight，将它拖动到舞台上方，这样在动画开始的时候就会出现向日葵种子从空中往下掉落的效果，而且开始的时候种子是不可见的。

3.现在添加Easing：在时间线上，点击向日葵种子图层的最顶级动画条，右击选择“Easing...”，然后从弹出设置框中选择Ease out-->Bounce。预览动画，你会看到我们已经对图层添加了一个有趣而自然的反弹动画效果。对图层_08seedLeft做同样的动画，开始时间定在0.750秒，结束于1.500秒处。

三、对文本也做Easing操作 

对文本设置关键帧：

1. 选中_05sunshineText图层，使用工具栏中的变换工具（Transform），将轴心点移动到文本的中心。对_04sunflowerText和_06seedsText图层也做同样的操作。

2.将播放头拖动至0.5秒处，选中_05sunshineText图层，点击缩放属性X（Scale X）和缩放属性Y（Scale Y）的关键帧按钮添加关键帧。设置为0%，拖动播放头至2.000秒处，将缩放属性都设置为100%。

3.同样右击图层的最顶级动画条，选中“Easing...”，选中“Ease out-->Elastic”。对其他两个文本图层也做同样的操作，将它们动画开始的时间点分别错开0.250秒。

预览动画，你会看到仅需点击几下鼠标，就可以实现自然而有趣的动画了。 

四、创建背景循环动画 

1. 选中_01outerPetals图层，将播放头拖动至0秒处，点击属性面板中旋转（Rotation）属性旁边的按钮添加关键帧。将旋转值改为-180度。

2.将播放头拖动至4秒处，再次点击按钮添加关键帧，将属性值设置为0。     

3.将播放头拖动至12秒处，添加关键帧并将旋转值设置为360度。这样从4秒-12秒处背景正好旋转一圈。

4.将播放头移动至4秒处，使用Ctrl/Command + L添加一个标签，命名为“Loop”。 

5.如下图，点击“打开时间线控制事件”（Open Timeline Actions），选择Complete（这样在动画播放结束的时候执行这段代码），从右侧面板中点击“Play”，左侧会自动出现相关代码，将默认的“1000”改为“Loop”。这样背景的旋转动画就会循环播放了。

6.右击图层顶级动画条，选择“Easing”，然后选择“Linear”。

使用Ctrl/Command + Enter/Return在浏览器中预览动画。

原文地址：

http://forums.adobe.com/docs/DOC-2536/ （原文附工程文件下载）

本文地址：

http://www.cnblogs.com/adobeedge/archive/2012/11/26/Adobe_Edge_Animate_Logo_Animation.html

翻译/注解：北京联友天下科技发展有限公司 肖伟民

转载于:https://www.cnblogs.com/adobeedge/archive/2012/11/26/Adobe_Edge_Animate_Logo_Animation.html