読了: 約 7 分

普段の仕事でスマホサイトは作ったりしていますが、
中々アニメーションを使った案件をやらないので、
3連休を利用して、HTML5でのアニメーションやAPI周りのサイトを纏めてみました。

HTML5で出来る事のまとめサイト

HTML5で出来る事のまとめサイト
canvas,audioタグ等生かしていて、
JavaScriptを使うのに勉強になりますねー
HTML5 Animation examples
Canvasのdemo

各APIがどのブラウザで出来るか

バージョンが書いていないけどおススメ。
HTML 5 Demos and Examples

クラウド上でHTML5のanimationを作成して上げていくサイト

mugeta

html5が凄いポートフォリオサイト

これはすごい！HTML5とJSで繰り広げるアニメーションポートフォリオサイト

AppleのHTML5のshowcaseについて

HTML5 and web standards.

canvasのメソッドについての詳細説明

requestAnimationFrameによるHTML5 canvasのアニメーション

mozilaの社員がつくったスライドでHTML5の各機能について

webGL
P.30,33
P.45
P.51 motion.js
P.76
Robhawkes氏面白い方ですね。

social gameのアニメーションの動き

HTML5 の canvas で再生可能なアニメーションを効率良く作成するには

Animation interactive en Html5 CSS3 / 海外の人の動画

Animation interactive en Html5 CSS3

電光掲示板のHTML5とjs

HTML5のCanvasとJavaScriptで電光掲示板のアニメーションを表現する

ブラウザゲームCSS3アニメーション

NHN勉強会資料
P.13はデザイナーにとって覚えておくと良い事かもしれません。
animationやkeyframeがどのように重いのか等が詳しい。
divを入れ子にしまくって、表現するのは重くなる。

グラデーション関係はandroid 1.x系でバグがあって、linearは意図
通りに表示されない。
radial+rgba()は未だバグがある。

角丸は、小さい部位程偶数にしないと1.5pxで書きだされるので、
androidだとガシガシになる。
P.75参照

衝突処理のcanvasアニメーション

中村勇吾さんのサイトを参考にしているそう。
ここまでできる！ HTML5 Canvasで作るアニメーション（衝突編）

HTML５のポテンシャルを存分に感じるFLASH越えのサンプル集48個

これは凄いですね。
HTML５のポテンシャルを存分に感じるFLASH越えのサンプル集48個
これみているだけでめっちゃ参考になりますね。
色々なアイデアの組み合わせで良い物が出来ていくと思いますので
是非ご参考までに。

CSS3アニメーションをJSで制御

CSS3アニメーションをJSで制御

CSS3だけでページめくりするアニメーション

CSS3だけでページめくりするアニメーション
translate,rotateだけで実装されています。
3dじゃないので、android2.x系でもバグはないはず…。

HTML5とCSS3による入力文字数に応じて、プログレスバーを変化させる

チュートリアル動画

Tutoriel Html5 animation progressBar avec JQuery 投稿者 workfel

js do it　animationカテゴリーの一覧

Tag: animation

スマートフォンにおけるアニメーションの実装

株式会社CyberX 佐野さん

基本的な事が多いですが、canvasでandroid2.1とかではバグがある。
どういうのか具体的には書かれていませんが、
あとはツールの使い方について。

HTML5 animation
in mobile web games

NHNの方
CanvasではDOMをごにょごにょするよねという話し
イベントの当り判定P.37
css3Dをandroid2.x系ではサポートしていない件について
P.49

cssのtransformはandroidではかなり注意が必要です。
その上で解決策があってそれはcollieというjsのライブラリです。
retina、canvas,domも対応しています。

JavaScriptエンジニア向け！スマートフォンで動くブラウザゲームの作り方

Kayacのフロントエンドエンジニアの方の、スケジュール管理やタスク管理について
タスク管理やスケジュール管理は面接等でも聞かれますし、期限内で高いクオリティを出すために
必要なので、こういう具体的なものは為になりますね。
スマートフォンで動くブラウザゲームの作り方

フレームワーク等具体的な実装等の方法についてはP.24以降
jQueryのdeligate/live/bindの違いや、使い方、スピードについて。
詳細は別の方のサイトから。
jQueryのbind/live/delegateの違いまとめ、と新API .on()の使い方

実装詳細でのスクロール部分が結構ためになりました。
iscroll.jsなどのプラグインは元々使ったことがあったのですが、ago氏は独自実装されているようですね。
そのほかの部分に書いてありますが、iOS5以上とandroid2.1以上ではposition:fixed;がサポートされているのは相当嬉しいですね。
自分が試したときはiphone3で、OSもバージョンが4とかの時だったので、動きが微妙でしたがクライアントからの要望で苦労しましたね。苦笑
マークアップとJSに携わる方はこのスライドにも書かれていますが、プロジェクトでも終盤に忙しくなるのにその時に実装方法等確認していると
詰みますよね＼(^o^)／

Androidは現代のIE

これ超名言ですね笑

そこそこ規模が大きくなってきた時の開発

そこそこ規模が大きくても何とかなるjavascriptの設計（URL dispatcherの薦め）
※この方法であれば「このコードはどのページで実行されているのか」がJS本体に記述されるため、後々機能追加する場合対象のページ以外への影響を最小に抑えることが出来ます。
これ便利ですね。確かに直で書いてしまうとどこに何があるか分からなくなってしまったり、共通化されていると
どこに影響があるか確認しながら行う必要があるので、dispatcherは便利だと思いました。

// 第一引数はURLのパス部分にマッチする正規表現
dispatcher('^/hoge|^/huga', function () {
    $(function () {
        // /hogeと、/hugaで使う内容
    });
});

スマートフォン JavaScript タッチ、フリックイベント実装

使う頻度が多くなってきたので、一先ずメモ。android系では動作がどうか書いてありません。
スマートフォン JavaScript タッチ、フリックイベント実装

translateプロパティでAndroid,iPhone端末で画像がちらつく件
ソーシャルゲームのカードを動かすようなUIのスライダー

CSS3 Animationデモ

かわいい動きも多くて参考になったのでご紹介しておきます。
forkして改良すればどんどん面白いものが出来そうですね！

海外の方のcssだけのanimationでtickerを作成したもの
シンプルなものなので参考になりますね。
%で刻んで、top:-値で上に数値分あげて、最後0で元に戻すというもの。

CSS3 News Ticker | CSS3 Notification Like Stackexchange

フレームの処理はこんな感じ。

@-moz-keyframes ticker {
 0% {
   top: 0;
 }
 25% {
   top: -20px;
 }
 50% {
   top: -40px;
 }
 75% {
   top: -60px;
 }
 100% {
   top: 0;
 }
 }

繰り返し処理と、どういう挙動にするのか、秒数、animationの名前の定義等

 -webkit-animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
    -moz-animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
    -ms-animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
    animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;

他はSVGやWebGL等も追加していきたいと思います。
animation周りのバグについてもこちらで随時追記していきます。