HTML5およびEaselJSで3月8日のグリーティングカードを作成する

（写真はクリック可能で祝福的です）

一般的なアイデア ：美しい写真の背景に飛び回る蝶と春の音楽。 （ 1年前に行ったSilverlightバージョンのハガキもあったことをすぐに認めます。Silverlightの 蝶アニメーションのレッスン 。 ）

標準のCSSツールに加えて、HTML5 CanvasとEaselJSアニメーションライブラリを使用して、ポストカードをレンダリングします 。

バタフライアニメーション

あなたはすでに蝶を準備しており、対応する絵の形で個々の翼を持っているという仮定から始めます。

ステップ1.翼を描く

ほんの数枚の翼を描くことから始めましょう。 それぞれの翼を描くには、ダウンロードした画像に基づいて作成するオブジェクトであるBitmapクラスが必要です。 翼をまとめるには、 Containerクラスが必要です。 EaselJSでシーンをレンダリングするためのStageクラスがあります。

画像をアップロードする
イメージをダウンロードするには、対応するイベントをハングアップして標準イメージを使用する必要があります。

// loading left wing
leftImg = new Image();
leftImg.src = leftSrc;
leftImg.onload = onWingImageLoaded;

// loading right wing
rightImg = new Image();
rightImg.src = rightSrc;
rightImg.onload = onWingImageLoaded;

（理想的には、ブートエラーでイベントをハングアップして、正しく処理する必要もあります。）

バタフライアセンブリ
両方のウィングがロードされた後、それらを1つのコンテナに組み立てる必要があり、全体として操作できます。

// create a new container for butterfly wings
var butterfly = new Container();
// create wings
var lWing = new Bitmap(leftImg);
var rWing = new Bitmap(rightImg);

// assemble a batterfly
butterfly.addChild(lWing);
butterfly.addChild(rWing);

それぞれの翼のコンテナ内で、基準点を移動する必要があります。基準点を基準にして、それらを配置してから回転します。

// change wings registration point inside container
lWing.regX = lWing.image.width;
lWing.regY = lWing.image.height / 2;
rWing.regX = 0;
rWing.regY = rWing.image.height / 2;

バタフライ配置
次に、蝶をシーンに追加し、適切な場所に配置して、シーンのレンダリングを開始します。

// add butterfly to stage
stage.addChild(butterfly);

// change batterfly position
butterfly.x = canvas.width * Math.random() | 0;
butterfly.y = canvas.height * Math.random() | 0;

// redraw stage
stage.update();

共通コード

var leftSrc = "../images/Cypres 1.png" ;
var rightSrc = "../images/Cypres 2.png" ;
var leftImg;
var rightImg;
var loadedWings = 0;

function init() {
// create a new stage and point it at our canvas:
canvas = document .getElementById( "canvas" );
stage = new Stage(canvas);

// loading left wing
leftImg = new Image();
leftImg.src = leftSrc;
leftImg.onload = onWingImageLoaded;

// loading right wing
rightImg = new Image();
rightImg.src = rightSrc;
rightImg.onload = onWingImageLoaded;
}

function onWingImageLoaded( event ) {
loadedWings++;
if (loadedWings == 2)
onButterflyReady();
}

function onButterflyReady() {
// create a new container for butterfly wings
var butterfly = new Container();
// create wings
var lWing = new Bitmap(leftImg);
var rWing = new Bitmap(rightImg);

// assemble a batterfly
butterfly.addChild(lWing);
butterfly.addChild(rWing);

// change wings registration point inside container
lWing.regX = lWing.image.width;
lWing.regY = lWing.image.height / 2;
rWing.regX = 0;
rWing.regY = rWing.image.height / 2;


// add butterfly to stage
stage.addChild(butterfly);

// change batterfly position
butterfly.x = canvas.width * Math.random() | 0;
butterfly.y = canvas.height * Math.random() | 0;

// redraw stage
stage.update();
}

完成した例はここにあります： 例1

ステップ2.羽ばたく

タイマー
さまざまな方法でアニメーションまたは順次イベントを実行できます。 EaselJSでは、シーン更新タイマーをサブスクライブして、すべてのステップで変更を加えることができます。 （これは、シーンがタイマーに描画されるゲーム状態更新サイクルに似ています。）

まず、タイマーをサブスクライブする必要があります（応答頻度も設定できます）。

Ticker.addListener(window);

次に、ウィンドウのスコープでtick関数を定義する必要があります。その中で、シーンの状態を更新し、レンダリングを開始する必要があります。

// update scene on each tick
function tick() {
butterfly.move()
stage.update();
}

翼の段階的なアニメーション
蝶のアニメーションを説明するには、羽ばたく翼と動きをすべて別々のステップに分割する必要があります。 しかし、最初に、蝶の初期状態を決定する別のパラメーター-初期スケールを設定しましょう（原則として、異なるサイズの蝶を作成する予定がない場合、スケール= 1.0に設定できません）：

// initial scale
butterfly.scale = butterfly.lWing.scaleX
= butterfly.lWing.scaleY = butterfly.rWing.scaleX
= butterfly.rWing.scaleY = 0.5 + 0.2 * Math.random();

水平方向（X方向）のスケーリングを介して翼のアニメーションを行うのが適切であり、周期性に三角関数を使用できます。

アニメーションのステップ数を設定しましょう：

// animation steps
butterfly.step = butterfly.steps = 40 + 60 * Math.random();

ここで、各ウェーブを説明する必要があります。

butterfly.move = function () {
var wingAngle = (butterfly.steps - butterfly.step) / butterfly.steps * Math.PI;
butterfly.lWing.scaleX = butterfly.rWing.scaleX
= butterfly.scale * (0.4 + 0.6 * Math.abs(Math.cos(wingAngle * 4)));

butterfly.step--;
}

共通コード

var leftSrc = "../images/Cypres 1.png" ;
var rightSrc = "../images/Cypres 2.png" ;
var leftImg;
var rightImg;
var loadedWings = 0;
var butterfly;
var butterflyLoaded = false ;

function init() {
// create a new stage and point it at our canvas:
canvas = document .getElementById( "canvas" );
stage = new Stage(canvas);

// loading left wing
leftImg = new Image();
leftImg.src = leftSrc;
leftImg.onload = onWingImageLoaded;

// loading right wing
rightImg = new Image();
rightImg.src = rightSrc;
rightImg.onload = onWingImageLoaded;

// subscribe to Ticker
Ticker.addListener(window);
}

function onWingImageLoaded( event ) {
loadedWings++;
if (loadedWings == 2)
onButterflyReady();
}

function onButterflyReady() {
// create a new container for butterfly wings
butterfly = new Container();
// create wings
butterfly.lWing = new Bitmap(leftImg);
butterfly.rWing = new Bitmap(rightImg);

// assemble a batterfly
butterfly.addChild(butterfly.lWing);
butterfly.addChild(butterfly.rWing);

// change wings registration point inside container
butterfly.lWing.regX = butterfly.lWing.image.width;
butterfly.lWing.regY = butterfly.lWing.image.height / 2;
butterfly.rWing.regX = 0;
butterfly.rWing.regY = butterfly.rWing.image.height / 2;


// add butterfly to stage
stage.addChild(butterfly);

// change batterfly position
butterfly.x = canvas.width * Math.random() | 0;
butterfly.y = canvas.height * Math.random() | 0;

// initial rotation
butterfly.lWing.rotation = butterfly.rWing.rotation
= butterfly.angle = 360 * Math.random() | 0;

// initial scale
butterfly.scale = butterfly.lWing.scaleX
= butterfly.lWing.scaleY = butterfly.rWing.scaleX
= butterfly.rWing.scaleY = 0.5 + 0.2 * Math.random();

// animation steps
butterfly.step = butterfly.steps = 40 + 60 * Math.random();

// move butterfly
butterfly.move = function () {
var wingAngle = (butterfly.steps - butterfly.step) / butterfly.steps * Math.PI;
butterfly.lWing.scaleX = butterfly.rWing.scaleX
= butterfly.scale * (0.4 + 0.6 * Math.abs(Math.cos(wingAngle * 4)));

butterfly.step--;
}

butterflyLoaded = true ;

// redraw stage
stage.update();
}

// update scene on each tick
function tick() {
if (butterflyLoaded && butterfly.step >= 0) {
butterfly.move()
}
stage.update();
}

完成した例は、 例2にあり ます。

ステップ3.バタフライを移動する

蝶に羽ばたきを教えるようになったので、蝶を動かしてみましょう。 これを行うには、回転角度と移動の方向と速度を考慮する必要があります。

// initial rotation
butterfly.lWing.rotation = butterfly.rWing.rotation
= butterfly.angle = 360 * Math.random() | 0;
// movement direction
butterfly.direction = 8 * Math.random() - 4.0;
// movement speed
butterfly.speed = 5 * Math.random() + 5;

butterfly.move関数内では、回転角度の変更を追加するために残ります。

butterfly.angle += butterfly.direction + (5.0 * Math.random() - 2.5);
butterfly.lWing.rotation = butterfly.rWing.rotation = butterfly.angle;

および移動の増分：

butterfly.x += (butterfly.speed * Math.sin((butterfly.angle) / 180.0 * Math.PI));
butterfly.y -= (butterfly.speed * Math.cos((butterfly.angle) / 180.0 * Math.PI));

蝶が飛ぶはずです。



完成した例はここにあります： 例3

ステップ4.コードを作成する

その後、蝶のコレクション全体を処理する必要があるため、別のブロックで蝶の作業の説明を含むコードを選択するのが論理的です（マウスに対する追加の反応も青色で強調表示されます）。

( function (window) {

Butterfly = function (leftImg, rightImg) {
this .initialize();
this .initButterfly(leftImg, rightImg);
}

var p = Butterfly.prototype = new Container();

p.lWing = null ;
p.rWing = null ;
p.angle = 0;
p.direction = 0;
p.speed = 0;

p.steps = 0;
p.step = -1;

p.initButterfly = function (leftImg, rightImg) {
// create wings
this .lWing = new Bitmap(leftImg);
this .rWing = new Bitmap(rightImg);

// change wings registration point inside container
this .lWing.regX = this .lWing.image.width;
this .lWing.regY = this .lWing.image.height / 2;
this .rWing.regX = 0;
this .rWing.regY = this .rWing.image.height / 2;

// initial rotation
this .lWing.rotation = this .rWing.rotation = this .angle = 360 * Math.random() | 0;

// initial scale
this .scale = this .lWing.scaleX = this .lWing.scaleY = this .rWing.scaleX = this .rWing.scaleY = 0.5 + 0.2 * Math.random();

// assembling batterfly
this .addChild( this .lWing);
this .addChild( this .rWing);

this .mouseEnabled = true ;
this .onMouseOver = function (e) { this .reset(); };
};

p.reset = function () {
// animation steps
this .step = this .steps = 40 + 60 * Math.random();
// movement direction
this .direction = 8 * Math.random() - 4.0;
// movement speed
this .speed = 5 * Math.random() + 5;
};

p.move = function () {
// update rotation
this .angle += this .direction + (5.0 * Math.random() - 2.5);
this .lWing.rotation = this .rWing.rotation = this .angle;

// update wings
var wingAngle = ( this .steps - this .step) / this .steps * Math.PI;
this .lWing.scaleX = this .rWing.scaleX = this .scale * (0.4 + 0.6 * Math.abs(Math.cos(wingAngle * 4)));

// update position
this .x += ( this .speed * Math.sin(( this .angle) / 180.0 * Math.PI));
this .y -= ( this .speed * Math.cos(( this .angle) / 180.0 * Math.PI));
this .step--;
};

p.isActive = function () {
return this .step >= 0;
};

window.Butterfly = Butterfly;
} (window));

残りのコードは少し簡略化されていますが、マウスからのイベントトラッキングを有効にする必要もあります。

var leftSrc = "../images/Cypres 1.png" ;
var rightSrc = "../images/Cypres 2.png" ;
var leftImg;
var rightImg;
var loadedWings = 0;
var butterfly;
var butterflyLoaded = false ;

function init() {
// create a new stage and point it at our canvas:
canvas = document .getElementById( "canvas" );
stage = new Stage(canvas);
stage.enableMouseOver(10);

// loading left wing
leftImg = new Image();
leftImg.src = leftSrc;
leftImg.onload = onWingImageLoaded;

// loading right wing
rightImg = new Image();
rightImg.src = rightSrc;
rightImg.onload = onWingImageLoaded;

// subscribe to Ticker
Ticker.addListener(window);
}

function onWingImageLoaded( event ) {
loadedWings++;
if (loadedWings == 2)
onButterflyImagesReady();
}

function onButterflyImagesReady() {
// create a new container for butterfly wings
var butterfly = new Butterfly(leftImg, rightImg);

// add butterfly to stage
stage.addChild(butterfly);

// change batterfly position
butterfly.x = canvas.width * Math.random() | 0;
butterfly.y = canvas.height * Math.random() | 0;

butterfly.reset();
butterflyLoaded = true ;

// redraw stage
stage.update();
}

// update scene on each tick
function tick() {
if (butterflyLoaded && butterfly.step >= 0) {
butterfly.move()
}
stage.update();
}

完成した例はここにあります： 例4

たくさんの蝶

さらに蝶を追加しましょう。 翼の画像アドレスの配列が必要です：

var bfimgsrc = [{ left: "../images/Didius 1.png" , right: "../images/Didius 2.png" },
{ left: "../images/Amphitrion 1.png" , right: "../images/Amphitrion 2.png" },
{ left: "../images/Catenarius 1.png" , right: "../images/Catenarius 2.png" },
{ left: "../images/Cyanides 1.png" , right: "../images/Cyanides 2.png" },
{ left: "../images/Cypres 1.png" , right: "../images/Cypres 2.png" },
{ left: "../images/Diana 1.png" , right: "../images/Diana 2.png" },
{ left: "../images/Hecuba 1.png" , right: "../images/Hecuba 2.png" },
{ left: "../images/Peleides 1.png" , right: "../images/Peleides 2.png" },
{ left: "../images/Polyphemus 1.png" , right: "../images/Polyphemus 2.png" },
{ left: "../images/Sulkowski 1.png" , right: "../images/Sulkowski 2.png" }];

別の関数loadButterflyisで蝶を作成し、マウスをクリックしてさらに蝶を起動します。

function init() {
// create a new stage and point it at our canvas:
canvas = document .getElementById( "canvas" );
stage = new Stage(canvas);
stage.enableMouseOver(10);

loadButterflyis(18);

canvas.onclick = function () {
loadButterflyis(5);
};

// subscribe to Ticker
Ticker.addListener(window);
}

function loadButterflyis(count) {
for ( var k = 0; k < count; k++) {
var i = Math.floor(bfimgsrc.length * Math.random());

var bfimages = {
left: new Image(),
right: new Image(),
loadedWings: 0,
onready: onButterflyImagesReady
};

// loading left wing
bfimages.left.src = bfimgsrc[i].left;
bfimages.left.onload = onWingImageLoaded;
bfimages.left.butterfly = bfimages;

// loading right wing
bfimages.right.src = bfimgsrc[i].right;
bfimages.right.onload = onWingImageLoaded;
bfimages.right.butterfly = bfimages;
}
}

更新されたティック ：

// update scene on each tick
function tick() {
for ( var i = 0; i < bfs.length; i++) {
var butterfly = bfs[i];
if (butterfly.isActive()) {
butterfly.move();
}
else if (Math.random() > 0.999) {
butterfly.reset();
}
}
stage.update();
}

完成した例はここにあります： 例5

特殊効果

追加の効果は非常に簡単です。 テーマの背景：



バックグラウンドでの音声：

< audio src ="audio/ArrivalForest.mp3" autoplay loop />

（モーグル愛好家は、他のオーディオ形式のサポートを簡単に追加できます。）

最終バージョンも利用可能です 。

更新しました。

ホスティングの問題を解決し、一時的にテスト用駐車場に置き、別々に：中間例と最終バージョンを1つのファイル-narod.ru/disk/6923480001/March8.zip.htmlに入れます

Source code was highlighted with Source Code Highlighter .