👩🏻‍⚕️ 🧑🏼‍🤝‍🧑🏼 🛰️ SVGアニメーションのすべて 🐂 🛁 👩🏾‍🤝‍👩🏽

この記事では、SVGグラフィックス、SVGアニメーション（パスを含む）、問題と解決策、および多くのSVGが存在するさまざまな落とし穴の取り扱いの複雑さを強調したいと思います。この記事を詳細なガイドとして位置付けます。

プラグイン、ライブラリなどはありません。純粋なSVGについてのみ説明します。

使用する唯一のツールはAdobe Illustratorです。

まえがき

それはすべて退屈な講義から始まり、少なくとも何かで自分自身を楽しませることを期待して、私はSVGグラフィックス、すなわちアニメーションを勉強することにしました。驚いたことに、インターネットにはほとんど情報がありませんでした。どこでも基本を説明する重複した情報がありましたが、一般的にアニメーションについては、完全に同一の情報を持つ2-3リンクの強さから、サラスウェイダンによる記事A Guide to SVG Animations（SMIL）の翻訳です。

彼女の記事はすべてについて語っていますが、表面的なものです。 それにもかかわらず、私はあなたがそれに慣れることを強くお勧めします。 *翻訳へのリンク*

次の数週間は、さまざまなソースから情報を1つずつ収集することに費やしました。これらの検索の結果はこの記事です。

Illustratorからの適切なSVGエクスポート

このセクションでは、Adobe Illustratorの機能と問題に焦点を当てているため、Illustratorを使用していない場合は、この部分をスキップできます。

アニメーション用のドキュメントの準備は非常に重要な段階であり、これを怠ると非常に不快な結果が生じる可能性があります。 Illustratorでより良く描画する方法を教えるために、私はしません。私が言う唯一のことは、図形を描くときは、値に従う必要があるということです。小数点の後に数字が1つだけあることが望ましく、整数であることが望ましいです。この規則に従う必要はありませんが、ファイルサイズを縮小し、アニメーションを単純化し、情報量を視覚的に削減します。ご覧ください

<path d="M 17.7 29 C 28.2 12.9 47 5.6 62.8 10.4 c 28.2 8.5 30 50.5 24.8 53.1 c -2.6 1.3 -10.4 -6.1 -29.2 -34.6"/> <path d="M 17.651 28.956 c 10.56 -16.04 29.351 -23.359 45.12 -18.589 c 28.151 8.516 29.957 50.5 24.841 53.063 c -2.631 1.318 -10.381 -6.148 -29.235 -34.643"/>

例では、同じ曲線ですが、最初の場合は小数点の1桁、2番目の場合は3桁です。この曲線には4つのポイントしかなく、2番目の例は1番目の例よりも1/3長いです。 20ポイントの曲線がどれくらいのスペースを取るか想像してみてください。

ワイヤフレームを描いた後、画像をSVGファイルとして保存する必要があります。これを行うには、[名前を付けて保存]または[名前を付けてエクスポート]の2つの方法があります。しかし、どちらを選択するのですか？あなたが私を信頼しているなら-「名前を付けて保存」を使用してください。理由を知りたい場合は、ネタバレを展開してください。

なぜですか？

一見したところ、違いはありません。最終的に、イメージを含む.svgファイルを取得するからです。ただし、エクスポート設定段階でも違いは始まります。

すべてのパラメーターを詳細に説明しても意味がありません。Illustratorは「説明」セクションで非常にうまく説明しています。

ご覧のとおり、「保存」には「エクスポート」よりも多くの設定があり、誰かにとってはエクスポートを拒否する正当な理由になりますが、続行します。

ブラウザで両方の方法で保存されたファイルを開いても、違いはわかりません。ただし、現時点では、外観ではなく塗りつぶしに関心があるため、同じことを行いますが、テキストエディターを使用します。ここで、違いがより明確になります。私は、あなた自身が結論を見て、描くことをお勧めします。ファイルには何も変更を加えず、そのまま全体をコピーしました。

輸出する

 <svg id="_1" data-name=" 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51 51"> <defs> <style> .cls-1 { fill: none; stroke: #4ec931; stroke-miterlimit: 10; } .cls-2 { fill: #4ec931; } .cls-3 { fill: #fff; } </style> </defs> <title>my_icon_E</title> <circle class="cls-1" cx="25.5" cy="25.5" r="20"/> <circle class="cls-1" cx="25.5" cy="25.5" r="25"/> <g id="_2" data-name=" 2"> <circle class="cls-2" cx="25.5" cy="25.5" r="15"/> <polygon class="cls-3" points="25.5 34.8 34 20.3 17 20.3 25.5 34.8"/> </g> </svg>

保存する

 <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 23.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" id="_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve"> <style type="text/css"> .st0{fill:none;stroke:#4EC931;stroke-miterlimit:10;} .st1{fill:#4EC931;} .st2{fill:#FFFFFF;} </style> <circle class="st0" cx="50" cy="50" r="20"/> <circle class="st0" cx="50" cy="50" r="25"/> <g id="_2"> <circle class="st1" cx="50" cy="50" r="15"/> <polygon class="st2" points="50,59.3 58.5,44.8 41.5,44.8 "/> </g> </svg>

CSSクラスと命名の一般的な命名の違いに加えて、一部の人は上品と考えるかもしれませんが、他にも問題があります。「エクスポート」すると、画像全体が2倍に削減されました。これは、図形のサイズとviewBox属性によって判断できます。これはベクトルグラフィックなので、悪化することはありませんでしたが、それでも不快です。「保存」は、Illustratorで指定した寸法を残しました。

しかし、これらはすべて「輸出」することができる豚の種類と比較して花です。具体的には、これらの例にはこの問題はありません。おそらく、イメージが非常に単純だからです。しかし、他の作品をエクスポートしたときに、それに遭遇しました。彼女のスクリーンショットはこちら

ファイルサイズが十分に大きいので、問題の部分のみを提供します

 <g id="-21" data-name=""> <path class="cls-9" d="M477.94,456.75a1.83,1.83,0,0,1-.9,1.36l-4.91,3.1a7.29,7.29,0,0,1-7.5,0l-16.29-9.72a1.85,1.85,0,0,1-.92-1.56v-3.68a1.85,1.85,0,0,0,.92,1.56l.38.23,15.91,9.49a7.29,7.29,0,0,0,7.5,0l4.53-2.86.38-.23a1.87,1.87,0,0,0,.9-1.36Z" transform="translate(-5.5 -5.5)"/> <path class="cls-10" d="M477,451.19l-16.38-9.5a7.28,7.28,0,0,0-7.32,0l-5,2.9a1.88,1.88,0,0,0-.94,1.51v.17a1.85,1.85,0,0,0,.92,1.56l.38.23,15.91,9.49a7.29,7.29,0,0,0,7.5,0l4.53-2.86.38-.23a1.87,1.87,0,0,0,.9-1.36v-.51A1.88,1.88,0,0,0,477,451.19Z" transform="translate(-5.5 -5.5)"/> </g> <g id="-22" data-name=""> <path class="cls-9" d="M525.37,557.86a1.85,1.85,0,0,1-.9,1.36l-33.22,19.64a7.29,7.29,0,0,1-7.5,0l-16.29-9.72a1.85,1.85,0,0,1-.92-1.56v-3.68a1.85,1.85,0,0,0,.92,1.56l.38.23,15.91,9.49a7.29,7.29,0,0,0,7.5,0l32.84-19.41.38-.23a1.83,1.83,0,0,0,.9-1.36Z" transform="translate(-5.5 -5.5)"/> <path class="cls-10" d="M524.45,552.3l-16.38-9.51a7.31,7.31,0,0,0-7.32,0l-33.27,19.44a1.89,1.89,0,0,0-.94,1.51v.17a1.85,1.85,0,0,0,.92,1.56l.38.23,15.91,9.49a7.29,7.29,0,0,0,7.5,0l32.84-19.41.38-.23a1.83,1.83,0,0,0,.9-1.36v-.5A1.86,1.86,0,0,0,524.45,552.3Z" transform="translate(-5.5 -5.5)"/> </g>

何か異常なことに気づきましたか？ トランスフォーム属性を尋ねると、その通りです。ラズベリー全体を台無しにするのは彼です。画像を「エクスポート」すると、Illustratorはその画像をすべての<path>要素に割り当てます。ただし、このような問題は「保存」では見られません。

あなたがまだ私のdigりを理解していないなら、私は説明します：あなたがそのような要素の動きをアニメーション化したいなら、それは横にシフトします。この場合、両方の軸で5.5です。これは、移動アニメーションによって変換属性が変更され、過去のすべての値がリセットされるためです。もちろん、これは回避することができますが、後でその結果を修正するよりも問題を回避する方がましです...

現時点では、この問題に気づいただけですが、これが唯一の問題ではありません。状況を賢明に評価すると、すべてに「名前を付けて保存」が勝つことがわかります。そのため、使用をお勧めします。

SVGドキュメントをHTMLにインポートする方法

アニメーションを直接開始する前に、ページにSVGを埋め込む方法について説明します。各メソッドには、アニメーションに直接影響する独自の「機能」があります。そして、あなたがそれらについて話さないならば、記事は不完全です。

インタラクティブアニメーションを備えた既製のSVGが既にあり、このドキュメントをサイトに埋め込むことが残っているとします。これを行う方法は？

オプション1は、SVGも画像であり、標準のHTMLツールを使用してインポートできることを思い出してください。ドキュメントへのリンクを含む<img>タグを作成できます

 <img src="Hello_SVG.svg" />

または、SVGを背景画像として設定します

 #box { background-image: url("Hello_again.svg"); }

この方法の主な欠点は、画像の分離です。博物館の展示物としてのSVG-見ることができ、触ることはできません。内部のアニメーションは機能しますが、インタラクティブ性についての話はありません。たとえば、ユーザーのクリックによってアニメーションがトリガーされる場合、またはSVGドキュメントのコンテンツを動的に変更する必要がある場合、この方法は適していません。

オプション番号2は、 <object>または<embed>タグを使用してSVGからオブジェクトを作成することです。 <iframe>を使用してフレームを作成することもできますが、この方法の使用はお勧めしません。このオプションが正しく表示されるように、すべてのブラウザーに松葉杖が必要です

 <object data="My_SVG.svg" type="image/svg+xml"></object> <embed src="My_SVG.svg" type="image/svg+xml" /> <iframe src="My_SVG.svg"></iframe>

ここの方が良いです。アニメーションは、SVGドキュメント内で宣言され、コンテンツが外部JavaScriptで利用可能な場合にのみ、インタラクティブになる機会を得ます。それでも<object>と<iframe>は、突然イメージがロードされない場合にスタブを表示できます。

オプション番号3は、SVGドキュメントのコンテンツをHTMLに直接貼り付けることです。はい、できます。 SVGサポートはHTML5標準に登場しました。 SVGは本質的にページ自体の一部であるため、SVGへのアクセスはどこにでもあります。アニメーションと要素スタイルは、SVG内と外部ファイルの両方で宣言できます。欠点は、そのような画像がページとは別にキャッシュされないことです

 <body> ... <svg> <!--  --> </svg> </body>

SVGアニメーション

SVG要素をアニメーション化するには、主に2つの方法があります。

CSSアニメーション
SVGに埋め込まれたSMILアニメーション（実際、SMILに基づいて機能を拡張するSVGアニメーションです）

個人的には、それらを「外部」と「内部」のアニメーションとして分離しています。この分割は条件付きですが、それでも機能的な違いがあります。一般的な違いについて説明すると、CSS-ブラウザーのサポートが向上します。 SMIL-優れた機能があります。どちらを使用するのが良いかを言うのは難しいそれらは多くの点で非常に似ています。選択はタスクに依存するため、CSSの代わりにSMILを使用する主な理由を説明します。

SMIL-必要な場合：

CSSでできなかったこと（サポートされていない属性のアニメーション化など）
アニメーションをより正確に制御できます。
パスモーフィングを行います（パスタグの属性dのアニメーション）
アニメーションを同期する
インタラクティブなアニメーションを作成する

SMILをインタラクティブアニメーションに使用すべきだと書いた場合、これはCSSで同じことができないという意味ではありません。 Simply SMILは、より機能的で洗練されたツールです。そして、それが必要なときだけそれが使われるべきである理由です。アニメーションが単純で、CSSを省くことができる場合は、これを行う必要があります。

CSSアニメーション

ここに新しいものはありません。 HTMLの場合と同じ方法で、SVG要素をアニメーション化できます。すべてのアニメーションは@keyframesを使用して作成されます。 CSSアニメーションは別のトピックであるため、この点については詳しく説明しません。ネットワークには、このトピックに関するドキュメントとマニュアルがたくさんあります。そこに記載されていることはすべてSVGに当てはまりますが、いくつか例を示します。

SVGドキュメントには内部スタイルシートがあるため、アニメーションを記述します

 <svg> <style> <!--   --> </style> <!--   SVG  --> </svg>

SVG属性のアニメーションは、CSS属性と同じくらい簡単です

 @keyframes reduce_radius { from { r: 10; } to { r: 3; } } @keyframes change_fill { 0% { fill: #49549E; } 75% { fill: #1bceb1; } 100% { fill: #1bce4f; } }

from-toコンストラクトだけでなく、パーセンテージとして値を設定できます

次に、作成したアニメーションを目的の要素に単純に適用します

 .circle { animation: change_fill 1s, popup 2s; }

上記で説明したことはすべて静的なアニメーションであり、双方向性の匂いはありません。しかし、本当にしたい場合はどうでしょうか？まあ、まだインタラクティブに、CSSで何かをすることができます。たとえば、推移をホバー擬似クラスと組み合わせて使用する場合

 .circle { fill: #49549E; transition: .3s; } .circle:hover { fill: #1bceb1; }

アイテムにカーソルを合わせると、300msの間色が青から青に変わります

属性のアニメーションと小さなインタラクティブ機能-CSSアニメーションの機能が終了する場所です。しかし、ほとんどのタスクは何らかの属性をアニメーション化することになるため、この機能で十分です。ほとんどすべてのSVG属性をアニメーション化できます。そして、「ほぼすべて」を書くとき、ランダムな属性を選択し、それがアニメーション化されていないことが判明した場合、あなたは非常に幸運であることを意味します。

SMILアニメーション

SMILアニメーションは世界と同じくらい古く、徐々に消滅しつつあり、ブラウザのサポートはまともですが、CSSアニメーションよりはまだ劣っていますが、SMILがまだ魅力的である理由はあります。CSSではできないからです。

SMILについては、これについてはほとんど説明しませんが、多くの落とし穴があるため、詳しく説明します。そして、このトピックはCSSよりも人気がありません。アニメーションの主なタグは、 <animate> 、 <set> 、 <animateTransform> 、 <animateMotion>です。

<アニメーション>

重砲から始めましょう。 <animate> -任意の属性をアニメーション化するために使用され、メインツールです。残りのタグは高度に専門化されていますが、最初に最初のものがあります。

要素にアニメーションを適用する方法は？

アニメーションを適用する要素を指定するには、2つの方法があります。

要素内にタグを配置します。このメソッドを使用すると、オブジェクト内にアニメーションをカプセル化できるため、コードを読みやすくなります

 <circle ...> <animate .../> </circle>

この場合、アニメーションはcircle要素に適用されます。

アイテムへのリンクを渡します。すべてのアニメーションを1か所で収集する場合に便利です

 <svg xmlns:xlink="http://www.w3.org/1999/xlink"> <circle id="blue" .../> ... <animate xlink:href="#blue" .../> </svg>

ここではxlink：href属性が使用されます。この属性では、アニメーションを適用する要素のIDを指定します。 このメソッドが機能するためには、 xlink名前空間を定義する必要があります。 これは<svg>タグで行われます。

SVG 2では、 xlink：href属性は非推奨です。仕様では、代わりにhrefを使用することを推奨しています。これは、 xlink名前空間を必要としません。

 <circle id="blue" .../> ... <animate href="#blue" .../>

しかし、ここでは、すべてがそれほどスムーズではありません-hrefは Safariでサポートされていません。膠着状態になり、一方の属性は古く、他方は部分的にサポートされていません。だから、どの方法を使用するか、誰もが自分で決める。

CSSセレクターとの類似点に気づいた人のために：残念ですが、クラスごとに要素にアクセスすることはできません

 <circle class="blue_circle" .../> <animate href=".blue_circle" .../>

これは機能しません！

アニメーションの属性を指定する方法は？

これにはattributeNameがあります。値は、アニメーション化する属性の名前です。

 <circle r="25" ...> <animate attributeName="r" ... /> </circle>

attributeNameにrを指定することにより、円の半径をアニメーション化することになると言います。

attributeTypeとは何ですか、なぜ必要ないのですか？

役に立たないから

理論的には、CSSとXMLの属性名が一致する場合、問題が発生する可能性があります。この競合を解決するには、ネームスペースを明示的に指定する必要があります。 ~~椅子に~~は2つの方法があります。プレフィックスを指定するか、 attributeTypeを使用します。プレフィックスから始めましょう。

どこでも彼らは次のようなものを書きます：

属性にXMLNSプレフィックスを指定して、名前空間を明示的に指定できます。

このメソッドは、例のない場合と渡す場合に説明されています。だから私は伝統を変えません。（ここで停止し、悪夢としてのプレフィックスを忘れて、 attributeTypeに行くことをお勧めします）

「私はマゾです」

このネタバレの内容はかなり面白く、本質的に探索的です。 プレフィックスが機能しないという事実以外の有用な情報はありません。ここではわかりません。

まず、より正確な定義、そしてご存じのように、仕様と標準で最も正確な定義を見つける必要があります。

人生をあきらめる方法に関する短いガイド

2019年3月14日のSVGアニメーションの仕様を公開します
attributeNameセクションでは、（oh horror）2001のSMIL Animation標準を継承していることがわかります。
attributeNameの定義を読み取ります
利益！

定義の翻訳は次のようになります。

「ターゲット属性の名前を定義します。 XMLNSプレフィックスを使用して、属性のXML名前空間を指定できます。 プレフィックスは、アニメーション要素のスコープで解釈されます。

うーん、それは簡単になりませんでした。このような定義を読んだ後、XMLを知らない人は何を思い浮かべますか？そうだね。私と同じ。

文字通りそれを取って、このように見えるべきだと思った

 <animate attributeName="xmlns:* *"/>

この記事を書く前に、この方法を考えて安全に忘れていました。問題は、実際にテストすることにしたときに始まりました。これが機能しないと言っても、誰も驚かないと思います。検索に数時間失敗した後、「xmlnsプレフィックス」をグーグルで検索しましたが、驚いたことに、xmlnsはプレフィックス自体ではなく、プレフィックスを使用した名前空間定義の構築に集中しました。

次のようになります。

 <** xmlns:**="* url *" ...>

その後、私は何も理解していないことに気づきました...最初は...そして今、原則としても

さらに2時間後、 XMLの名前空間で探していたものがようやく見つかりました。元の例を次に示します。

 <x xmlns:n1="http://www.w3.org" xmlns="http://www.w3.org" > <good a="1" n1:a="2" /> </x>

しかし、あなたはおかしなことは何を知っていますか？それでも動作しません。すべては本に従って行われますが

 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:n1="http://www.w3.org/2000/svg"> <circle id="www" n1:r="10" .../> <animate href="#www" attributeName="n1:r" .../> </svg>

すべてがルールに従って行われるため、エラーは発生せず、エラーは発生しませんが、問題は半径のない円を取得することです。単にr属性を書き込まない場合も同じ結果になります。

エピローグ ：SVGはプレフィックス属性を無視します。その結果、SMILが実際にプレフィックス付きの属性をアニメーション化しても、このアニメーションの結果は表示されません。

私の弁護では、SVG、つまりそのアニメーションのみを扱ったため、XMLの第一人者は松明と熊手を捨ててしまうと言います。 このメソッドを機能させる方法を知っているなら、コメントを歓迎します

アニメーション化された属性が属するものを明示的に示すために、attributeTypeが使用されます。 CSS 、 XML 、 autoの 3つの値を取ります。 attributeTypeが明示的に指定されていない場合、 autoが使用されます。この場合、最初にCSSプロパティがチェックされ、一致するものがない場合、ターゲット要素の属性がチェックされます。この例では、CSSプロパティを正確にアニメーション化することを示しています

 <animate attributeType="CSS" attributeName="opacity" .../>

さて、 attributeTypeを使用すると、松葉杖を使わずに、アニメーション化された属性が何に属しているかを簡単に示すことができるため、存在しない「問題」を解決できます。

意外とそうですか？この章の冒頭で述べたように、SMILは消滅しつつあります。これは、アニメーションがCSSレールに変換されるためです。ほとんどの重複する属性は、互いに完全に同一です。 CSSまたはSMIL属性が属するかどうかは関係ありません-結果は同じになります。また、デフォルトの自動値と組み合わせて、 attributeTypeを明示的に定義する必要はありません。

興味深い事実の瞬間： attributeTypeは SVGではサポートされていません。 彼はどこから来たの？ 彼は、SVGアニメーションのベースとなっているSMIL Animationから来ました。 また、 attributeTypeは SVG 1.1 Second Editionの後に削除されます。 すべての証明はこちら

アニメーション値を決定する方法は？

アニメーションの属性を指定するだけでは十分ではないため、その値を定義する必要があります。ここで、値から、値 によって 、来ます。

常に一緒にいるカップルから始めましょう： fromとto 。それらの存在の意味は、始まりから終わりまでを明らかにしています

 <circle r="25" ...> <animate attributeName="r" from="10" to="45" .../> </circle>

アニメーションの結果は、円の半径が10から45に滑らかに変化します

それらは常に一緒であると言ったにもかかわらず、 toは明示的にから宣言せずに使用することもできます。この場合、 fromはターゲット要素で定義された値を取ります。上記の例では、アニメーションは25から始まります。

複数の値のセットを指定する必要がある場合、値が使用されます。値はセミコロンでリストされます。

 <circle r="25" ...> <animate attributeName="r" values="15;50;25" .../> </circle>

半径の値は15に減少し、50に増加してから最初の位置に戻ります。

最後の行。彼は「どこ」や「どこ」を気にしません。彼が興味を持つのは「どれだけ」だけです。つまり、絶対値ではなく、相対値で動作します

 <circle r="25" ...> <animate attributeName="r" by="15" .../> </circle>

アニメーションの結果、半径は15増加します。つまり、25 + 15 = 40になります。

伝説は"アニメーションが進むべき量を示すのに使用できる"マニュアルの広がりを回っています。 from = 20 、 to = 50 、および= 10で与えられた場合、このパスは10の「ジャンプ」によって克服する必要があります。 20、30、40、50。しかし、どのように試してみても、アニメーションの有無にかかわらず、アニメーションは少し変化しませんでした。また、仕様に確認が見つかりませんでした。それは単なる間違いのようです。

値の優先順位が最も高く、次にfromから toまで 、最後にが続きます。優先度が最も低いため、「伝説」が原理的に機能しない理由を説明しています。ただし、 fromとともに動作することにより 、この場合、 fromは単に要素の現在位置をオーバーライドします

 <circle cy="50" ...> <animate attributeName="cy" from="70" by="30" .../> </circle>

ここでは、50ではなくアニメーションが70で始まり、100で終わります

相対アニメーションの詳細

他と同じように属性を機能させることができます。これは、 replaceとsumの 2つの位置を持つ、 additive属性を使用して行われます。最初はデフォルトなので、2番目に興味があります。sumの値では、すべての属性がターゲット要素の現在の値に追加されます。form = 5およびto = 15の値で半径20をアニメーション化すると、アニメーションは20 + 5〜20 + 15になります。

 <circle r="20" ...> <animate attributeName="r" from="5" to="15" additive="sum" .../> </circle>

アニメーションを実行すると、位置25への急激なジャンプがありますが、これは良くありません（もちろん、これが意図されている場合を除きます）。これは、で回避することができる= 0フォームが、それは使用の目的敗北和を同一の効果がなく得ることができるので、添加剤の使用によって

 <animate attributeName="r" from="0" to="15" additive="sum" .../> <animate attributeName="r" by="15" .../>

私として、第二の方法は、非常にクリーンかつ容易である

アニメーションの継続時間を指定するには？

動作するアニメーションを作成するために必要な最後の属性がありました-これは durです。属性値はアニメーションの継続時間を決定します。これは、秒とミリ秒の両方で指定できます

 <animate dur="0.5s" .../> <animate dur="500ms" .../> <animate dur="00:00:00.5" .../>

最後の行から、何か他のものがあると推測できます...

値を分単位、さらには時間単位で示すこともできます

 <animate dur="1.2min" .../> <animate dur="0.02h" .../>

ファックは、なぜ地獄が何時間で値を表示することができたのか知っていますが、他の人の事には行きません、あなたが望むなら、それはなぜですか...

他の属性については、一時的な値が同じ形式に設定されてい

ます fill

属性（この属性をその名前と混同しないでください）は、アニメーションの終了後の要素の動作を担当します。次の2つのオプションがあります。

削除（デフォルト値）-アニメーションが終了するとすぐに、すべての変換がリセットされ、要素はアニメーション前の状態になります
freeze-要素はアニメーションの最終位置でフリーズします

アニメーションをループすることは可能ですか？

答えはイエスです。これを行うには、repeatCount属性で不定値を指定します。この属性はアニメーションの繰り返し数を決定し、デフォルトは1ですが、任意の数を指定できます

 <animate repeatCount="indefinite" .../> <animate repeatCount="3" .../>

1つ目は無限に繰り返され、2つ目は3回動作

します。

そのような迷惑な人々のために repeatDurを行いました。この属性は、アニメーションの開始から一定時間後にアニメーションを停止します！簡単に言えば、 repeatDurはアニメーションの継続時間を制限します。repeatCountとの主な違いは、アニメーションを途中で停止できることです。

 <animate dur="2s" repeatCount="indefinite" repeatDur="3s" .../>

アニメーションは2回目の反復の途中で中断しますが

、アニメーションをすぐに開始しない場合はどうなりますか？

次に、私の友人であるあなたのために、 begin属性が提供されます。彼は、アニメーションの開始時に責任を負います。この属性は、いくつかのアニメーションの同期にも使用されるため、非常に便利ですが、後で詳しく説明します。

起動の通常の遅延を指定する場合は、ドキュメントを開いてからアニメーションを開始する期間を指定します

 <animate begin="1.5s" .../>

1.5秒後に再生が開始され

ますが、負の値を指定することもできます。その後、アニメーションは最初からではなく、指定された期間の後になる場所で開始されます

 <animate begin="-2s" dur="4s" .../>

アニメーションはドキュメントを開くと開始されますが、中央から再生されます。

アニメーションをインタラクティブにします。 開始

値として、アニメーションを開始するイベントを指定できますが、「on」プレフィックスはありません。たとえば、クリックスルーアニメーションを作成する場合、「onclick」の代わりに「 click」と記述します

 <circle ...> <animate begin="click" .../> </circle>

上記の例では、アニメーションが適用される要素をクリックすると、アニメーションが開始されます。別の要素からのイベントでアニメーションを開始する場合は、そのidを指定する必要があります

 <circle id="button" .../> ... <animate begin="button.click" .../>

アニメーションを開始するためのいくつかの条件を指定することもできます。これを行うには、それらをセミコロンで区切ってリストします。

 <animate begin="click; 0s" .../>

すべてのイベントがサポートされているわけではありませんが、ほとんどのマウス関連のイベントは機能します。それらをすべてリストするわけではありません。利用可能なイベントはここの~~どこかにあり~~ ます。また、誰も科学的突破の方法をキャンセルしていません。

アニメーションは最後まで到達せずに再起動します。どうすれば修正できますか？

簡単な例を挙げます。ここでクリックするとアニメーションが始まります。それでもユーザーが押さない場合、3秒で自動起動が提供されます。

 <animate begin="click; 3s" dur="7s" .../>

ただし、問題があります。ユーザーが自動タイマーを押した場合、3秒が経過すると、アニメーションが再開され、最後まで到達しません。whenNotActiveの値のrestart属性が役立ちます。合計で、彼は3つ

常にデフォルト-いつでもアニメーションを再開できます
whenNotActive-まだ再生されていない場合は、アニメーションを開始できます
決してで -無効アニメーションを再起動します

 <animate begin="click; 3s" dur="7s" restart="whenNotActive" .../>

ほとんどの場合、単に依存関係を適切に構築することにより、この属性なしで実行できますが、問題は解決されます。

アニメーションの同期

標準イベントに加えて、クリックの種類によって、アニメーションの開始、終了、および繰り返しのイベントがあります。イベントをバインドするには、アニメーションの IDを指定し、ポイント begin、 end、 repeatをそれぞれ指定する必要があります

 <animate id="pop" begin="click" .../> <animate begin="pop.begin" .../> <animate begin="pop.end" .../>

最初の2つですべてが明確な場合、繰り返しですべてがそれほど明白ではありません。繰り返しの数は括弧で囲まれ、その後、アニメーションを開始する必要があります（この数が最後の繰り返しになることはありません）

 <animate id="flip" repeatCount="5" .../> <animate begin="flip.repeat(2)" .../>

アニメーションは、開始後 2回繰り返し、そしてないすべての 2は、担当者

イベントに対する遅延を指定するには、別の可能性を。たとえば、別の開始から 2秒後にアニメーションを再生する場合

 <animate id="another" .../> <animate begin="another.begin + 2s" .../>

または、別のアニメーションが終了する1秒前にアニメーションを開始します

 <animate begin="another.end - 1s" .../>

他に何を始めることができますか...

このセクションに電話したかったのですが、「何ができるはずなのに、できませんか？」私のお気に入りの仕様によると、beginにはさらに2つの値が必要です。 1つ目はaccessKeyで、Unicode形式で指定されたキーを押すことでアニメーションを開始します。 2つ目はwallclockです。これは、リアルタイムでアニメーションの開始を決定します。また、時計だけでなく、一般に完全なセットを指定することもできます。

残念ながら、彼らは誰一人として働きたがりませんでした。それらの必要性はまだ疑わしいので、損失は大きくありませんが

 <animate begin="accessKey(\u0077)" .../> <animate begin="wallclock(2019-04-09T19:56:00.0Z);" .../>

問題が何なのかわからない、多分私のブラウザはそれらをサポートしていない、あるいは多分何か...

アニメーションを中断できますか？

これは、 end属性を使用して実行できます。使用法は beginと同じですが、時間、イベントなどを指定することもできます。ご覧のとおり、これはアニメーションを中断する最初の（そして最後の）方法ではありません。repeatDurがあり、アニメーションの継続時間も修正できるからです。また、 endで直接時間を指定することもできますが、その特徴的な機能はイベントバインドと値のリストを指定する機能です。

休息と活動の状態を持つ要素があるとします。 2番目のボタンをクリックするとアクティブになります。そして、アクティビティの開始で残りのアニメーションを中断します。このような同様のアイデアを実装できます

 <animate id="idle" end="action.begin" begin="0s" repeatCount="indefinite" .../> <animate id="action" begin="click" .../>

静止アニメーションはデフォルトで開始されます。要素をクリックすると、アクティビティのアニメーションが開始され、残りのアニメーションが中断され

ます。属性の終了と開始を

知っているように、開始と終了の両方で値のリストを取得できますが、両方の属性でリストを指定した場合のアニメーションの動作はまだ明確ではありません。しかし、それはある意味、調整可能な期間とそれらの間の間隔での繰り返しになります...それは明らかではありませんか？今からすべてを説明します。

最初に知っておくべきことは、リスト内の値の数が一致する必要があるということです。値の各ペアを開始 -終了1つの「繰り返し」を定義します。そして、ある「繰り返し」の終わりから次の「繰り返し」の始まりまでの時間が遅延を決定します。私はそれらを「繰り返し」と呼んでいますが、アニメーションは一時停止して継続するのではなく、中断されて最初から開始されます。各繰り返しの持続時間を個別に調整し、各繰り返し後に異なる遅延を設定できることがわかりました

 <animate dur="3s" begin="1s; 5s; 9s" end = "2s; 8s; 11s" .../>

この例では、アニメーションには3つの「繰り返し」があります。最初はドキュメントを読み込んだ後1秒で始まり、3つのうち1秒しか続きません。その後、3秒の遅延、その後3秒の完全なアニメーション。繰り返しますが、すでに1秒で遅れています。アニメーションの2秒後に最後の繰り返しが中断され

ますが、それでもアニメーションを中断できますか？

貯金箱

Keeneeeeに役に立たない属性が2つあります。さらに2つの属性 minと maxがあります。名前が示すように、 minは最小を定義し、 maxは最大期間を定義します。最初に、 dur、 repeatCount、 repeatDurの値を使用してアニメーションの継続時間が計算されます。終了します。その後、取得された期間は、minおよびmaxで指定されたフレームに調整されます。紙の上ではすべてが美しいので、実際にどのように機能するかを見てみましょう。

C maxのは、これが上限値を指定する別の属性で、簡単です。計算された持続時間がmax未満の場合、無視され、それより長い場合、アニメーションの持続時間はmaxに等しくなります

 <animate dur="10s" repeatDur="7s" end="5s" max="4s" .../>

4秒間中断されますが

、 minはそれほど幸運ではありませんでした。場合の計算長さ以上のアニメーション分が、それは無視され、それが論理的です。ただし、計算された期間がmin未満の場合、...が無視されることもあれば、無視されないこともあります。

なんで？この瞬間は混乱しやすいので、注意深く読んでください。計算された期間がmin未満の

場合、2つのオプションがあります。

アニメーション自体が終わったので、つまり dur * repeatCount < min

 <animate dur="2s" repeatCount="2" min="5s" .../>

このオプションでは、min属性は単に無視され、アニメーションは4秒で停止します

repeatDur end .

repeatDur , , min , min

 <animate dur="1s" repeatCount ="indefinite" repeatDur="3s" end="5s" min="4s" .../>

repeatDur , min , 3

repeatDur , end min , end , min

 <animate dur="1s" repeatCount ="indefinite" end="2s" min="4s" .../>

4 , .. min end

アニメーションを中断する豊富な属性のため、多くの混乱があります。その結果、maxとminには大きな意味はありません。よく書かれたアニメーションはそれらの必要性を排除するからです。

キーフレームの管理方法と時間関数の指定場所

これを行うには、属性keyTimes、keySplines、calcModeを知る必要があります。valuesでリストを指定したら、キーフレームを宣言しますが、それらは均等に分散されます。keyTimes属性のおかげである状態から別の状態への遷移を高速化または低速化できます。また、リスト形式でも、各フレームの値が示されます。値は、アニメーション全体の継続時間（0-0％、0.5-50％、1-100％）に対する時間軸上のキーフレームの位置をパーセントで表します。

いくつかのルールがあります：各値は0から1までの浮動小数点数を表し、リスト内の値の数は一致しなければなりません。最初の値は0で、最後の1は次の値が前のものより大きくなければなりません。値なしでkeyTimesを使用しても意味がないことを理解していると思います。そして今、例

 <animate values="15; 10; 45; 55; 50" keyTimes="0; 0.1; 0.6; 0.9; 1" .../>

デフォルトでは、すべての変換は線形に行われます。これを変更するには、calcModeで別のモードを指定する必要があります。そして、多くのオプションはありません：

線形 -標準値、説明は不要
ペース -キーフレーム間の速度が一定になるように時間間隔が計算されます
離散 -補間なしで、ジャンプのキーフレーム間でアニメーションが切り替わります
スプライン -これは手動制御モードであると言えます（これについては後で）

残念ながら、これらはすべて組み込み関数です。ここでは、CSSのように\ outを簡単に見つけることはできません。したがって、これらのニーズは、私が「マニュアル」と呼んだ体制を満足させる必要があります。

理解するのが最も難しいのはペースですので、私はそれをより詳細に説明します。開始するには、標準モードでのアニメーションの動作を確認してください。アニメーションは2秒続き、3つのキーフレームがあります-初期、中間、最終

 <animate dur="2s" values="100; 200; 150" .../>

アニメーションを見ると、キーフレーム間の移動が定期的に発生することが明らかになります。1番目と2番目の距離は100、2番目と3番目の距離は50です。最初の方法の半分。単純な計算により、要素が最初のセグメントの2倍の速度で2番目のセグメントを通過することが明らかになり、calcMode = "paced"を追加して、変更内容を確認します。

 <animate dur="2s" values="100; 200; 150" calcMode="paced" .../>

そして、要素の速度が変更されました。現在では、同じ速度で距離全体をカバーするように設計されています。つまり、要素の両方のセグメントが均一に移動します。

ここで、スプラインモードとkeySplines属性を見てみましょう。彼らはいくつかの類似点を持っています...うーん...

スプラインが手動モードを定義する場合、keySplines属性はこのモードの値を定義します。明らかに、一方が他方なしでは機能しません。keySplinesの値は、3次ベジェの2点の座標が示されるリストによって設定されます。

ベジェ立方関数の詳細

これは、動きの強さを決定する関数です。0から1までの4つの浮動小数点数で構成され、一般的には次のようになります：3次ベジェ（x1、y1、x2、y2）。数値のペアは座標であり、曲線を定義する2つのポイントを形成します。

ネット上のキュービックベジェの詳細を読むことができます。キュービックベジエを構築するには、オンラインサービスを使用することをお勧めします。ここでは、例を見て値を試すこともできます。

内の値の数keySplinesは 1より小さくなければならない値。これは、キーフレームの値ではなく、それらの間の間隔の値を示すためです。

 <animate values="100; 200; 150" keySplines=".25 .1 .25 1; 0 0 .58 1" calcMode="spline" .../>

ベジェ関数のポイントの座標はスペースまたはコンマで区切られ、リスト値はセミコロンで区切られます。

最初の最も不快なマイナスは、すべてのキーフレームに共通の時間関数を設定できないことです。各フレームに関数を複製する必要があります。

あなたは属性の関数を指定したい場合は-セカンドから -へ、またはによって、必要松葉杖を依頼する必要があり keyTimes属性を値で「1、0」

 <animate from="10" to="50" keyTimes="0; 1" keySplines=".25 .1 .25 1;" calcMode="spline" .../>

、場合は代わりのから - に使う値を二つの値から、この問題はなくなります

アニメーションの削減を実現するためにどのように？

まず、ちょっとした理論-累積アニメーションの次の繰り返しは、前のアニメーションが終了したところから続きます。クールではありますが、それほどではありません...累積アニメーションが繰り返し内でのみ機能するという事実は残念です。

アニメーションを累積する方法について：累積する属性（デフォルトでは none）を設定して合計する必要があります

 <animate by="100" repeatCount="3" accumulate="sum".../>

値またはfrom - toを使用する場合、最初を除くすべての繰り返しは、additive = "sum"のように動作することに注意してください。1つだけが指定されている場合、累算は無視されます。輪郭のモーフィングを理解するこれで基本を説明したので、今度は本当にクールで複雑なものに進みましょう。誰かがこのセクションのためだけにこの記事を開いたと確信しています。輪郭をモーフィング-このアニメーションの属性は、dは、タグ持ってパスあなたがスムーズに図形の形状を変更した場合の影響を作成することができます。現在、組み込みツールでは、これはSMILを使用してのみ実行できます。で

値は、要素が通過するd属性の値のリストを示します。また、使用することができますから - に。一般に、アウトラインモーフは次のようになります

 <animate attributeName="d" values=" 1;  2; ..." .../>

次に、このプロセスの複雑さを見ていきましょう。

タンクにいる人の場合、d属性にはポイントのセットが含まれており、これらのポイントは順番に接続されて図形を形成します。より詳細に調べると、値のリストがCNCマシン（またはコンピューターサイエンスのレッスンでは「ロボット」）のコマンドセットに似ていることに気付くでしょう。多くのチームがあり、「カーソルの移動」を担当するチーム、「描画」を担当するチーム、曲線がどれだけ直線になるかなどがあります。（すべてのチームがここにいます）。

モーフィングが機能するには、コマンドの数が一致し、同じタイプである必要があります。この条件を無視すると、補間は行われません-アニメーションはある状態から別の状態にジャンプします。calcMode = "discrete"。一見複雑ではありませんが、曲線のない形状をアニメーション化する場合はそうです。そうでなければ、困難が始まります。

複雑なグラフィックスを作成する場合、誰もがベクターエディターを使用し、「コード」を可能な限り最適化する習慣があります。これは通常プラスですが、私たちの場合ではありません。出力では、~~おそらく~~ 1つの長さのリストがありますが、異なるタイプのチームであり、これはルールの1つに違反しています。 Adobe Illustratorを使用しましたが、問題を解決できるオプションが見つかりませんでした。時々、ディジーンの神々の意志によって、この問題は存在しません。しかし、真剣に、問題の確率は、形状とモーフィングの複雑さに直接比例します。

現時点では、この問題の唯一の解決策は、Shape Shifter Webアプリケーションでの「曲がったコード」の変換です。これは私が使用するオプションです。破損したコードの修復に加えて、Shape Shifterを使用すると、結果を確認したり、オプションで別の種類のアニメーションを追加したり、結果を便利な形式でエクスポートしたりできます。

次は、このような美しいアニメーションを作成する方法を段階的に説明するチュートリアルです。

教えて！

: SVG Adobe Illustrator, , Shape Shifter . CSS, SMIL .

. Illustrator. , . 200x200 .

, , . , , «». ,

. . « »

, . , , ,

. , , . , . SVG , . …

. , . SVG . ( Illustrator )

, , Illustrator <path> , <circle> . , . , , . - ( SVGO ), . .

d , )

 <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 23.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve"> <style type="text/css"> .st0{fill:#D38911;} .st1{fill:#87872B;} .st2{fill:#CEB629;} .st3{fill:none;stroke:#DD913E;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:12,200;} </style> <g id="Pulse"> <g> <path class="st0" d="M100,87c44.1,0,80,35.9,80,80s-35.9,80-80,80s-80-35.9-80-80S55.9,87,100,87 M100,82c-46.9,0-85,38.1-85,85 s38.1,85,85,85s85-38.1,85-85S146.9,82,100,82L100,82z"/> </g> </g> <g id="_x3F__1_"> <path id="side" class="st1" d="   "/> <path id="front" class="st2" d="   "/> </g> <g id="Particles"> <line class="st3" x1="80" y1="162.9" x2="42" y2="59.1"/> <line class="st3" x1="90.1" y1="148.8" x2="59.8" y2="28.8"/> <line class="st3" x1="107.9" y1="155.6" x2="124.9" y2="15.9"/> <line class="st3" x1="94.4" y1="160.4" x2="154.3" y2="7.2"/> <line class="st3" x1="119.3" y1="157" x2="159.2" y2="75.5"/> <line class="st3" x1="98" y1="169" x2="87.7" y2="10.7"/> <line class="st3" x1="80.4" y1="147.6" x2="63.2" y2="14.1"/> </g> </svg>

 <?xml version="1.0" encoding="utf-8"?> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"> <style type="text/css"> #Pulse{fill: none; stroke: #D38911; stroke-width: 5;} #side{fill:#87872B;} #front{fill:#CEB629;} .particles{fill:none;stroke:#DD913E;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:12,200;} </style> <circle id="Pulse" cx="100" cy="167" r="85"/> <g id="Sign"> <path id="side" d="   "/> <path id="front" d="   "/> </g> <g id="Particles"> <line class="particles" x1="80" y1="162.9" x2="42" y2="59.1"/> <line class="particles" x1="90.1" y1="148.8" x2="59.8" y2="28.8"/> <line class="particles" x1="107.9" y1="155.6" x2="124.9" y2="15.9"/> <line class="particles" x1="94.4" y1="160.4" x2="154.3" y2="7.2"/> <line class="particles" x1="119.3" y1="157" x2="159.2" y2="75.5"/> <line class="particles" x1="98" y1="169" x2="87.7" y2="10.7"/> <line class="particles" x1="80.4" y1="147.6" x2="63.2" y2="14.1"/> </g> </svg>

, . , ,

CSS , . . , . . CSS . :

 #Pulse{fill: none; stroke: #D38911; stroke-width: 5; transform: rotateX(80deg);} ._transformer{transform-box: fill-box; transform-origin: center;}

, _transformer , , . «» <animateTransform> .

- : , Illustrator? …

– , . , . , <path> , .

, ! – , . , – . circle , . animate , 3

 <circle id="Pulse" class="_transformer" cx="100" cy="167" r="0"> <animate id="doPulse" attributeName="r" values="0;85;" dur=".8s" begin="Sign.click" calcMode="spline" keySplines="0,0,.58,1"/> <animate attributeName="stroke-width" values="5;12;" dur=".8s" begin="doPulse.begin"/> <animate attributeName="opacity" values="0.5;1;1;0" keyTimes="0;0.2;0.5;1" dur=".8s" begin="doPulse.begin"/> </circle>

, CSS

, . : , , . - :

. - , . ,

 <linearGradient id="light-gradient"> <stop offset="0%" stop-color="#ffffff00"/> <stop offset="10%" stop-color="#FFF"/> <stop offset="90%" stop-color="#FFF"/> <stop offset="100%" stop-color="#ffffff00"/> </linearGradient> <mask id="light-mask"> <rect y="0" x="90" class="_transformer" width="20" height="220" fill="url(#light-gradient)" /> </mask>

, . , , . , <use> , <path&gt ; <defs>

 <defs> <path id="question" d="     "/> </defs> ... <use id="front" href="#question"/> <use id="light" href="#question" mask="url(#light-mask)"/>

, , . . ,

 #light-mask rect{ animation: highlight 4s infinite; } @keyframes highlight { 0% { transform: translate(-100px,0) rotate(-50deg); } 30% { transform: translate(100px,0) rotate(-50deg); } 100% { transform: translate(100px,0) rotate(-50deg); } }

. . CSS , SMIL.

, . — , . ,

 <g id="Sign" class="_transformer"> <path id="side" d="     "/> <use id="front" href="#question"/> <use id="light" href="#question" mask="url(#light-mask)"/> <animateTransform id="idle" attributeName="transform" type="translate" values="0,0;0,-5;0,0" dur="6s" begin="0s; jump.end" end="click" repeatCount="indefinite" /> <animateTransform id="jump" attributeName="transform" type="translate" calMode="spline" values="0,0;0,10;0,-35;0,5;0,0" keyTimes="0;0.1;0.35;0.6;1" keySpline="0,0,.58,1;0,0,.58,1;.42,0,1,1;0,0,.58,1" dur="1s" begin="idle.end" /> </g>

,

, , . , additive="sum"

 <animateTransform attributeName="transform" type="scale" additive="sum" values="1,1;1.1,0.8;0.9,1.2;1.1,0.8;1,1" keyTimes="0;0.1;0.35;0.7;1" dur="1s" begin="idle.end" />

, , . 結果：

.

? - , , . stroke-dashoffset , . ,

- . ,

 <g id="Particles"> ... </g> <g id="Sign" class="_transformer"> ... </g>

, ,

 .particles{ opacity:.7; stroke-width:0; ... }

, . ,

 @keyframes sparks { 0% { stroke-dasharray: 20,200; stroke-width: 5px; } 100% { stroke-dasharray: 4,200; stroke-width: 0px; stroke-dashoffset: -180; } }

, . , , «». : CSS , , . SMIL, 3 , , 7. , , …

– , - , . CSS, SMIL.

Particles_active ,

 .Particles_active .particles{ animation: sparks .7s; }

<set> , , ( set )

 <g id="Particles"> <line class="particles" x1="80" y1="162.9" x2="42" y2="59.1"/> ... <line class="particles" x1="80.4" y1="147.6" x2="63.2" y2="14.1"/> <set attributeName="class" to="Particles_active" dur=".7s" begin="jump.begin + .5s"/> </g>

;
;
, , , , , ;
;

. , , . 3D , . , , .

Adobe Illustrator, . , . - , . ,

d .

, . Shape Shifter.

, , . , Shape Shifter

, SVG . Shape Shifter , «» SVG. Illustrator. , . , pathData

, , toValue. . «»

. ,

, , Shape Shifter , , , , . , toValue fromValue .

. ,

 <animate attributeName="d" calMode="spline" values="  1;  2;  1" dur="5s" keySpline=".42,0,.58,1;.42,0,.58,1" repeatCount="indefinite" />

1 – , 2 –

. Codepen.

, SVG – , . , ,

<セット>

setタグは、補間できないことを除いて、animateの短縮バージョンです。特定の期間、つまり、属性を即座に変更するために使用されます。スイッチの原理で動作します。結果として、補間に関連付けられた属性を無視し、累積アニメーションまたは相対アニメーションをサポートしません。値は属性によってのみ設定されているの属性、値、から、によって無視します

 <set attributeName="cx" to="200" begin="click" dur="5s" .../>

要素はクリックすると位置が変わり、5秒後に元の位置に戻り

ます dur属性を指定しない場合、要素はドキュメントが再ロードされるまでこの状態のままになります。それ以外は、 animateに似ています。

<animateTransform>

名前が示すように、さまざまな変換を要素に適用するために使用されます。すべてのタイプの変換は、CSS変換と同じです。CSS変換とSMIL変換を同時に使用すると、それらは互いにオーバーライドするため、1つのものを使用するか、重複しないように監視することをお勧めします。

変換する方法？

アニメーション化された属性はtransformです。変換モードはtype属性で示され、移動、回転、スケーリング、軸に沿ったシフトの4種類の値を受け入れます。

translate-要素を現在の位置に対して相対的に移動します。フォーマット[x、y]のオフセットを取ります。ここでy オプションのパラメーターです

 <animateTransform attributeName="transform" type="translate" from="0, -10" to="0, 10" .../>

Yに係る移動体は、軸

回転する回転中心から約部材が回転を- 。回転角度と回転中心の座標 [deg、x、y]を値として取ります。中心の座標はオプションです。デフォルトでは、回転の中心はSVGドキュメントの左上隅にあります

 <animateTransform attributeName="transform" type="rotate" from="0, 150, 150" to="45, 150, 150" .../>

座標が150、150の点を中心に45度回転し ます。また、座標のほかにパーセントを指定できる transform-origin

CSSプロパティを使用して、回転の中心を変更できます。デフォルトでは、パーセンテージはドキュメント全体のサイズに従って計算されるため、パーセンテージは要素に対して計算されるため、 transform-box CSSプロパティを fill-box valueで設定する必要があります。スケール -アイテムを拡張。値として、両方の軸に対して [scale]形式の浮動小数点数を使用するか、各軸に対して個別に [scaleX、scaleY]を使用します（1は要素の通常のサイズに対応します）。変換ボックスを変更しない場合

上で述べたように、要素はドキュメント全体に対してスケーリングされます。要素の周りの空きスペースもそれに伴って変化するため、視覚的には要素が横に移動しているように見えます

 <animateTransform attributeName="transform" type="scale" from="1, 1" to="2, 1" .../>

X軸に沿って要素を

引き伸ばします skewXまたは skewY- 軸に対して要素をシフトします。値は傾斜角 [deg]を取ります。デフォルトでは、シフトの中心は左上隅なので、 transform-boxおよび transform-originを使用した同じジョークは、他の変換と同じように機能します。

 <animateTransform attributeName="transform" type="skewX" from="0" to="45" .../> <animateTransform attributeName="transform" type="skewY" from="90" to="0" .../>

YでのXに対する一つの移動、他の

総和とオーバーライド変態

で animateTransform貯蓄と相対的なアニメーションを作るが、ここでは属性にすることは可能添加物異なる動作をします。replaceの値では、変換は以前のすべてをオーバーライドします。合計値では、変換は前の値と合計されます

 <rect transform="skewY(115)" ...> <animateTransform type="translate" from="-10" to="10" additive="replace" .../> <animateTransform type="rotate" from="0" to="90" additive="sum" .../> </rect>

この例では、長方形のシフトが再定義されて移動および回転します

<animateMotion>

パスに沿った要素の動きをアニメーション化するために必要です。animateMotionの支持体は属性アニメーションを、独自の3を持っている- パス、回転、キーポイントを。

軌跡を定義するためのオプション

いくつかの方法でモーションの軌跡を定義できます-使い慣れたfrom、to、by、またはvalues属性、新しいpath属性、または子<mpath>タグを使用します。優先順位を上げる方法をリストしましたが、同じ順序で説明します。

属性から、へ、によっては、点の座標を指定した値と同じ、すでにリストに

 <animateMotion from="0,0" to="50,100" .../> <animateMotion values="0,0; 0,100; 100,100; 0,0" .../>

この方法の効果は、変位の通常の変換に匹敵します。要素は、ある点から別の点に直線的に移動します。そして、ここで、ちょうどanimateTransformのように、座標は相対的です。ポイント0,0は、ドキュメントの左上隅ではなく、ターゲット要素の現在の位置を示します。この機能は、軌道を決定する他の方法に存在します。path

属性は、d属性と同様に、一連のコマンドを指定します。d属性でコマンドが図のアウトラインとして解釈される場合、path属性ではコマンドは要素が移動する線になります。ポイントの座標も相対的なので、パスはポイント0,0から始まります

 <animateMotion path="M 0 0 c 3.4 -6.8 27.8 -54.2 56 -37.7 C 73.3 -27.5 89.6 -5.1 81.9 5.9 c -5.8 8.3 -24.7 8.7 -45.4 -0.4" .../>

このパスはそのような曲線を記述します

最後の方法は、サードパーティの<path>要素をpathとして使用することです。これを行うには、この要素へのリンクを<mpath>タグで指定する必要があり、タグ自体を<animateMotion>内に配置する必要があります。このオプションには、相対座標と同じ機能があります。基本的に、このメソッドは要素のd属性の値を<path>属性に「コピー」します

 <path id="movement" .../> ... <animateMotion ...> <mpath href="#movement"/> </animateMotion>

パスを定義する要素は、ドキュメントに表示されないこともあります。<defs> で単純に定義することができます

要素を軌道に対して 回転させ

ます回転属性を使用して、要素を移動方向に回転させることができます。 3種類の値を受け入れます： auto、 auto-reverse、および度単位の回転を示す数値

 <animateMotion rotate="auto" .../>

デフォルトでは、rotateは0 です。数値はすべて、アニメーション全体の角度をキャプチャします。自動モードautoおよびauto-reverseは、それぞれ要素の回転角度をパスに接線で変更します。そして、それらはこの接線の方向が異なります。で自動ながら、それは、前方に向けられているオートリバース前

パスに沿った動きを制御する方法は？

軌跡は、開始点と終了点を持つ曲線であり、これらの点はそれぞれ番号0と1で示されます。曲線上の任意の位置は、この範囲の数値によって決定できます。keyPoints属性にポイントをリストすることにより、パスに沿ったあらゆる種類の動きを定義できます。しかし、これは動きを制御するのに十分ではありません。このためには、属性のシステム全体が必要です。

まず、calcModeをlinearまたはsplineに設定する必要があります。他のタグとは異なり、animateMotionはデフォルトでペースに設定されます（何らかの理由で、アニメーションはこのモードでは機能しません）。属性も指定する必要があります。keyTimes属性。これらの手順を完了することによってのみ、アニメーションは正常に機能します

 <animateMotion keyPoints="0.5; 1; 0; 0.5" keyTimes="0; 0.25; 0.75; 1" calcMode="linear" .../>

この例では、アニメーションはパスの中央で開始し、最後に移動してから最初に移動し、中央で再び移動を終了します

PS

animateMotionを扱うと、CSSでも同じことができるという情報に出会いました。しかし、この記事の終わりには、これに対処する強さも欲求もありませんでした。愛好家のために、私はドキュメントへのリンクを残しています。

特別な感謝

記事を修正するための途方もない仕事のためのブーダ

SVGアニメーションのすべて