HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う

第24回 マウスポインタの動きに弾みがついた曲線を滑らかに描く

この記事を読むのに必要な時間:およそ 5 分

前回の第23回マウスポインタの軌跡を滑らかな線で描きながら消すは,マウスポインタの動きに沿って,滑らかに描かれては消える線のアニメーションをつくった。その線は,マウスポインタの動きに少し遅れて描かれた。今回は,線の表現にもう少し手を入れて仕上げよう。

弾みのついた軌跡を描く

マウスポインタの動きに少し遅れて,減速しながら目的の位置にたどりつく,いわゆるイーズアウトの動きはインタラクティブなアニメーションでよく見かける。けれど,今回はむしろ線の描き方に弾みをつけたい。勢い余って目的地を通り越す,バネやゴムの動きだ。

第23回コード2マウスポインタの動きに沿って描いた線を後から順に消してゆくに手を加えてゆこう。Ticker.tickイベントのリスナー関数(draw())をつぎのように書き改めた。新たな変数(friction)もひとつ定めた。これで,マウスポインタの動きに勢いの加わった線が描かれる。

var lastMidPoint = new createjs.Point();
var currentPoint = new createjs.Point();
var lastPoint = new createjs.Point();
var velocityX = 0;
var velocityY = 0;
var ease = 0.25;
var friction = 0.75;

function draw() {
  var moveX = (stage.mouseX - currentPoint.x);
  var moveY = (stage.mouseY - currentPoint.y);

  if (moveX * moveX + moveY * moveY > 0.1) {
    // velocityX = moveX * ease;
    // velocityY = moveY * ease;
    velocityX += moveX * ease;
    velocityY += moveY * ease;
    velocityX *= friction;
    velocityY *= friction;
    currentPoint.x += velocityX;
    currentPoint.y += velocityY;
    var midPoint = new createjs.Point((lastPoint.x + currentPoint.x) / 2, (lastPoint.y + currentPoint.y) / 2);
    var myShape = getNewChild();
    container.addChild(myShape);
    drawCurve(myShape.graphics, lastMidPoint, midPoint, lastPoint);
    lastPoint.initialize(currentPoint.x, currentPoint.y);
    lastMidPoint.initialize(midPoint.x, midPoint.y);

  }
  stage.update();
}

第23回コード2で,ある位置からつぎの位置に動くとき,縦軸は位置,横軸を時間としたグラフを描くとつぎの図1のようになる。時間が経つにしたがって,位置は目標に近づく。ただし,目標に近づくにつれ,その動きは遅くなっている。そのため,第23回コード2では,マウスポインタに少し遅れながら線が描かれた。

図1 動きが遅くなりながら目標に近づく

図1 動きが遅くなりながら目標に近づく

それに対して,前掲のコードでは,初めは目標の位置を通り越す。しかし,バネのように戻っては通り過ぎる動きを繰り返して,次第に目標値に近づいてゆく図2)。こうすると,マウスポインタの動きに弾みのついた線が描かれることになる。第23回コード2の式との数学的な意味の違いは,後に項を改めて解説する。

図2 目標を通り過ぎては戻るバネのような動き

図2 目標を通り過ぎては戻るバネのような動き

著者プロフィール

野中文雄(のなかふみお)

ソフトウェアトレーナー,テクニカルライター,オーサリングエンジニア。上智大学法学部卒,慶応義塾大学大学院経営管理研究科修士課程修了(MBA)。独立系パソコン販売会社で,総務・人事,企画,外資系企業担当営業などに携わる。その後,マルチメディアコンテンツ制作会社に転職。ソフトウェアトレーニング,コンテンツ制作などの業務を担当する。2001年11月に独立。Web制作者に向けた情報発信プロジェクトF-siteにも参加する。株式会社ロクナナ取締役(非常勤)。

URLhttp://www.FumioNonaka.com/

著書

コメント

コメントの記入