Animate between two colors

Questions
,
1

Can .animate of a zim display object do this? Otherwise, and actually anyway, how do I make a generic .animate call that just provides a "tick"/percentage complete so I can calculate it myself?

2

Yes - any DisplayObject with a color can be animated:

new Circle(100,red).center().animate({color:blue});

To custom animate

const obj = {a:10};
animate({
  target:obj,
  props:{a:20},
  time:2,
  ease:"backOut",
  rewind:true,
  loop:true,
  animateCall:target=>{somethingElse.whatever = target.a}
})
1 Like
3

OK I'm going to express two sins: slothy and greedy. Can zim.animate do something like this:

animate({time: 5, animationProgress: unitProgress => ...})

so basically I just want a wrapper to get the current progress (0...1) over time. Maybe Ticker or something already does this? This "barebones". OR, would this already do it?...

animate({time: 5, animateCall: ignored => ???HOW REFER TO THE CURRENT PROGRESS?});

Here's what I'm doing to achieve the above now:

const t = {val: 0};
animate({time: 5, target: t, props: {val: 1}, animateCall: target => ... = target.val});

4

Yes - the percentComplete property of the target gets set as the animation goes. Most of the time that will be fine for you. For a series, we were having some problems as we wanted an overall percentComplete. We did somewhat get that - it is what the ZIM TimeLine uses - but we had a problem in all cases of a series with waits, rewinds, etc. However each individual tween in the series also has a percentComplete so you can get target.currentTween.percentComplete and that is always correct. Anyway, for a regular tween, getting and setting target.percentComplete should work fine.

5

Thank you Dr.! I have I think found a lighter solution to what I'm after, without going as raw as wrapping the requestAnimationFrame myself:

        const anim = createjs.Tween
            .get({val: 0}, {
                onChange: (v) => console.log(v.currentTarget.target.val),
                onComplete: () => console.log("DONE")
            })
            .to({val: 1}, 1000);

I presume this is lighter than calling through zim.animate just to get a linear progression from 0 to 1 over time? I took a not-too-deep look at zim.animate and found it calling createjs.Tween (?). Is there a simpler built-in way to do this with ZIM or CreateJS?

6

Yes - calling the CreateJS Tween would be the lightest way and a little easier than just using the requestAnimationFrame() as you do not need to worry about a tweening function.