Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
11
Help us understand the problem. What is going on with this article?
@omatoro

tmlib.jsで簡単アニメーション

More than 5 years have passed since last update.

tmlib.jsで簡単アニメーション

tmlib.jsには、オブジェクトを簡単にアニメーションさせるtweener機能がついてます。

tweener

連続で指定すると、アニメーション終了後に次のアニメーションにすすみます。

tm.display.RectangleShape(100,100)
    .addChildTo(this)
    .setPosition(0, 0)
    .tweener.clear()
        .to({x: 300, y: 200, alpha: 0.5}, 1000)
        .to({x: 500, y: 600, alpha: 1.0}, 1000)
        ;

// 変化させる値,アニメーションする時間(ミリ秒),イージングの順番で指定する

timeline

timelineはtweenerと違い、開始する時間を指定できます。

tm.display.RectangleShape(100,100)
    .addChildTo(this)
    .setPosition(0, 0)
    .timeline.clear()
        .to(0,   {x: 300, y: 200, alpha: 0.5}, 1000)
        .to(300, {x: 500, y: 600, alpha: 1.0}, 1000)
        ;

// 開始する時間,変化させる値,アニメーションする時間,イージングの順番で指定する

そもそもイージングって何

イージングは、アニメーションをなめらかに行うためのものです。
ここらへんみると分かりやすいかと。

こんな感じで書きます。

tm.display.RectangleShape(100,100)
    .addChildTo(this)
    .setPosition(0, 0)
    .tweener.clear()
        .to({x: 300, y: 200, alpha: 0.5}, 1000, "easeInOutQuad")
        .to({x: 500, y: 600, alpha: 1.0}, 1000, "easeInOutQuad")
        ;

// 変化させる値,アニメーションする時間(ミリ秒),イージングの順番で指定する

一時変数も使わず一気にかけるチェーンメソッドすばらしいすなぁ。

11
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
omatoro

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
11
Help us understand the problem. What is going on with this article?