問題タブ [smil]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - SVG 要素のダイナミック アニメーションが IE で機能しない
jqueryでDOM要素を動的に追加しながら、SVG要素のアニメーションを実行しようとしています。これらの要素<body>を以下のように内部に追加すると、動作します。これの動作サンプルは
http://jsfiddle.net/bZdfH/2/です
動的に追加すると、IE ではアニメーションが開始されませんが、Chrome と FireFox では動作します。
これがワーキングサンプルのjsfiddleです。誰か助けてください??
svg - アニメーションの `fill="freeze"` の失敗
http://jsfiddle.net/emanuensis/NNvjA/で単純な SVG フィギュアの SMIL アニメーションを試みましmouseoverた、mouseoutイベントによって決定されます...そしてその場所からさらにmouseovers を待ちます。
残念ながら、(FF と Chrome の両方で) 現実はそうではありません。
ABA (A は任意の数のアップ、B はダウン、または vv) の形式では、2 番目の A に対して noop が返されます。
最初の Afreezes属性の値 最初の値 そのタイプ (アップまたはダウン) の最後のイベント (多くの場合、常に新しく復帰する可能性があります) で達成された値です。つまり、B はその位置から開始 (ホーム) します。
最初のAでもfreezes無添加です。つまり、シャトルの前にすべてのイベントが家に帰ります。
freezeおそらく、効果を短い期間強制する別の方法があります(つまり、最後までではありません。これは方向であり、大きさではありません)。
ここで面倒くさい
video - 次々と .m4v ビデオを再生します。QuickTime 用に SMIL を使用してビデオ プレイリストをプログラムする方法
.m4v ビデオ シーン ファイルが、自分のサーバー上の同一のフォルダー構造に編成されています。現在、ユーザーはこれらのビデオを 1 つずつ見ることができ、クリックして次または前のビデオに移動する必要があります。シーンの長さは 1 ～ 4 分です。エピソードに属するすべてのシーンを次々と再生するオプションを提供したいと考えています。
これは SMIL で実行できることを認識しています。これが最善の方法ですか？HTML やその他の言語で基本的なスクリプトを作成することができます。
ユーザーは「ビデオ全体を再生」というボタンをクリックできる必要があります。新しいウィンドウが開き、このエピソードの最初のムービーが開始されます。次のシーンにジャンプするには、次のボタンと前のボタンが必要です。
フォルダ構造は同一で、すべてのビデオ ファイルの名前は 01.m4v / 02.m4v であるため、ソリューションはできるだけ一般的なものにする必要があります。
エピソードの名前 (最初のフォルダー名の一部) を定義するだけで、スクリプトが残りを自動的に収集して計算するのが最善の方法です。
どんなアイデアでも大歓迎です。ありがとう。
svg - SVG アニメーションはアニメーションを再起動しません
パス要素に 2 つの SVG アニメーションが追加されています。マウスオーバーして発火させAnim1、次にマウスアウトしてAnim2発火させたいのですが、これを繰り返し可能にしたいのです。begin=X.mouseover、begin=X.mouseleaveおよびを使用してfill="freeze"います。
初めてでもうまく機能します。したがって、mouseoverAnim1が発火し、mouseleaveAnim2が発火します。しかし、それはAnim1マウスオーバーでのみ発火し、Anim2二度と発火することはありません（または、少なくともアニメーションを実行していることはわかりません）。
アニメーションは、属性をアニメーション化しているパスですd。Chrome と Opera で試しましたが、同じ結果でした。
読みやすくするために、コード ブロックから実際のパスを削除しました。
beginElement&も使用してみましendElementたが、同じ結果が得られました。
見てくれてありがとう..
javascript - SMILとは？そして、アーキテクチャにおけるその位置は何ですか?
SMILとは正確には何ですか？なぜそれが必要なのか、どのようにJavaScriptアプリケーションに統合できるのかを意味します。アプリケーション アーキテクチャでは、その位置は何ですか? その重要性は何ですか？
animation - SVG アニメーションが正しく連鎖しない
次のsvgがあり、形状をアニメーション化しようとしています。
私が直面している問題は、最初のアニメーション (#close) が開始時に一度だけ発生し、その後二度と発生しないことです。2 番目のアニメーション (#open) は通常どおり繰り返されます。
これは、私のコードと、私が元にしたより単純なアニメーションを含むコードペンです（正しく動作します）
http://codepen.io/dogoku/pen/yxKjs
助けてくれてありがとう
html - SVG/SMIL リフロー/再描画のパフォーマンスへの影響は?
過去に、DOM 操作を含め、javascript でかなりの作業を行ってきました。そこから、リフロー/再描画が場合によっては大きなパフォーマンスの問題になる可能性があり、一般的に最小限に制限する必要があることを学びました. たとえば、div のグループを追加する場合は、1 つずつ追加するのではなく、一度に追加する必要があります (DOM の外側の div に追加してから追加します)。同じことが再描画にも当てはまり、要素の CSS プロパティを変更することでトリガーできます。私は再描画についてあまり調べたことがないことを認めなければならないので、最後の部分については間違っているかもしれません.
これは SVG にも当てはまりますか? また、異なる SVG 要素に違いはありますか? たとえば、アニメーション要素は新しい SVG 要素ではなく、プロパティに似ているため、リフローを作成しないことは理にかなっています。
SVG の再描画についてはよくわかりませんが、CSS/HTML の場合と同じように存在しますか? すべての SMIL アニメーションは既にフレームを作成しているため、「再描画」などを行っても違いはありません。新しいフレームはとにかくレンダリングされるためです。
SMIL の内部動作をより深く理解している人で、これらのことを明確にしてくれる人はいますか?