PixiJS animate

[BlackRam-oss]

Hi, I'm developing a PixiJS game/engine.
PixiJS is a 2D rendering engine that uses WebGL.

I discovered that it is possible to use "animate" to animate a pixijs component:

const sprite = new Sprite()
animate(sprite, { rotation: 20 }, { duration: 10, repeat: Infinity, ease: "linear" });

Which is great.

The only thing I'd like to do is trigger "change events" using PixiJS. By that I mean: I don't know how "animate" works internally, but I imagine it uses some JS events to continuously execute one or more functions that change the element. What I'd like to do is create another function that is a copy of "animate" but uses PixiJS.Ticker https://pixijs.com/8.x/guides/components/ticker to "trigger change events."

What I need to know is where "animate" was defined and if you have any suggestions.

[mattgperry]

The Motion equivalent is https://motion.dev/docs/frame. I'm not sure it's necessary to use the Pixi one?

[BlackRam-oss]

Exactly. I would like to create a function equal to "motion.animate" that uses PixiJS methods instead of using "motion.frame".

Could you tell me in the motion code where the motion.animate function is defined?

[mattgperry]

This isn’t a documented API but you could make a Pixi version of this

motion/packages/motion-dom/src/animation/drivers/frame.ts

Line 6 in 74a4413

export const frameloopDriver: Driver = (update) => {

And pass it in via animate’s driver option

[BlackRam-oss]

It should be possible to create a frameloopDriver based on pixijs.
The only thing pixijs relies on is deltatime; I'd need to figure out how to convert it to a timestamp.

https://github.com/BlackRam-oss/motion/blob/main/packages/motion-dom/src/animation/drivers/frame.ts#L20

but it's not clear to me how I can use this new frameloopDriver in "animate"

[mattgperry]

Pass it via the driver option

[BlackRam-oss]

Yep, everything seems to be working.
Thank you