a bit animation

This commit is contained in:
Primakov Alexandr Alexandrovich 2022-11-27 21:41:38 +03:00
parent ae7b0a6b7f
commit fc50514dbc
3 changed files with 192 additions and 11 deletions

View File

@ -18,8 +18,12 @@ import {
StartI,
StartInput,
StartLabel,
HalfLine,
HideGroup,
Circle,
LineSvg,
} from './style';
import {socket} from "../socket";
import { socket } from "../socket";
const keyboardFeature = getFeatures('hub-video-start')?.keyboard;
@ -65,18 +69,112 @@ const Input = ({ onStart }) => {
)
}
export const Line = ({ hide, reverse, speed, delay, radius, progress, width, color }) => (
<LineSvg
delay={delay}
reverse={reverse}
animationSpeed={speed}
width={(radius * 2) + 20 + width}
height={(radius * 2) + 20 + width}
>
<HideGroup hide={hide} delay={delay}>
<Circle
percent={progress}
circumference={radius * 2 * Math.PI}
stroke={color}
strokeWidth={width}
fill="transparent"
r={radius}
cx={radius + 10 + width/2}
cy={radius + 10 + width/2}
/>
</HideGroup>
</LineSvg>
)
Line.defaultProps = {
reverse: false
}
const Start = () => {
const socketRef = useRef({ sent: false })
// const socketRef = useRef({ sent: false });
const [sended, setSend] = useState(false);
const handleCheck = () => {
if (!socketRef.current.sent) {
// if (!socketRef.current.sent) {
if (!sended) {
socket.emit('play')
socketRef.current.sent = true
// socketRef.current.sent = true
setSend(true)
}
}
return (
<StartWrapper>
<Line
hide={sended}
speed={24}
delay={3}
radius={122}
progress={2}
width={3}
reverse
color="white"
/>
<Line
hide={sended}
speed={12}
delay={9}
radius={122}
progress={2}
width={3}
color="white"
/>
<Line
hide={sended}
speed={53}
radius={220}
delay={6}
progress={22}
width={12}
color="#92de22"
/>
<Line
hide={sended}
speed={53}
radius={220}
delay={17.8}
progress={.5}
width={12}
color="#92de22"
/>
<Line
hide={sended}
speed={53}
radius={220}
delay={18.3}
progress={.2}
width={12}
color="#92de22"
/>
<Line
hide={sended}
speed={54}
radius={220}
delay={30}
progress={44}
width={15}
color="#92de22"
/>
<Line
hide={sended}
speed={12}
radius={120}
delay={0}
progress={13}
width={6}
color="white"
/>
<StartInput
id="check"
type="checkbox"
@ -97,8 +195,9 @@ export const MainPage = () => {
return (
<MainWrapper>
<LogoImg src={logo} />
{!showStart && <Input onStart={() => setShowStart(true)} />}
{showStart && <Start />}
<Start />
{/* {!showStart && <Input onStart={() => setShowStart(true)} />}
{showStart && <Start />} */}
</MainWrapper>
);
};

View File

@ -1,5 +1,5 @@
import styled from '@emotion/styled';
import { keyframes } from '@emotion/react';
import { css, keyframes } from '@emotion/react';
export const MainWrapper = styled.main`
display: flex;
@ -49,7 +49,7 @@ export const IconButton = styled.button`
const reveal = keyframes`
0% {
transform: scale(0.1, 0.1)
transform: scale(0.1, 0.1);
}
100% {
@ -147,7 +147,6 @@ export const StartI = styled.i`
color: white;
margin: -35% 0 0 -35%;
border-radius: 50%;
/* background: linear-gradient(#cbc7bc, #d2cbc3); */
background: linear-gradient(#22a037, #98e221);
box-shadow:
0 -2px 5px rgba(255,255,255,0.05),
@ -158,3 +157,86 @@ export const StartI = styled.i`
justify-content: center;
font-style: normal;
`;
// const LineRotation = keyframes
//`
// 0% {
// transform: translate(-50%, -100%) rotate(0);
// }
// 100% {
// transform: translate(-50%, -100%) rotate(1turn);
// }
// `;
// type LineProps = {
// radius: number;
// width: number;
// }
// export const HalfLine = styled.div<LineProps>(({
// radius,
// width,
// }) =>css`
// transform-origin: 50% 100%;
// animation: ${LineRotation} 3s linear infinite;
// width: ${radius * 2}px;
// height: ${radius}px;
// border-top-left-radius: ${radius}px;
// border-top-right-radius: ${radius}px;
// border: ${width}px solid gray;
// border-bottom: 0;
// position: absolute;
// top: 50%;
// left: 50%;
// transform: translate(-50%, -100%);
// `);
const LineRotation = keyframes`
0% {
transform: translate(-50%, -50%) rotate(0);
}
100% {
transform: translate(-50%, -50%) rotate(1turn);
}
`;
const LineHideAnimation = keyframes`
0% {
/* transform: scale(1); */
opacity: 1;
}
100% {
/* transform: scale(0); */
opacity: 0;
}
`;
export const LineSvg = styled.svg<{ animationSpeed: number; delay: number; reverse: boolean }>`
animation: ${LineRotation} ${({ animationSpeed }) => animationSpeed}s linear infinite${({ reverse }) => reverse ? ' reverse' : ''};
animation-delay: -${({ delay }) => delay}s;
position: absolute;
top: 50%;
left: 50%;
transform-origin: 50% 50%;
transform: translate(-50%, -100%);
`;
export const HideGroup = styled.g<{ hide: boolean; delay: number; }>`
animation: ${({ hide }) => hide ? css`${LineHideAnimation} 3s ease-in forwards`: ''};
transform-origin: 50% 50%;
animation-delay: ${({ delay }) => delay / 10}s;
`;
export const Circle = styled.circle<{ circumference: number; percent: number }>`
transition: 0.35s stroke-dashoffset;
transform: rotate(-90deg);
transform-origin: 50% 50%;
stroke-dasharray: ${({ circumference }) => `${circumference} ${circumference}`};
stroke-dashoffset: ${({ circumference, percent }) => circumference - percent / 100 * circumference};
`;

View File

@ -1,5 +1,5 @@
import {getConfigValue} from "@ijl/cli";
import {io} from "socket.io-client";
import { getConfigValue } from "@ijl/cli";
import { io } from "socket.io-client";
export const socket = io(getConfigValue('hub-video-start.socket.url'), { path: getConfigValue('hub-video-start.socket.path')});
socket.on("connect", () => {