Skip to main content
Inspiring
February 1, 2018
Answered

Following a circular guide layer with a classic tween

  • February 1, 2018
  • 1 reply
  • 2090 views

Hi All,

I am trying to figure out how to force my classic tweened objects to follow a circular guide layer all the same direction counter clockwise. The Rotate setting in the Tweening panel spins the object unless set to 0 and that does seem to work sometimes, but is inconsistent. It really get bad after following the path past 180 degrees. It always wants to take the shortest path to the destination. How do I get the items at 2 o'clock to got the short way and the items at 10 o'clock to got he long way round, or all items moving counter clockwise along the circular guide path?

Also I don't want the items to Orient to Path, they should stay top-up the whole way round.

Please help. Thanks!

Dan

    This topic has been closed for replies.
    Correct answer ClayUUID

    Hi Clay,

    I have never heard of the Tween Library. I Googled it and i got this page ... CreateJS | A suite of JavaScript libraries and tools designed for working with HTML5 ... I this where I start?


    If you're working in a Canvas document, then yes. That is the same library that Animate internally uses itself for most tweens.

    So for example if you had a movieclip on your stage named thing, and three buttons named btn1, btn2, btn3 (optionally arranged around it in a triangle pattern), this code would make it spin by clicking the buttons:

    var root = this;

    this.btn1.on("click", doBtn1);

    this.btn2.on("click", doBtn2);

    this.btn3.on("click", doBtn3);

    function doBtn1() {

        spinTo(root.thing, 0);

    }

    function doBtn2() {

        spinTo(root.thing, 120);

    }

    function doBtn3() {

        spinTo(root.thing, 240);

    }

    function spinTo(clip, angle) {

        createjs.Tween.get(clip).to({"rotation": angle}, 500, createjs.Ease.backInOut);

    }

    Note that this example doesn't optimize the spin direction, meaning if you try to rotate from 350 to 0, it will take the long way around. This is pretty easy to fix, but does take more code.

    Well okay, it takes exactly this much more code:

    function spinTo(clip, angle) {

        if (Math.abs(clip.rotation - angle) > 180) {

            angle += clip.rotation > angle ? 360 : -360;

        }

        createjs.Tween.get(clip, {override:true}).to({"rotation": angle}, 750, createjs.Ease.backOut).call(spinDone);

    }

    function spinDone(evt) {

        evt.target.rotation = evt.target.rotation % 360;

    }

    1 reply

    kglad
    Community Expert
    Community Expert
    February 1, 2018

    inserting an intermediate keyframe can help animate to understand what you want.

    Inspiring
    February 1, 2018

    That won't work it messes up my easing. I should say that there are 6 objects following the same path and they need to do it at the same time with the same easing. Think of a Ferris wheel where the objects rotate along the path but stay straight up.

    Colin Holgate
    Inspiring
    February 1, 2018

    Ferris wheels don't have much easing, other than when they start up and stop, the rest of the time they're rotating at a constant speed I think.

    Can you show what you're working on? I have ideas of a solution, but it may not apply to what you're doing.