Timeline class

Community Showcase
#1

I tried to re-implement the timeline class, to be able to programmatically control it. The .zpp shows 2 animations, the white and green squares from the top are controlled by the official timeline controller. The ones on the bottom are controlled by my timeline class. So to start and stop both animations, you click on the white square from the bottom. The class is on script node Script, and the main program on node Plane-pointerenter0 under WhiteBottom. The api is supposed to be equal to or as close as possible to the official api. The main program is there to show the usage. Don’t mind the console log spamming, you can remove those if you want, it’s just for debugging.

Feel free to report problems you find where expected behavior doesn’t happen but the input is valid. Consider this a beta, I’m still working on it. It still needs some serious refactoring, input validation, and it very likely has bugs. But I’m sharing it anyway because I think it’s usable.

EDIT
I didn’t come up with the interpolators. You can see them when running ZapWorks Studio, just click on the engine symbol to open developer tools -> sources -> zappar.js and click on {} to pretty print. CTRL+F interp, there you go.

EDIT
There are a few more events that are not available in the original api, which are:
play -> emitted when the play function is called
restart -> emitted when a timeline restarts - only happens if the timeline loops
stop -> emitted when the stop function is called

EDIT
new version. Fixed a few bugs, cleaned up code. It’s a lot more concise, removed tons of code repetition and unnecessary variables, and improved logic. In the example attached now you click on a plane called activate at the bottom to play the timelines.

I didn’t actually talk about what are the valid inputs, but it’s pretty intuitive:

  1. All keyframes must be in the array in ascending order of time. If one keyframe starts at time 50, it should come before a keyframe that starts at time 100, for example.

  2. The length must be bigger than the last keyframe. In the example attached, the last keyframe starts at 1000, so the length must be at least 1001.

I think that’s about it. Feel free to ask any questions though.
timeLineClass2.zpp (217.8 KB)

2 Likes
How to use timelines to animate variables that aren't "properties"?
#2

Wow Nice!
This will come in handy. Have you tried using variables with it?
I would love to use timelines where we can change it as it plays.

Steve

#3

Yes, it’s supposed to be an alternative to the relativeToProp workaround. You can use variables instead of hardcoded values. It wouldn’t make much sense to use this class if you couldn’t haha.You can change already initialized timelines by doing

let val = [-1.467, -0.5666680000000004, 0];
timeline.on("restart", () => {
   timeline.properties[0].keyframes[0].value = val;

});

for example. That reminded me…I have extended the api, there are a few extra events available. The restart one, for example, is emitted when a timeline restarts. That is, only if it loops.

Glad you liked it!

1 Like
#4

New version, bug fixes and code clean up. Missing features are the active and notactive events, as well as the enqueue function. See this post.. I may implement the random keyframe now.

1 Like