Animation lag.
-
I am working on a cassette plugin that has wheels that are animated. For some reason, the wheels stutter and aren't smooth. I'm thinking the culprit is the absence of delta time, but I'm not sure. This is the code:
Content.makeFrontInterface(900, 600); const var wheel_timer = Engine.createTimerObject(); const var wheel = Content.getComponent("wheel"); const var wheel1_b = Content.getComponent("wheel1_b"); const var wheel2_b = Content.getComponent("wheel2_b"); const var wheel2 = Content.getComponent("wheel2"); var i = 100; var j = 100; wheel_timer.setTimerCallback(function() { i = i - 1; if (i%2 == 0) { j -= 1; }; if (i > 1) { wheel.setValue(i); wheel2_b.setValue(i); } else { i = 100; }; if (j > 1) { wheel2.setValue(j); wheel1_b.setValue(j); } else { j = 100; }; }); wheel_timer.startTimer(20);
-
@xander FYI, macOS might skip timer callbacks if you go below 30milliseconds. You can rule out performance issues by choosing a very low timer frequency (eg. 100ms), then see whether your logic skips some steps or it's related to UI performance.
-
@Christoph-Hart, I'm developing in Windows, and it seems to correlate directly to how fast my PC is running. Now, I am doing this with knobs. Would turning them into Lottie animations fix this, possibly?
-
@xander You can also use
reg
variables instead ofvar
, they are way faster -
@ustk I don't think it makes a difference in this context
-
@xander I also noticed your logic forces to go back to 100 when
i==2
(i > 1) instead of 0 which is probably the cause of the stuttering you see
And you have a lot of branching. Here's a simplified version that goes back to 100 only when vars are equal to 0wheel_timer.setTimerCallback(function() { --i; j -= 0.5; wheel.setValue(i); wheel2_b.setValue(i); wheel2.setValue(j); wheel1_b.setValue(j); if (i == 0) i = 100; if (j == 0) j = 100; });
-
@ustk This didn't fix it completely, but it definitely helped a lot, thank you