ブックマーク / qiita.com/seito2014 (1)

  • SVG奮闘記 ー SVG要素をぐにょぐにょ動かす実装を完了させるまでに右往左往した話 - Qiita

    こんにちは。せいと(@seito2014)です。 LIGアドベントカレンダー13日目です。 はじめに 最近とあるサイト制作でSVGアニメーションを利用したのですが、そこでつまづきまくったことをつらつらと書いていきたいと思います。 とあるサイトというのはこちらで、見ていただくとわかるのですが、メインビジュアルがぐにょんぐにょん動いてます。 他にもいたるところでSVGやらCanvasやら使ってるサイトなのですが、今回はメインビジュアルのアニメーションに言及して書いていこうと思います。 ・イメージ図 ※キャプチャ画像はちょっとグレーなので別途画像を用意しました。 当時、デザイナーさんから静止画のPSDをもらって「この部分をこう、ぐにょぐにょ動かしてほしい」と言われて、やるならCanvasかSVGのどちらかだろうなあと思いました。 ただ、Canvasでやる場合は恐らく計算式が大変なことになるんじゃ

    SVG奮闘記 ー SVG要素をぐにょぐにょ動かす実装を完了させるまでに右往左往した話 - Qiita
    kkeisuke
    kkeisuke 2015/12/17
    “Snap.svg.js”
  • 1