ゆたろです。どうもです。
この頃、冬なのに寒かったり暖かかったりで上着を着ていくか毎朝迷ってます。
さてさて、最近サイト上で良く見かけるsvgアニメーションですが、ただ単に動かすだけではなく、変形させることもできます。今回は、svgモーフィングを簡単に実装できるsvg-morpheus.jsの紹介をしていきます。
▼目次
モーフィングとは？
そもそも一般的に言うモーフィングとはなんなのでしょうか？
ある物体から別の物体へと自然に変形する映像をみせる。これはオーバーラップを使った映像のすり替えとは異なり、変形していく間の映像をコンピュータによって補完して作成する。変身・変化を意味する単語「メタモルフォルシス（metamorphosis）」の中間部分から命名されたという説と、move（移動）+morphology（形態） の合成語であるとする説がある。
– wikipediaより引用
web上のsvgに対して言われている「モーフィング」は、ある図形から別の図形に変形していくアニメーションのことを言います。
svg-morpheus.js を使ってみよう
それではさっそくsvgをモーフィングさせるための svg-morpheus.js を使ってみましょう。
次のサイトから、svg-morpheus.js をダウンロードしてください。
http://alexk111.github.io/SVG-Morpheus/
モーフィングさせるsvgを用意する
まず、モーフィングさせる svg と、変形前・変形後の図形を用意します。
--省略--
<svg class="hoge" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<!--変更後の図形-->
<g id="FUGA">
<path style="fill:#ffffff;" d="..." />
</g>
<!--変更前の図形-->
<g id="PIYO">
<path style="fill:#000000;" d="..." />
</g>
</svg>
--省略--モーフィングを実行する
次に、先ほどダウンロードしたファイルを読み込み、その後に実行処理を書きます。
--省略--
<script src="svg-morpheus.js"></script>
<script src="foo.js"></script>
--省略--▼foo.js
let hoge = new SVGMorpheus('.hoge', {
duration: '1000', //アニメーションの時間
easing: 'circ-in', //アニメーションのイージング
rotation: 'none' //回転するかどうか
});
hoge.to('FUGA');- 使えるeasing
-
- circ-in
- circ-out
- circ-in-out
- cubic-in
- cubic-out
- cubic-in-out
- elastic-in
- elastic-out
- elastic-in-out
- expo-in
- expo-out
- expo-in-out
- linear
- quad-in
- quad-out
- quad-in-out
- quart-in
- quart-out
- quart-in-out
- quint-in
- quint-out
- quint-in-out
- sine-in
- sine-out
- sine-in-out
- imageUrl
- dropRadius
- perturbance
- resolution
- interactive
- crossOrigin
- 使えるrotation
-
- clock
- counterclock
- random
- none
サンプル
svg-morpheusを使って、svgがモーフィングし続けるサンプルを作ってみました。
sample
▼html
--省略--
<h1>DEMO</h1>
<div class="stage">
<div class="item">
<svg class="hoge" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<g id="HEART">
<path style="fill:#ff63c2;" d="M125.2,48.9C135.4,15.9,160.9,0,189.6,0C223.8,0,250,28.6,250,63.2c0,41.7-22.7,72.5-46.1,100.9c-22.4,27.1-67.3,74.4-78.8,85.9h-0.6c-11.5-11.5-56-58.8-78.5-85.9C22.7,135.7,0,104.9,0,63.2C0,28,27.1,0,60.7,0c28.3,0,53.5,15.9,63.8,48.9H125.2z"/>
</g>
<g id="CLOVER">
<path style="fill:#63ff75;" d="M83.3,91.8c-7.2-8.9-13.8-21.3-13.8-37.4C69.5,23,94.5,0,125,0c31.1,0,55.5,23.6,55.5,54.4c0,16.1-6.3,28.5-13.8,37.4l1.2,1.1c8.3-6.6,19.8-10.1,28.2-10.1c30.2,0,51.8,26.5,51.8,55.8c0,31.9-24.5,56.7-55.8,56.7c-17,0-39.7-8.6-51.8-24.2l-0.9,0.3c2,36.5,7.2,58.1,22.1,76.5v2H88.5v-2c15-18.4,20.1-40,22.2-76.5l-0.9-0.3c-12.1,15.5-34.8,24.2-51.8,24.2c-31.4,0-55.8-24.7-55.8-56.7c0-29.4,21.6-55.8,51.8-55.8c8.3,0,19.9,3.4,28.2,10.1L83.3,91.8z"/>
</g>
<g id="SPADE">
<path style="fill:#6763ff;" d="M110.5,180.7c-7.9,12.6-20.6,19.5-37.6,19.5c-33.2,0-51.2-23.6-51.2-55.9c0-27.4,27.1-58.4,45.2-79.2C86.1,43,111.3,14.5,124.7,0h0.6c13.4,14.5,38.7,43,57.8,65c16.7,19.2,45.2,51.5,45.2,79.2c0,32.4-18.1,55.9-51.3,55.9c-17,0-29.6-6.9-37.5-19.5l-0.3,0.3c1.9,30.1,7.4,52.4,20.6,67.2v1.9H90.2v-1.9c13.1-14.8,18.9-37,20.6-67.2L110.5,180.7z"/>
</g>
<g id="DIA">
<path style="fill:#fc3535;" d="M125,0l93.6,125L125,250L31.4,125L125,0z"/>
</g>
</svg>
</div>
</div>
--省略--javascript
$(function(){
let $hoge = $('.hoge');
let isFormation = 'dia';
let hoge = new SVGMorpheus('.hoge', {
duration: '500',
easing: 'quint-in-out',
rotation: 'clock'
});
setInterval(()=>{
if(isFormation === 'dia'){
hoge.to('HEART');
isFormation = 'heart';
}else if(isFormation === 'heart'){
hoge.to('CLOVER');
isFormation = 'clover';
}else if(isFormation === 'clover'){
hoge.to('SPADE');
isFormation = 'spade';
}else if(isFormation === 'spade'){
hoge.to('DIA');
isFormation = 'dia';
}
}, 2500);
});まとめ
サイト上のアイコンなどにモーフィングを入れてあげることで、いつもとは一味違った表現ができるかもしれませんね！
機会があればぜひ使ってみてください。それではまた！
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
