主にプログラミングに関して。Python, .NET Framework(C#), JavaScript, その他いくらか。
記事にあるサンプルやコードは要検証。使用に際しては責任を負いかねます

スポンサーサイト

                
tags:
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

JavaScript: アニメーションを作ってみる(CSS vs. canvas)

                
tags: JavaScript
四角い枠を作って、その中にアニメを表示してみる、ということを以前にやってみた。
DreamDropDistance.html

上のは親要素を作ってCSSのpositionをrelativeにし、子要素のstyleプロパティをCSSとJavaScriptを使っていじりまわすことで表現した。これ以外にもcanvas要素を使うって手がある。やってみた。
130626.html


**************************************
ブラウザ上でのアニメーションを二通りのやり方で作ってみた。一つは任意の要素のstyleプロパティをいじりまわすやり方。もう一つはcanvas要素に描写するというやり方。

前者は拡大縮小、回転、透明度、オブジェクト間の前後関係の設定などが楽。ただJavaScriptで各要素の回転や透明度に対応するstyleプロパティをいじっていけばよかったから。
el.style.opacity = 0.5;
el.style.transform = "rotate(60deg)";


後者はそれよりいくらか面倒だった。とくに回転の扱いが。canvasに対して書き込む画像を回転させるには何行かの関数を用意しなければならなかった。
var TO_RADIANS = Math.PI/180;
function drawRotatedImage(context, image, x, y, width, height, angle) {

// save the current co-ordinate system
// before we screw with it
context.save();

// move to the middle of where we want to draw our image
context.translate(x, y);

// rotate around that point, converting our
// angle from degrees to radians
context.rotate(angle * TO_RADIANS);

// draw it up and to the left by half the width
// and height of the image
context.drawImage(image, -(image.width/2), -(image.height/2), width, height);

// and restore the co-ords to how they were when we began
context.restore();
}
var screen = document.getElementById("screen");
var ctx = screen.getContext("2d");
ctx.globalAlpha = el.style.opacity;
drawRotatedImage(ctx, el, el.left, el.top, el.width, el.height, el.rotate)

参考:http://creativejs.com/2012/01/day-10-drawing-rotated-images-into-canvas/



というわけで。ブラウザでのアニメーションの作り方を二通りやってみたけど、canvasでやるより、親要素のpositionプロパティをrelativeにして、そのなかで子要素を使ってやる方が楽だった。
            

コメントの投稿

非公開コメント

プロフィール

Matoba

Author:Matoba

最新記事
リンク
作ったものなど
月別アーカイブ
カテゴリ
タグリスト

検索フォーム
Amazon
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。