0

AdobeEdgeで製品サイトを作成しています。たとえば、マウスオーバー時に2秒のスパンで成長する必要があるサークルdivがあります。次に、テキストを表示する必要があります。マウスアウトすると、テキストが消えて、通常のサイズに逆アニメーションを実行する必要があります。円も、左上隅ではなく、中心から成長する必要があります。私はjqueryとcss3アニメーションでこれを何時間も試みてきましたが、満足のいく結果を得ることができませんでした。

4

2 に答える 2

2

これは、EdgeAnimateを使用すると非常に簡単です。

  1. サークル要素を作成します。
  2. 円の幅と高さのタイムラインでキーフレームを00:00に設定します。
  3. Q（変換ツール）を押すか、画面の左上にある矢印のすぐ右側にあるアイコンを選択します。
  4. 変換ツールは、原点に基づいて物事を拡大縮小します。原点は再配置可能ですが、選択したオブジェクトの中心に自動的に配置されます。
  5. タイムラインの02:00に移動します。
  6. 円のサイズを変更します。
  7. テキストのキーフレームを不透明度0に設定します。
  8. タイムラインを進めます。
  9. テキストの別のキーフレームを100％の不透明度に設定します。
  10. 円とテキストをdivにグループ化します。
  11. そのdivを右クリックし、「シンボルに変換」を押します。
  12. プレビューウィンドウの左上にある[ステージ]をクリックして、ステージに戻ります。
  13. アニメーションのトリガーに使用するオブジェクトを選択します。
  14. そのオブジェクトのアクションを開きます。
  15. 次のコードをマウスオーバーイベントに貼り付けます。varmySymbolObject=sym.getSymbol（ "シンボルの名前を挿入"）.play（）;
  16. 次に、mouseoutイベントを作成し、次のコードを貼り付けます。var mySymbolObject = sym.getSymbol（ "シンボルの名前を挿入"）.playReverse（）;

ここで、そのシンボルのタイムラインであるonMouseOverが順方向に再生され、そのシンボルのタイムラインであるonMouseOutが逆方向に再生されます。このように、アニメーションが途中でマウスアウトすると、元の場所から最初に戻ります。

于 2013-03-07T16:23:34.127 に答える
0

おそらく、円のdiv内にテキストdivをネストする場合は、mouseover/mouseoutではなくmouseenter/mouseleaveイベントも使用することをお勧めします。

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

于 2013-09-16T22:28:40.410 に答える