How to make the carousel map play automatically?

[jiameng123]

I created a carousel component through the scenery package of scenejs. It works fine when I click on the next or previous one, but I don't know how to make it play automatically, because I didn't set jsx during initialization. The keyframes property is used instead of code: ` React.useEffect(() => { const scene = (SceneRef as any).current;

	const sceneItem = scene.getItem(".carousel");
	scene.getItem(".carousel").set({
		".carousel": {
			"0": {
				transform: {
					translateX: prevPos + "px"
				}
			},
			"1": {
				transform: {
					translateX: `${current * -parseFloat(width)}` + "px"
				}
			}
		}
	});
	scene.play();
}, [current, prevPos]);`

so what do I need to do? Thank you

[jiameng123]

Sorry, the code format seems to have some problems.

[daybrush]

@jiameng123 Do you want to write code like this?

const carousel = scene.newItem(".carousel", { selector: true });
// scene.getItem(".carousel")
carousel.set({
    "0": {
        transform: {
            translateX: prevPos + "px"
        }
    },
    "1": {
        transform: {
            translateX: `${current * -parseFloat(width)}` + "px"
        }
    }
});

[jiameng123]

@daybrush

No, I want to know how to make the carousel map play automatically.

I can't control this property via autoplay because I didn't set the keyframes property when I first loaded it.

[daybrush]

@jiameng123

Oh, maybe you use react-scenejs. Theautoplay option only works during the first mount. Otherwise, you must call the play method manually.

[jiameng123]

@daybrush

Yes, I am using react-scenejs. Because in the <Scene></Scene> component, I didn't set the keyframs, all I can't use the autoplay property to control the autoplay of the carousel.

Now my solution is to call Scene.ref.current.play() in setInterval to control autoplay. I can't think of other ways.

[daybrush]

@jiameng123

Unfortunately, the role of autoplay now cannot do that.

Is there any way you want to use it? I'll take a look at improving it.

[jiameng123]

@daybrush

In react-scenejs.., it seems that the autoply and keyframes properties don't seem to allow dynamic changes. For example:

const [autoPay, setAutoPlay] = useState(flase);  

<Scene autoplay={autoPlay}></Scene>

 <button onClick={() =>setAutoPlay(true)}>click</button>

The above code is invalid, same is true for keyFrames, which cannot be modified by state.

in React, this is invalid. I just call scene.play() by calling the scene's ref in the timer.

I don't know if I said it clearly. If necessary, I can reproduce these situations in the codepen.

[daybrush]

@jiameng123

Oh, i see. Keyframes is not going to be easy. But I can do autoplay. I will fix react-scenejs and check them today or tomorrow.

[jiameng123]

@daybrush

I have a suggestion, can I replace autoplay with the paly attribute in react-scenejs? In this way, you don't need to control the playback through the scene.play property in scene.ref. Just control the Boolean value in the react state to control whether it plays automatically or when.

[daybrush]

@jiameng123 Maybe play is named autoplay because it same with autoplay. But autoplay is the right function you want.

[jiameng123]

@daybrush

Ok, thank you very much, no matter what, thanks to Scene.js

At the same time, I hope to add some simple demos to the react-scenejs, such as the carousel map or the progress bar. This will attract some beginners or more people to use react-scenejs. Finally, thanks again.

[daybrush]

@jiameng123 Hi. [email protected] has been published.

ready props have been added. When you are ready to initialize, set ready to true.

render() {
    const { ready, keyframes} = this.state;
    return (<Scene keyframes={keyframes} ready={ready} autoplay >...</Scene>)
}
anywhere() {
    this.setState({
        ready: true,
        keyframes: { ... },
    });
}

[jiameng123]

@daybrush

Thank you very much, this feature has helped me a lot.