This commit is contained in:
lb 2023-11-06 21:23:21 +08:00
parent 7faba81628
commit b0e492f066
6 changed files with 61 additions and 21 deletions

View File

@ -75,9 +75,9 @@ function VideoContainer(props) {
const enterToFloorOne = () => { const enterToFloorOne = () => {
// //
props.onFloorUpdate(2); props.onFloorUpdate(1);
// floor1 one enter // floor1 one enter
dispatch({ type: 'enter-to-2' }); dispatch({ type: 'enter-to-1' });
}; };
function handleEnterVideoEnd() { function handleEnterVideoEnd() {

View File

@ -1,13 +1,24 @@
import { motion } from 'framer-motion'; import { motion } from 'framer-motion';
import { useRef } from 'react'; import { useRef, useEffect } from 'react';
function EnterToFloorOne(props) { function EnterToFloorOne(props) {
const vd = useRef(null); const vd = useRef(null);
const opacity = props.opacity || 0; const opacity = props.opacity || 0;
if (opacity == 1) { if (opacity == 1) {
vd.current.play(); setTimeout(() => {
vd.current.play();
}, 100);
} }
useEffect(() => {
vd.current.addEventListener('ended', () => {
setTimeout(() => {
vd.current.currentTime = 0;
}, 1000);
});
}, []);
return ( return (
<motion.div <motion.div
className="video-wrapper" className="video-wrapper"
@ -21,9 +32,9 @@ function EnterToFloorOne(props) {
opacity: opacity, opacity: opacity,
zIndex: -999, zIndex: -999,
}} }}
transition={{ type: 'tween', duration: opacity ? 0.2 : 0.5 }} transition={{ type: 'tween', duration: 1 }}
> >
<video ref={vd} muted preload="auto" width={'100%'}> <video ref={vd} muted width={'100%'}>
<source src="/video/floor1.webm" type="video/mp4" /> <source src="/video/floor1.webm" type="video/mp4" />
</video> </video>
</motion.div> </motion.div>

View File

@ -1,14 +1,24 @@
import { motion } from 'framer-motion'; import { motion } from 'framer-motion';
import { useRef } from 'react'; import { useRef, useEffect } from 'react';
function EnterToFloorTwo(props) { function EnterToFloorTwo(props) {
const vd = useRef(null); const vd = useRef(null);
const opacity = props.opacity || 0; const opacity = props.opacity || 0;
if (opacity == 1) { if (opacity == 1) {
vd.current.play(); setTimeout(() => {
vd.current.play();
}, 100);
} }
useEffect(() => {
vd.current.addEventListener('ended', () => {
setTimeout(() => {
vd.current.currentTime = 0;
}, 1000);
});
}, []);
return ( return (
<motion.div <motion.div
className="video-wrapper" className="video-wrapper"
@ -22,9 +32,9 @@ function EnterToFloorTwo(props) {
opacity: opacity, opacity: opacity,
zIndex: -999, zIndex: -999,
}} }}
transition={{ type: 'tween', duration: opacity ? 0.2 : 0.5 }} transition={{ type: 'tween', duration: 1 }}
> >
<video ref={vd} muted preload="auto" width={'100%'}> <video ref={vd} muted width={'100%'}>
<source src="/video/floor2.webm" type="video/mp4" /> <source src="/video/floor2.webm" type="video/mp4" />
</video> </video>
</motion.div> </motion.div>

View File

@ -24,7 +24,7 @@ function EnterVideo(props) {
}} }}
transition={{ type: 'tween' }} transition={{ type: 'tween' }}
> >
<video ref={vd} muted preload="auto" autoPlay={true} width={'100%'}> <video ref={vd} muted autoPlay={true} width={'100%'}>
<source src="/video/enter.webm" type="video/mp4" /> <source src="/video/enter.webm" type="video/mp4" />
</video> </video>
</motion.div> </motion.div>

View File

@ -1,14 +1,24 @@
import { motion } from 'framer-motion'; import { motion } from 'framer-motion';
import { useRef } from 'react'; import { useRef, useEffect } from 'react';
function FloorOneToTwo(props) { function FloorOneToTwo(props) {
const vd = useRef(null); const vd = useRef(null);
const opacity = props.opacity || 0; const opacity = props.opacity || 0;
if (opacity == 1) { if (opacity == 1) {
vd.current.play(); setTimeout(() => {
vd.current.play();
}, 100);
} }
useEffect(() => {
vd.current.addEventListener('ended', () => {
setTimeout(() => {
vd.current.currentTime = 0;
}, 1000);
});
}, []);
return ( return (
<motion.div <motion.div
className="video-wrapper" className="video-wrapper"
@ -18,13 +28,12 @@ function FloorOneToTwo(props) {
left: 0, left: 0,
width: '100%', width: '100%',
height: '100%', height: '100%',
zIndex: -1000,
opacity: opacity,
zIndex: -998, zIndex: -998,
opacity,
}} }}
transition={{ type: 'tween', duration: opacity ? 0.2 : 0.5 }} transition={{ type: 'tween', duration: 1 }}
> >
<video ref={vd} muted preload="auto" width={'100%'}> <video ref={vd} muted width={'100%'}>
<source src="/video/1to2.webm" type="video/mp4" /> <source src="/video/1to2.webm" type="video/mp4" />
</video> </video>
</motion.div> </motion.div>

View File

@ -1,14 +1,24 @@
import { motion } from 'framer-motion'; import { motion } from 'framer-motion';
import { useRef } from 'react'; import { useEffect, useRef } from 'react';
function FloorTwoToOne(props) { function FloorTwoToOne(props) {
const vd = useRef(null); const vd = useRef(null);
const opacity = props.opacity || 0; const opacity = props.opacity || 0;
if (opacity == 1) { if (opacity == 1) {
vd.current.play(); setTimeout(() => {
vd.current.play();
}, 100);
} }
useEffect(() => {
vd.current.addEventListener('ended', () => {
setTimeout(() => {
vd.current.currentTime = 0;
}, 1000);
});
}, []);
return ( return (
<motion.div <motion.div
className="video-wrapper" className="video-wrapper"
@ -22,9 +32,9 @@ function FloorTwoToOne(props) {
opacity: opacity, opacity: opacity,
zIndex: -998, zIndex: -998,
}} }}
transition={{ type: 'tween', duration: opacity ? 0.2 : 0.5 }} transition={{ type: 'tween', duration: 1 }}
> >
<video ref={vd} muted preload="auto" width={'100%'}> <video ref={vd} muted width={'100%'}>
<source src="/video/2to1.webm" type="video/mp4" /> <source src="/video/2to1.webm" type="video/mp4" />
</video> </video>
</motion.div> </motion.div>