Pocket

Script-of-the-Day-Snap-svg-439460-2

 

WCANでSnap.svgについてのお話があったので実際にやってみました。

 

 

今回参考にしたサイトはこちら、

Snap.svgの使い方まとめ

とりあえずざっくり読んでみて、やってみたかったことだけやってみました。笑

また時間がある時にじっくり読んでいこうと思います!

やってみたもの。↓ タップすると・・・!

アコギがエレキに変わります。ついでに色もチェンジ。

.click()や.animate()くらいしか使わずにできました。(細かいのは色々あるけども)

こういう形がぬる〜っと変わる表現がやってみたくて今回簡単にですがつくってみました。アンカーポイントの数も位置もバラバラなので、滑らかではないですがちゃんと作ったら面白いものができそうです!!

 

でもちゃんと動いて、グラフィックも綺麗で、っていうのを目指すならかなりみっちりやらないとできなさそう、、、

wcanで「たくさんのオブジェクトの処理はsvgはパフォーマンスが落ちる 」と言われていたし、要所要所で使うのがベストかな〜といった印象もあります。めっちゃ動くサイトも可愛いけど!

とりあえずもう少し勉強したいです。もっと可愛いのを作りたい〜。