search

theatre-js / theatre

Motion design editor for the web
https://www.theatrejs.com
Apache License 2.0
11.37k stars 361 forks source link

Setting keyframes from code #411

Open hybridherbst opened 1 year ago

hybridherbst commented 1 year ago

I'm creating some procedural animations, and would like to visualize them and continue editing with theatre. I looked into some of the code for the detail pane, and things like setKeyframeAtPosition, however I can't get that to work / it doesn't seem to be documented.

Is there an example for something like "create 10 keyframes for a specific object in code and continue to work on it in theatre"?

Thanks!

vimlesh1975 commented 1 year ago

I am a beginner in this theatrejs. Object obj1 left value must be manually set to sequence by right clicking. I have tested and found something like below works. studio.transaction((api) => { for (let i = 0; i <= 10; i++) { sheet.sequence.position = i; api.set(obj1.props.left, i * 100); } })

hybridherbst commented 1 year ago

Thanks - however I think manually starting kind of defeats the purpose of generating the animation in the first place...

akre54 commented 1 year ago

Late to this, but we're currently running up against this same issue. It'd be nice if there were a little cleaner API but it's definitely doable.

Automating the track data would require calling something like stateEditors.ts _ensureTracksOfObject from within set. Is this something you'd be open to @AriaMinaei ?