refs on primitives (animation with react-spring) about react-pixi-fiber HOT 8 CLOSED

Seems to work, thanks for the help! https://codesandbox.io/embed/0qkll4y5nw 🙂 This is animating 60fps, no React/forceUpdate involved. Would be ready for react hooks as well.

I only needed this for an article explaining on how to write custom targets on the react-spring site. But if you like we could make this into a real target. All it needs is a better understanding on what objects to set.

from react-pixi-fiber.

@drcmda it is most certainly possible, it's how I work with most of my animations. Can you provide a sandbox where it returns null?

from react-pixi-fiber.

You can find working example in the examples folder if you want, using a ref on ParticleContainer which is a primitive:

There's also an example of spring animation using animated:

from react-pixi-fiber.

I was testing with the first demo on the frontpage (https://codesandbox.io/s/q913r72jo4)

and i'm going

function Bunny(props) {
  return (
    <Sprite
      ref={r => console.log(r)}

There's also an example of spring animation using animated

The AnimatedSprite in that example would still use forceUpdate though and render the animation out. But animated can be taught to animate natively pretty easy if there's a way to reach the inner lowlevel instance the outward component abstracts.

from react-pixi-fiber.

@drcmda the way you're getting ref in this example is by creating new function on each render (with arrow style). Because of that the previous ref callback is called with null first and only then the underlying instance is used to call the callback again, see comment on react issue by @gaearon. Should you just used ref={console.log} it would log null only once, during the first render when it doesn't have the instance yet.

If it's of any help to you, the way I was approaching this problem when I wanted to have ref callback created every time, was doing something like: ref={r => r !== null && console.log(r)}.

Regarding the AnimatedSprite example, you are right that the animated instance will use forceUpdate to render animation. However, this is just an example to show that it's possible to integrate animated into react-pixi-fiber and setNativeProps was not implemented as a part of this project. I planned to implement native animated target as a part of different library though, but that was never pressing.

from react-pixi-fiber.

in react-spring it would only be a couple if lines and react-pixi can animate natively, it is in theory driven by animated, though it's faster and easier to use. I'll run some tests and if i have something i'll post here. Thanks for clearing it up, it was indeed the loop - stupid of me to not thinking of that. 😓

from react-pixi-fiber.

Glad it worked @drcmda, that's one cool looking demo!

I'm definitely into getting a real target, this might be useful for many users. Let me know what you need to know and we can sort this out. I think I might even resume work on raw animated integration (by implementing setNativeProps).

from react-pixi-fiber.

#95 shows an example how to implement Animated that will skip React's forceUpdate.

from react-pixi-fiber.