アニメーションに関するam0x0のブックマーク (2)

  • 岡田を切る技術 - Qiita

    これはとある回顧録 何度も諦めかけましたが、数年の歳月を経て遂に岡田を切る技術が一旦の完成へと至りました。その技術を巡る奮闘の歴史と成果について、ここに記録を残していきたいと思います。 画像時代 まずは「切る」という動作が何を指すかを明確にしておきます。 厳密な定義というよりは、切った感を得るために必要そうなふるまいとして定義します。 平面上のある領域が、任意の直線を境界として分割されること 分割された領域は物理法則に準じてふるまうこと 要するに気持ちよく岡田を切ることができれば目標は無事達成です。 物理エンジン 切った感を高めるためにはやはり「物理法則」に準じたふるまいが欲しくなります。つまりブラウザ上で動く物理エンジンが必要です。 世の中にはフルスクラッチで物理エンジンを作れる人間と作れない人間が居ると思われますが、残念ながら私は後者でした。勝ち目の薄い勝負は避け、素直に巨人の方にすが

    岡田を切る技術 - Qiita
  • 滑らかで美しい表現ができる!SVGアニメーションを使ってみよう

    更新日: 2020年9月27日公開日: 2015年10月8日滑らかで美しい表現ができる!SVGアニメーションを使ってみよう Airbnb の模写(写経)で登場してくる SVG 形式の画像。Webデザイナー志望の方や単価をあげたいWebデザイナーの方にとっては、「SVG」必須ですよね。 今回は SVG 画像だからできる SVG アニメーション・・・・・・・についてご紹介させて頂きます。 参考: CSS-TRICKS SVG アニメーションは、SVG画像をベースに CSSJavaScript で動きや装飾を加える表現手法の一つになります。 メリットとしては、軽量でスケーラブルな SVG 画像に好みのアニメーションを加えられるという点。普段 Web を見ている限りではどれがSVGアニメーションで、どれがSVGアニメでないのか区別はつきにくいですが、SEOや美しさ、滑らかさを求めるとSVG

    滑らかで美しい表現ができる!SVGアニメーションを使ってみよう
  • 1