タグ

svgとメモに関するjed_leeのブックマーク (1)

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

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

    SVG奮闘記 ー SVG要素をぐにょぐにょ動かす実装を完了させるまでに右往左往した話 - Qiita
    jed_lee
    jed_lee 2017/10/24
    SVGを写真の「フレーム」の様な使い方で、形状を変化させながら画像や動画の上に設置する方法メモ。要調査。
  • 1