mt-fe-group/xuchang-screen
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update video play

Browse Source
This commit is contained in:
lb 2023-11-07 10:30:15 +08:00
parent b0e492f066
commit 709008c3a3
5 changed files with 133 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/模块组件/窑炉内部/Center/VideoContainer.jsx
View File

@ -4,6 +4,7 @@ import EnterToFloorTwo from './videoComponents/EnterToFloor2';
import FloorOneToTwo from './videoComponents/Floor1To2'; import FloorOneToTwo from './videoComponents/Floor1To2';
import FloorTwoToOne from './videoComponents/Floor2To1'; import FloorTwoToOne from './videoComponents/Floor2To1';
import { useRef, useEffect, useReducer } from 'react'; import { useRef, useEffect, useReducer } from 'react';
import { AnimatePresence } from 'framer-motion';
const initOpacity = { const initOpacity = {
enterVideo: 1, enterVideo: 1,
@ -86,16 +87,17 @@ function VideoContainer(props) {
} }
return ( return (
<> <AnimatePresence>
<EnterVideo <EnterVideo
key="enter"
onVideoEnd={handleEnterVideoEnd} onVideoEnd={handleEnterVideoEnd}
opacity={opacity.enterVideo} opacity={opacity.enterVideo}
/> />
<EnterToFloorOne opacity={opacity.enterToFloorOne} /> <EnterToFloorOne key="enter-to-1" opacity={opacity.enterToFloorOne} />
<EnterToFloorTwo opacity={opacity.enterToFloorTwo} /> <EnterToFloorTwo key="enter-to-2" opacity={opacity.enterToFloorTwo} />
<FloorOneToTwo opacity={opacity.floorOneToTwo} /> <FloorOneToTwo key="1-to-2" opacity={opacity.floorOneToTwo} />
<FloorTwoToOne opacity={opacity.floorTwoToOne} /> <FloorTwoToOne key="2-to-1" opacity={opacity.floorTwoToOne} />
</> </AnimatePresence>
); );
} }

79
src/components/模块组件/窑炉内部/Center/videoComponents/EnterToFloor1.jsx
View File

@ -1,44 +1,57 @@
import { motion } from 'framer-motion'; import { motion, AnimatePresence } from 'framer-motion';
import { useRef, useEffect } from 'react'; import { useRef, useEffect, useMemo } from 'react';
function EnterToFloorOne(props) { function EnterToFloorOne(props) {
const vd = useRef(null); const vd = useRef(null);
const opacity = props.opacity || 0; const show = props.opacity || 0;
if (opacity == 1) {
setTimeout(() => {
vd.current.play();
}, 100);
}
useEffect(() => { useEffect(() => {
vd.current.addEventListener('ended', () => { if (show) vd.current.play();
setTimeout(() => { }, [show]);
vd.current.currentTime = 0;
}, 1000); // const show = useMemo(
}); // () => ({
}, []); // opacity: 1,
// display: 'block',
// duration: 0,
// }),
// [],
// );
// const hide = useMemo(
// () => ({
// opacity: 0,
// transitionEnd: {
// display: 'none',
// },
// }),
// [],
// );
return ( return (
<motion.div <AnimatePresence>
className="video-wrapper" {show && (
style={{ <motion.div
position: 'fixed', className="video-wrapper"
top: 0, style={{
left: 0, position: 'fixed',
width: '100%', top: 0,
height: '100%', left: 0,
zIndex: -1000, width: '100%',
opacity: opacity, height: '100%',
zIndex: -999, zIndex: -999,
}} }}
transition={{ type: 'tween', duration: 1 }} initial={{ opacity: 0 }}
> animate={{ opacity: 1 }}
<video ref={vd} muted width={'100%'}> exit={{ opacity: [1, 1, 0], transition: { duration: 0.5 } }}
<source src="/video/floor1.webm" type="video/mp4" /> >
</video> <video ref={vd} muted width={'100%'}>
</motion.div> <source src="/video/floor1.webm" type="video/mp4" />
</video>
</motion.div>
)}
</AnimatePresence>
); );
+66;
} }
export default EnterToFloorOne; export default EnterToFloorOne;

46
src/components/模块组件/窑炉内部/Center/videoComponents/EnterVideo.jsx
View File

@ -1,8 +1,8 @@
import { motion } from 'framer-motion'; import { motion, AnimatePresence } from 'framer-motion';
import { useEffect, useRef } from 'react'; import { useEffect, useRef, useMemo } from 'react';
function EnterVideo(props) { function EnterVideo(props) {
const opacity = props.opacity || 0; const show = props.opacity || 0;
const vd = useRef(null); const vd = useRef(null);
useEffect(() => { useEffect(() => {
@ -10,24 +10,28 @@ function EnterVideo(props) {
}, []); }, []);
return ( return (
<motion.div <AnimatePresence>
className="video-wrapper" {show && (
style={{ <motion.div
position: 'fixed', className="video-wrapper"
top: 0, style={{
left: 0, position: 'fixed',
width: '100%', top: 0,
height: '100%', left: 0,
zIndex: -1000, width: '100%',
opacity: opacity, height: '100%',
zIndex: -1000, zIndex: -1000,
}} }}
transition={{ type: 'tween' }} initial={{ opacity: 0 }}
> animate={{ opacity: 1 }}
<video ref={vd} muted autoPlay={true} width={'100%'}> exit={{ opacity: [1, 1, 0], transition: { duration: 0.5 } }}
<source src="/video/enter.webm" type="video/mp4" /> >
</video> <video ref={vd} muted autoPlay={true} width={'100%'}>
</motion.div> <source src="/video/enter.webm" type="video/mp4" />
</video>
</motion.div>
)}
</AnimatePresence>
); );
} }

59
src/components/模块组件/窑炉内部/Center/videoComponents/Floor1To2.jsx
View File

@ -1,42 +1,37 @@
import { motion } from 'framer-motion'; import { motion, AnimatePresence } from 'framer-motion';
import { useRef, useEffect } from 'react'; import { useRef, useEffect, useMemo } from 'react';
function FloorOneToTwo(props) { function FloorOneToTwo(props) {
const vd = useRef(null); const vd = useRef(null);
const opacity = props.opacity || 0; const show = props.opacity || 0;
if (opacity == 1) {
setTimeout(() => {
vd.current.play();
}, 100);
}
useEffect(() => { useEffect(() => {
vd.current.addEventListener('ended', () => { if (show) vd.current.play();
setTimeout(() => { }, [show]);
vd.current.currentTime = 0;
}, 1000);
});
}, []);
return ( return (
<motion.div <AnimatePresence>
className="video-wrapper" {show && (
style={{ <motion.div
position: 'fixed', className="video-wrapper"
top: 0, style={{
left: 0, position: 'fixed',
width: '100%', top: 0,
height: '100%', left: 0,
zIndex: -998, width: '100%',
opacity, height: '100%',
}} zIndex: -998,
transition={{ type: 'tween', duration: 1 }} }}
> initial={{ opacity: 0 }}
<video ref={vd} muted width={'100%'}> animate={{ opacity: 1 }}
<source src="/video/1to2.webm" type="video/mp4" /> exit={{ opacity: [1, 1, 0], transition: { duration: 0.5 } }}
</video> >
</motion.div> <video ref={vd} muted width={'100%'}>
<source src="/video/1to2.webm" type="video/mp4" />
</video>
</motion.div>
)}
</AnimatePresence>
); );
} }

60
src/components/模块组件/窑炉内部/Center/videoComponents/Floor2To1.jsx
View File

@ -1,43 +1,37 @@
import { motion } from 'framer-motion'; import { motion, AnimatePresence } from 'framer-motion';
import { useEffect, useRef } from 'react'; import { useRef, useEffect, useMemo } from 'react';
function FloorTwoToOne(props) { function FloorTwoToOne(props) {
const vd = useRef(null); const vd = useRef(null);
const opacity = props.opacity || 0; const show = props.opacity || 0;
if (opacity == 1) {
setTimeout(() => {
vd.current.play();
}, 100);
}
useEffect(() => { useEffect(() => {
vd.current.addEventListener('ended', () => { if (show) vd.current.play();
setTimeout(() => { }, [show]);
vd.current.currentTime = 0;
}, 1000);
});
}, []);
return ( return (
<motion.div <AnimatePresence>
className="video-wrapper" {show && (
style={{ <motion.div
position: 'fixed', className="video-wrapper"
top: 0, style={{
left: 0, position: 'fixed',
width: '100%', top: 0,
height: '100%', left: 0,
zIndex: -1000, width: '100%',
opacity: opacity, height: '100%',
zIndex: -998, zIndex: -998,
}} }}
transition={{ type: 'tween', duration: 1 }} initial={{ opacity: 0 }}
> animate={{ opacity: 1 }}
<video ref={vd} muted width={'100%'}> exit={{ opacity: [1, 1, 0], transition: { duration: 0.5 } }}
<source src="/video/2to1.webm" type="video/mp4" /> >
</video> <video ref={vd} muted width={'100%'}>
</motion.div> <source src="/video/2to1.webm" type="video/mp4" />
</video>
</motion.div>
)}
</AnimatePresence>
); );
} }