blog上野谷根千界隈でまったりと暮らしているWeb系フリーランスの雑記ブログです。Webやフリーランス、グルメなどについてもしゃもしゃ書いてます。Update:2019/10/31前記事「【Illustrator】ラスタ画像からsvg画像を作る方法」に続いてsvg関連。今度はsvgアニメーションを実装してみました。svgアニメーションには、aminate要素(SMIL(スマイル))を用いるjavascriptを用いるcss3のアニメーションを用いるこの3つの方法があるそうです。全体に共通する方法として、まずアニメーションさせたいsvg画像を用意します。*ラスタ画像をsvg画像化する方法については前記事で紹介しています。次にsvg画像をブラウザ上で表示し、開発者ツールで動かしたい要素を特定します。エディタでsvgのコードを開き、先ほど特定した動かしたい要素のタグを修正。-->このタグの中にSMIL言語のアニメーションを実装する要素を記載していきます。今回はanimate要素もしくはanimateTransform要素を使います。SMIL...W3CがXMLをもとに規格化したマークアップ言語。SMILを利用することで、動画や音声、テキストなどの異なる形式のデータを、Webブラウザー上で同期をとって再生できる。animate要素やanimateTransform要素はこの言語の技術。要素は1個の属性/プロパティに対する時経過に伴うアニメーションに用いられる。斜傾などを制御するアニメーションを可能にする。(第2版)目をぱちぱちこちらの記事をがっつり参考にさせていただきました。変化前と変化後のパスを用意し、ぬるっとアニメーションさせる方法です。svg画像aと、目だけ細く変更したsvg画像bを用意*このときアンカーの数を変えないように、とのこと。画像bをブラウザで開き、どちらかの目の部分の要素を特定。Dから始まる文字列を控える画像aをブラウザで開き、同じほうの目の部分の要素を特定。元のパス"></animate></path>完成!目をぱちぱちする間隔は秒数とvalueの数で無理やり調整してみました。CodePen.ぴょんぴょんとジャンプ今度はanimateTransform要素で並進させてジャンプのように見せます。先ほどの瞬きと同じように秒数とvalueの数でそれっぽい動きにしてます。1.画像をブラウザで開き、体全体のpathを特定。グルーピングするgタグがなければgで囲う。CodePen.耳をぱたぱた次はanimateTransform要素の回転を使います。耳のpathに対してアニメーションをかけていきます。画像をブラウザで開き、耳のpathを特定。以下のコードに書き直す。CodePen.ごろごろ回転移動おまけ。animateTransform要素の並進と回転を合わせるとこんなこともできます。目の瞬きやジャンプを実装するときに調べましたが、「一定の時間をおいてアニメーションを実行」という命令はできなさそうです。アナログで書くならこんな感じに。values="元のパス;元のパス;元のパス;元のパス;元のパス;元のパス;変化後のパス;元のパス;変化後のパス;元のパス;元のパス"></animate>これだと、durに指定した5秒間で、valueに指定したパスが等間隔で表示されるので近い挙動になります。いう細かい動きはcssやjsでの領域になるのかもしれませんね。ease等の滑らかな動きの再現方法こちらは名称を使った設定こそできませんが、cssでのeaseといった名称がついている設定値をkeySplines属性に使うことで再現可能だそうです。詳細がこちらに記載されてました。keySplines属性に設定する値についてまとめSMILはささやかなアニメーションであれば数行のコードで実装できるので、cssとjsとは違った用途に使えそうですね。こちらの記事のような、がっつりとした変形アニメーションも面白そうです。この記事を起こしてから知ったのですが、SMILは一度chromeで非推奨の動きがあったそうです。参考)#35:SVGアイコン管理ツール、SMILの今後についてなど2018/1現在、特に新しい発表はないようです。いうことがあったため、chromeで現在SMILが使えない訳ではありませんが、SMILの将来性が不安視されるため、cssやjsを主に使おうという意見が多いようです。Animationsで十分に代替できるようになれば再びSMILの見直しがされる可能性があります。Animationsで制作するのをお勧めします。#35:SVGアイコン管理ツール、SMILの今後についてなどSVG要素の一つであるanimateタグを使う。Language)というらしい。今後ブラウザがサポートしていくかどうか決定していないので非推奨。今後SVGアニメーションを実装する際はSMILではなくcss、js中心で組んでいこうと思います。WORDPRESS(13)Profilekatori在宅フリーランスのWebデベロッパー(フロントエンドエンジニア、コーダー)です。東京の上野谷根千界隈でまったり仕事してます。