皆様こんにちは。どりゃ~です。
↓ 実行結果
今回はTweenの応用の話。
水の波紋を作ってみます。
まず、水の波紋の元となる画像を用意します。
以下のような感じ。
(以下の画像は縦:400、横:400pixelで出来ております。)
青い(RGB:A0A0FF)四角形を定義して、
クリックした位置から波紋を出してみるというシナリオです。
普通になんの仕掛けもなく重ねて表示をすると以下のような感じです。
波紋というにはちょっと苦しいと思います。
(Tweenが入ればそれっぽく見えると思いますが前段階として・・・)
ただ表示すると上記のようですが、
クリックした位置から徐々に、①縦に広がりつつ、②横に広がりつつ、③薄くなるとなると
波紋っぽくなります。
まずはソースコード。
↓↓↓↓↓ ここから ↓↓↓↓↓
↑↑↑↑↑ ここまで ↑↑↑↑↑
解説。
まず、赤文字の箇所を見てください。
これは基準点を意味します。デフォルトは(0,0)。
最初に倍率を0にしておき倍率を0.4に変更することを想定しています。
そのため、基準点が左上にある状態ですとそこから広がっていくので
基準値を水の波紋の元となる画像の中央にしておく必要があります。
次に、変化前と変化後。
前回Tweenを扱ったときは1つのパラメータしか変更を行いませんでした。
同時に変更するときはコマンド内にパラメータを並べて書けばよいです。
1回のTweenで以下のように変更します。
本日はここまで。
水の波紋を作ってみます。
まず、水の波紋の元となる画像を用意します。
以下のような感じ。
(以下の画像は縦:400、横:400pixelで出来ております。)
青い(RGB:A0A0FF)四角形を定義して、
クリックした位置から波紋を出してみるというシナリオです。
普通になんの仕掛けもなく重ねて表示をすると以下のような感じです。
波紋というにはちょっと苦しいと思います。
(Tweenが入ればそれっぽく見えると思いますが前段階として・・・)
ただ表示すると上記のようですが、
クリックした位置から徐々に、①縦に広がりつつ、②横に広がりつつ、③薄くなるとなると
波紋っぽくなります。
まずはソースコード。
↓↓↓↓↓ ここから ↓↓↓↓↓
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- ネットワークのcreatejsのファイル -->
<script src="https://code.createjs.com/easeljs-0.6.0.min.js"></script>
<script src="https://code.createjs.com/tweenjs-0.6.1.min.js"></script>
<style>
body
{
margin: 0;
}
</style>
<title>CreateJS demo</title>
</head>
<body>
<canvas width="400" height="400" id="main"></canvas>
<script>
/*
(1) easeljs-0.6.0.min.js
The MIT License (MIT)
Copyright (c) 2013 gskinner.com
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
(2) tweenjs-0.6.1.min.js
The MIT License (MIT)
Copyright (c) 2015 gskinner.com
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
var dispFlg = 0;
var canvas;
var stage;
var circle;
var foundation;
// <canvas id="???"> の???を指定してcanvasを取得
canvas = document.getElementById("main");
stage = new createjs.Stage(canvas);
// 台紙
foundation = new createjs.Shape();
foundation.graphics.beginStroke("#FFFFFF").beginFill("#FFFFFF").drawRect(0, 0, 400, 400);
stage.addChild(foundation);
// 水面
surface = new createjs.Shape();
surface.graphics.beginStroke("#A0A0FF").beginFill("#A0A0FF").drawRect(0, 0, 400, 400);
surface.addEventListener("click", surface_OnClicked);
stage.addChild(surface);
// 中心座標
var rx = 200;
var ry = 200;
// ステージを更新する
createjs.Ticker.addEventListener("tick", handleTick);
function handleTick() {
stage.update();
}
function surface_OnClicked(eventObject)
{
// 円
var bitmap = new createjs.Bitmap('Wave.png');
// 座標設定
bitmap.x = eventObject.stageX;
bitmap.y = eventObject.stageY;
// 基準点設定
bitmap.regX = rx;
bitmap.regY = ry;
// 波紋変化前
bitmap.scaleX = 0;
bitmap.scaleY = 0;
bitmap.alpha = 0.6;
// Tweenを使用して徐々に広がりつつ薄く透明にする
createjs.Tween.get(bitmap)
.to({scaleX: 0.4, scaleY: 0.4, alpha: 0}, 2000);
// stageにBitmapオブジェクトを配置
stage.addChild(bitmap);
}
</script>
</body>
</html>
↑↑↑↑↑ ここまで ↑↑↑↑↑
解説。
まず、赤文字の箇所を見てください。
これは基準点を意味します。デフォルトは(0,0)。
最初に倍率を0にしておき倍率を0.4に変更することを想定しています。
そのため、基準点が左上にある状態ですとそこから広がっていくので
基準値を水の波紋の元となる画像の中央にしておく必要があります。
次に、変化前と変化後。
前回Tweenを扱ったときは1つのパラメータしか変更を行いませんでした。
同時に変更するときはコマンド内にパラメータを並べて書けばよいです。
1回のTweenで以下のように変更します。
X倍率(scaleX)0 ⇒ 0.4
Y倍率(scaleY)0 ⇒ 0.4
透明度(alpha)0.6 ⇒ 0
(変化時間2000ミリ秒)
(変化時間2000ミリ秒)
本日はここまで。
↓ 実行結果