Branberyheag!! Lab » html5

Raphael.jsでアニメーション

isao — Thu, 23 Jun 2011 02:43:01 +0000

Raphael.jsでSVGをグニュグニュと動かしたいと思って、いろいろとやってみた。

アニメーションメソッドがいくつかあって、これがまたかなりパワフルというか分かりやすい。
種類として、２つあるようだ。
※間違っていたら、ごめんなさい。

シンプルなアニメーション
キーフレームアニメーション
パスに沿ってオブジェクトを動かすアニメーション

ざっと、これが主なものようだ。

1.シンプルなアニメーション


var c = paper.circle(10, 10, 10);
c.animate({cx: 20, r: 20}, 2000);

円が2秒間で大きくなる。

2.キーフレームでアニメーション


c.animate({
 "20%": {cx: 20, r: 20, easing: ">"},
 "50%": {cx: 70, r: 120, callback: function () {…}},
 "100%": {cx: 10, r: 10}
}, 2000);

そのくらい言ったら何をするのか細かく設定ができるぽい。
コールバックも設定可能。

3.パスに沿ってオブジェクトを動かすアニメーション


var p = r.path("M100,100c0,50 100-50 100,0c0,50 -100-50 -100,0z").attr({stroke: "#ddd"}),
 e = r.ellipse(104, 100, 4, 4).attr({stroke: "none", fill: "#f00"}),
 b = r.rect(0, 0, 620, 400).attr({stroke: "none", fill: "#000", opacity: 0}).click(function () {
 e.attr({rx: 5, ry: 3}).animateAlong(p, 4000, true, function () {
 e.attr({rx: 4, ry: 4});
 });
 });

これは、Rapael.jsで出力したパスに沿ってオブジェクト動かせる。
なんとなくFlashにも似ているかも。

パスを書くのにもイラレとか使ったり、自分で打ち込まないといけないけど、細かい設定やアニメーションのモードも便利なものもあるので、
かなりライブラリの恩恵は受けられると思う。

Raphael.jsリファレンス関連した記事

便利そうなHTML5のチートシート

isao — Wed, 16 Feb 2011 02:34:53 +0000

HTML5での作る上で調べて大変だったのは、コーディングそのものの見本がほしかった。
タグの意味や位置づけ方は、調べると出てくるけど、これが一番美しく記述の仕方だよ～っていうのが、なかなかなかった。

たまたま見つけたのが「What Beautiful HTML Code Looks Like」

正しいのかは、わからないけど、手がかりになるような気がするので、メモ。

–
追記：ついでにタグリファレンスも「HTML5 Visual Cheat Sheet」関連した記事

[アイデアメモ]InstagramのようなアプリをHTML5で作る

isao — Sat, 30 Oct 2010 15:45:46 +0000

Instagramがやりたくて、iPhoneを作りたくなってしまったので、HTML5とPHPで画像加工用のアプリとそれを公開するアプリをつくってみようかと思ったので、メモ。HTML5には、Canvasで画像加工をする。フィルタは予め作って、レイヤーを重ねて効果がでるようにする。それを保存して、出力またはFlickrにアップロードできるようになっていたら、結構、気が利くアプリになりそう。

保存とFlickrにアップロード部分は、PHPで作る。最後にTwitterにも自動でつぶやいてくれれば最高なのかもしれない。
Flickrの代わりにTwitpicでもいいかもしれない。

ちょっと、写真のアプリをつくってみよっと。

参考になりそうな記事
http://d.hatena.ne.jp/scalar/20101026/1288068169関連した記事

久しぶりにjavascriptにさわってみて

isao — Wed, 28 Oct 2009 07:34:17 +0000

思いつきというかノリでコミュニティサイトをひとつ構築中。
今回は、wordpressで作ってみようと思ったり、あとはフロント部分を完成させたいので、仮り組しながらあとでデザインエレメントを流し込む作戦でサッサと作ろうと思っている。

AS3からJavascriptをさわってみると、プログラムのスキルがあがっているような感じがする。まだまだ、AS3は、使いこなせてないけどプログラムとして理解はすごい深まった気がする。

ついでだけど、HTML5がとても気になる。
「HTML 5 ― HTML 4 からの変更点」を読んだだけでも、早くさわりたくなってきた。JavascriptでのDOMスクリプティングしても指定しやすくなるかもしれない。今回作っているサイトでどこかで使いたい・・・

ちなみｎCSS3も面白そう。
http://www.thinkit.co.jp/article/48/3/

Flashにはない魅力がまだまだあるな、と思った。関連した記事

Flashは、無くならない記事を読んだ。

isao — Wed, 07 Oct 2009 01:18:04 +0000

HTML5が出ることにより、Flashはなくならないと思う。
今までできなかったことがFlashでできるようになってきたことがとってもあるし、これからも機能や性能がもっとあがると思う。

HTML5は、ものすごいゆっくりに進化している言語なので、Flashに追いつくのはまだまだ先にだと思う。あと、ブラウザっていうソフトがある限り閲覧者全員が使えるのは、いつだよっていう感じだし。

FlashとHTML5を同じ土俵に立たせるのは無理がある。

この記事自体書くことが、無駄なような気がしてきた・・・ネタとして残しておく。関連した記事

HTML5,CSS3とIphoneとの将来性

isao — Fri, 02 Oct 2009 03:36:32 +0000

憶測でしかないけど、HTML5は、Iphoneなどですごいスピードで浸透するんじゃないかなと思う。タッチスクリーンで直接ウェブページを触れるということのメリットでウェブアプリのほとんどはHTML5で作られる。しかもアプリよりも少し性能は落ちるかもしれないけど、ほぼ同等な扱いができるんじゃないかと思う。

HTML5は、PC上は浸透するのに遅いので、当分は、HTML5の主体はIphoneなのかもしれない。そう考えると早くHTML5を触ってみないとと思う。関連した記事

HTML5とFlashについて

isao — Mon, 06 Jul 2009 01:30:17 +0000

周りは、HTML5がFlashが得意だった部分をカバーするとかHTML5がインタラクティブなコンテンツが構築可能だとか・・・いろいろとFlasherピンチみたいなことをよく聞くけど、そうではないのかなと思う。

Flashは、インタラクティブコンテンツとして、しかもシェア率が高いので確実にこれからも成長すると思う。デバイスやプラットフォームにインストールされているので、確実に成長と進化すると思う。

HTML5は、Flashができることをカバーするかもしれないけどやっぱりブラウザ依存で確実に苦しむと思う。今は、結構ブラウザ依存がほとんどないとはいえ、ブラウザ独自機能があったり、標準仕様なのに機能しなかったりとブラウザに依存することがあると思う。
この状態でインタラクティブコンテンツ（Flashが得意とすること）ができたとしてもコスト面を考えるとFlashで構築したほういいのかもしれない。

HTML5は、まだ草案中こともあるし、この時点でジタバタするのはちょっと問題があるかもしれない。うまく住みわけができるような仕様になると思うけどね。正式な仕様になるのはいつになるんだろう・・・

今の時点では、使う気も試す気もないかな。関連した記事