animation - Adobe Edge - 成长圈动画

Question

我正在 Adob​​e Edge 中制作产品网站。我有一个圆形 div，需要在鼠标悬停时在 2 秒内增长。然后必须出现一个文本。当鼠标移出时，文本必须消失并做反向动画回到正常大小。圆圈也必须从它的中心开始，而不是从左上角开始。我一直在尝试使用 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. 将以下代码粘贴到鼠标悬停事件中： var mySymbolObject = sym.getSymbol("INSERT THE NAME OF YOUR SYMBOL").play();
16. 现在创建一个 mouseout 事件并粘贴以下代码： var mySymbolObject = sym.getSymbol("INSERT THE NAME OF YOUR SYMBOL").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