useTransition, how to set it up properly

[jimmytheguitarman]

Hi there, i'm new to react-spring. I'm trying to follow a course on Udemy, and in this course the react-spring library is used. Recently this library has been updated (as you all propably now) but i find it pretty hard to figure out how it should be used.

Since the course is a simple multiplayer shooting game, i would like to know how to make a little animation each time a target has been hit.

For the moment, when a target is hit, all targets disappear for a moment, move to the top of the screen for some reason, and then reappear from the top of the screen minus the target that has been hit. Which is not the way it is meant to happen.

The targets should only implode where they are using a scale transform.

Here is the link to the github repo: https://github.com/jimmytheguitarman/shooter

I would be very gratefull if someone could have a look at it.

[joshuaellis]

Not ideal, but here's an example of how to use useTransition with useChain you can probably ignore useChain and just look specifically at how I've used Transition.

#1367 (comment)

We're currently working on adding loads of examples to the repo. Hopefully, after that, I'll have a chance to update the docs.

[jimmytheguitarman]

I did something similar with no success.

Here is a piece of the code that i'm tryung to use.

<import React, { useEffect, useState } from "react";
import { useTransition, animated } from "react-spring";
import { withTracker } from "meteor/react-meteor-data";

import Target from "./Target";

import { _ } from "lodash";
import { gamesCollection } from "../api/gamesCollection";

function App (props){
const [x, setX] = useState(0);
const [y, setY] = useState(0);

useEffect(() => {
    let isPointerLocked = false;

    setInterval( function (){
        const gameId = props.game._id;
        if(gameId){
            Meteor.call("game.ping", gameId);
        }
    }, 5000);
    
    window.addEventListener('click', () => {
        if(!isPointerLocked) {
            document.body.requestPointerLock();
        }
    });

    document.addEventListener('pointerlockchange', () => {
        isPointerLocked = document.pointerLockElement === document.body;
    });

    let tempX = 0, tempY = 0;
    window.addEventListener('mousemove', (evt) => {
        if(isPointerLocked) {
            tempX -= evt.movementX;
            tempY -= evt.movementY;

            setX(tempX);
            setY(tempY);                
        }
    });
    
}, []);
//console.log(x, y);

const handleClick = (_id)=>{
    console.log(_id);
    Meteor.call("target.remove", props.game._id, _id);
}

console.log(props.game.targets)
const transitions = useTransition(props.game.targets, item => item._id,
            {
    from:  { scale: 0 }, 
    enter: { scale: 1 },
    leave: { scale: 0 },
    });

const animation = () => {
    window.requestAnimationFrame(animation);
}

window.requestAnimationFrame(animation);

return (
    <>
        <div className="crosshair"/>
        
        { transitions((style, items, key) => {
            return (
                <animated.div style={style} className="target-holder">
                    <Target x={x+items.x} y={y+items.y} size={items.size} _id={items._id} onClick={handleClick}/>
                </animated.div>
        )
        })}          
    </>
)

}

export const AppWithTracker = withTracker (({ gameId }) => {
const game = gamesCollection.findOne({ _id: gameId }) || { targets: [] };
return { game }
})(App);>

[joshuaellis]

If you want someone to look at, please use a cose sandbox 😄

[jimmytheguitarman]

I've tried to, but i've got too many dependency errors, and i don't have the time to figure this all out.

I've shared the github repo with everything in it??

[joshuaellis]

i think the problem is youre passing the second argument of useTransiton as a function to set keys, you don't need to do that anymore, so the second arg should be the props. if you do need to set keys, put it as a prop in the props you're passing.

[jimmytheguitarman]

I've tried that as well, and this works more or less.

When i use useState, the animation works on one element only, which is ok.

With the Meteor withTracker, to monitor a Mongo db instance, the whole list of objects are animated each time something changes in the Mongo db instance, even when this something is not even passed in the objects array in the useTransition object.

For example i'm monitoring the game.targets, which is an array of objects that needs to be monitored to be animated on remove.

When i change a timestamp in game.lastPing, which is in the same db instance, everything seems to be removed, and placed back on screen directly.

I assume this is because i've updated the db instance with a new instance, which is the way how it should happen because of the immutabillity of objects. I think the useTransition is seeing that the entire instance has been changed with a new one, and rerenders everything that has been passed trough that instance, which means animate the remove animation on every object.