皆様こんにちは。どりゃ~です。

今回はTweenの応用の話。
水の波紋を作ってみます。

まず、水の波紋の元となる画像を用意します。
以下のような感じ。
(以下の画像は縦:400、横:400pixelで出来ております。)
Wave

青い(RGB:A0A0FF)四角形を定義して、
クリックした位置から波紋を出してみるというシナリオです。


普通になんの仕掛けもなく重ねて表示をすると以下のような感じです。
1 

波紋というにはちょっと苦しいと思います。
(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に変更することを想定しています。
そのため、基準点が左上にある状態ですとそこから広がっていくので
基準値を水の波紋の元となる画像の中央にしておく必要があります。

2


次に、変化前変化後
前回Tweenを扱ったときは1つのパラメータしか変更を行いませんでした。
同時に変更するときはコマンド内にパラメータを並べて書けばよいです。
1回のTweenで以下のように変更します。

X倍率(scaleX)0 ⇒ 0.4
Y倍率(scaleY)0 ⇒ 0.4
透明度(alpha)0.6 ⇒ 0
(変化時間2000ミリ秒) 


 本日はここまで。

 人気ブログランキング



↓ 実行結果