Canvasアニメーションの要点 - Qiita
はじめに いまさらですがHTML5 Canvasの勉強をはじめました。 Canvas APIを使ったアニメーションの実装は、jQuery animate()やcss3 keyframesといったものとは考え方が異なります。はじめて調べた時には結構戸惑ったので、同じような方のためにメモしたいと思います。 アニメーション = 再描画 Canvasでは便利なアニメーションメソッドはなく、単純に描画自体を繰り返すことでアニメーションを実現させます。イメージとしては、パラパラまんがのように画面自体が次々と差し替わっていくようなものでしょうか。 アニメーションサンプル なお↓ページで実際の動きを確認できます http://nekoneko-wanwan.github.io/demo/canvas/animation/ Canvasアニメーションの手順 ざっくりと以下のような流れになります 要素を削除
【映像制作の入門者向け】映像ディレクションはじめの一歩 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
はじめまして！ デザイナーの杉原ミシェル（@michellesghr）です。普段はLIGブログのアイキャッチ・バナー・背景ジャックなどを、日夜せっせとこしらえております。 自己紹介 「頭の中で流れる映像を表現できる技術が欲しい！」と考え、大学では映像を勉強していました。 大学卒業後はフィリピン・セブ島の映像制作会社で、撮影アシスタント・動画編集・アニメーション制作などと言った映像から、Webデザイン・ロゴデザイン・DTPデザインなどのグラフィックまで、さまざまなクリエイティブを経験しました。 ここ最近、Webデザインの中に動画が組み込まれているものが多く見らるようになりました。Webデザインをディレクションしていく中で、こうした映像領域のディレクションも必要になった方もいるのではないでしょうか。そこで、「映像ディレクションのはじめの一歩」として、映像制作の基礎の一部をご紹介します。 映像の
Webアニメーションを高速化するために知っておくべき10のこと（前編）
Webアニメーションを高速化するために知っておくべき10のこと（前編） 斉藤 祐也（株式会社リッチメディア） アニメーション／トランジションは身の回りに当たり前にあるものです。 むしろ普段の生活では「0」が「1」に変化するものの方が珍しいでしょう。 アニメーション／トランジションはデジタルなWebに対して自然な変化を提供する大切なツールです。 今回はそんなアニメーション／トランジションをより自然にスムーズに動作させるために知っておきたいことを前・後編の2回に分けて紹介していきます。 アニメーションを高速化する理由 アニメーションは先ほど書いたように普段の生活にも存在しています。だからこそ、我々はスムーズではないアニメーションを見つけるのが得意です。 アニメーションに限定した話ではありませんが、FacebookのShane O’Sullivan氏が、ページロード後のレンダリングパフォーマンス
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
