update
This commit is contained in:
parent
7faba81628
commit
b0e492f066
@ -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() {
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user