Adobe Edge - 成长圈动画

Question

我正在Adobe Edge制作产品网站。我有一个圆形div，需要在鼠标悬停时延长2秒钟。然后一个文本必须出现在其中。当mouseout时，文本必须消失并将反向动画恢复到正常大小。圆圈也要从中心开始，而不是从左上角开始。我一直试图用jquery和css3动画做几个小时，但未能得到令人满意的结果。

Answer 1

边缘动画非常容易。

1. 制作你的圆圈元素。
2. 在时间轴上的00:00为圆宽和高度设置关键帧。
3. 按Q（变换工具）或选择箭头右侧屏幕左上角的图标。
4. 变换工具根据原点进行缩放，原点可重新定位但自动位于所选对象的中心。
5. 在时间线上转到02:00。
6. 调整您的圈子。
7. 为文字设置关键帧为0不透明度。
8. 在时间表上前进。
9. 以100％不透明度为文本设置另一个关键帧。
10. 将圆圈和文字分组为div。
11. 右键单击该div并按“转换为符号”。
12. 点击预览窗口左上角的“舞台”，返回舞台。
13. 选择要用于触发动画的对象。
14. 打开该对象的操作。
15. 将以下代码粘贴到mouseover事件中：var mySymbolObject = sym.getSymbol（“插入您的符号名称”）。play（）;
16. 现在制作一个mouseout事件并粘贴此代码：var mySymbolObject = sym.getSymbol（“插入你的符号名称”）。playReverse（）;

现在应该发生的是onMouseOver，该符号的时间轴向前播放，而onMouseOut，该符号的时间轴反向播放。这样，如果动画是一半并且它们鼠标移出，它将从它返回到开头的位置反转。

Answer 2

如果你将文本div嵌入圈div中，你可能也想使用mouseenter / mouseleave事件而不是mouseover / mouseout。

http://www.bennadel.com/blog/1805-jQuery-Events-MouseOver-MouseOut-vs-MouseEnter-MouseLeave.html