add keyframes
This commit is contained in:
parent
e868d8cdba
commit
f52e3e9723
@ -1,3 +1,4 @@
|
||||
import { useState } from 'react';
|
||||
import type { ApproveDenyButtonElement as ApproveDenyButtonElementType } from 'src/types/element';
|
||||
|
||||
type ApproveDenyButtonElementProps = {
|
||||
@ -14,13 +15,142 @@ const SIZES = {
|
||||
fontSize: 28 / 472,
|
||||
} as const;
|
||||
|
||||
type KeyframeParameters = {
|
||||
bigCircleRadius: number,
|
||||
bigCircleGradientStart: number,
|
||||
bigCircleGradientEnd: number,
|
||||
smallTurqoiseCirclePosition: number,
|
||||
smallTurqoiseCircleOpacity: number,
|
||||
tinyDotOpacity: number,
|
||||
approveButtonPosition: number,
|
||||
approveButtonOpacity: number,
|
||||
denyButtonPosition: number,
|
||||
denyButtonOpacity: number,
|
||||
};
|
||||
|
||||
const INITIAL_KEYFRAME: KeyframeParameters = {
|
||||
bigCircleRadius: SIZES.bigCircle,
|
||||
bigCircleGradientStart: 0x646464,
|
||||
bigCircleGradientEnd: 0x646464,
|
||||
smallTurqoiseCirclePosition: 0.5,
|
||||
smallTurqoiseCircleOpacity: 1,
|
||||
tinyDotOpacity: 0.8,
|
||||
approveButtonPosition: 1,
|
||||
approveButtonOpacity: 1,
|
||||
denyButtonPosition: 0,
|
||||
denyButtonOpacity: 1,
|
||||
} as const;
|
||||
|
||||
const KEYFRAMES_APPROVE = [
|
||||
{
|
||||
"time": 0,
|
||||
"params": INITIAL_KEYFRAME,
|
||||
},
|
||||
{
|
||||
"time": 1,
|
||||
"params": {
|
||||
bigCircleRadius: SIZES.bigCircle,
|
||||
bigCircleGradientStart: 0x646464,
|
||||
bigCircleGradientEnd: 0x00C007,
|
||||
smallTurqoiseCirclePosition: 0.5,
|
||||
smallTurqoiseCircleOpacity: 1,
|
||||
tinyDotOpacity: 0.8,
|
||||
approveButtonPosition: 1,
|
||||
approveButtonOpacity: 1,
|
||||
denyButtonPosition: 0,
|
||||
denyButtonOpacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
"time": 1.5,
|
||||
"params": {
|
||||
bigCircleRadius: SIZES.bigCircle,
|
||||
bigCircleGradientStart: 0x00C007,
|
||||
bigCircleGradientEnd: 0x00C007,
|
||||
smallTurqoiseCirclePosition: 1,
|
||||
smallTurqoiseCircleOpacity: 1,
|
||||
tinyDotOpacity: 0,
|
||||
approveButtonPosition: 0.5,
|
||||
approveButtonOpacity: 1,
|
||||
denyButtonPosition: 0,
|
||||
denyButtonOpacity: 0,
|
||||
},
|
||||
},
|
||||
{
|
||||
"time": 2,
|
||||
"params": {
|
||||
bigCircleRadius: SIZES.bigCircle,
|
||||
bigCircleGradientStart: 0x00C007,
|
||||
bigCircleGradientEnd: 0x00C007,
|
||||
smallTurqoiseCirclePosition: 1,
|
||||
smallTurqoiseCircleOpacity: 0,
|
||||
tinyDotOpacity: 0,
|
||||
approveButtonPosition: 0.5,
|
||||
approveButtonOpacity: 1,
|
||||
denyButtonPosition: 0,
|
||||
denyButtonOpacity: 0,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const KEYFRAMES_DENY = [
|
||||
{
|
||||
"time": 0,
|
||||
"params": INITIAL_KEYFRAME,
|
||||
},
|
||||
{
|
||||
"time": 1,
|
||||
"params": {
|
||||
bigCircleRadius: SIZES.bigCircle,
|
||||
bigCircleGradientStart: 0x646464,
|
||||
bigCircleGradientEnd: 0xBC2503,
|
||||
smallTurqoiseCirclePosition: 0.5,
|
||||
smallTurqoiseCircleOpacity: 1,
|
||||
tinyDotOpacity: 0.8,
|
||||
approveButtonPosition: 1,
|
||||
approveButtonOpacity: 1,
|
||||
denyButtonPosition: 0,
|
||||
denyButtonOpacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
"time": 1.5,
|
||||
"params": {
|
||||
bigCircleRadius: SIZES.bigCircle,
|
||||
bigCircleGradientStart: 0xBC2503,
|
||||
bigCircleGradientEnd: 0xBC2503,
|
||||
smallTurqoiseCirclePosition: 1,
|
||||
smallTurqoiseCircleOpacity: 1,
|
||||
tinyDotOpacity: 0,
|
||||
approveButtonPosition: 1,
|
||||
approveButtonOpacity: 0,
|
||||
denyButtonPosition: 0.5,
|
||||
denyButtonOpacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
"time": 2,
|
||||
"params": {
|
||||
bigCircleRadius: SIZES.bigCircle,
|
||||
bigCircleGradientStart: 0xBC2503,
|
||||
bigCircleGradientEnd: 0xBC2503,
|
||||
smallTurqoiseCirclePosition: 1,
|
||||
smallTurqoiseCircleOpacity: 0,
|
||||
tinyDotOpacity: 0,
|
||||
approveButtonPosition: 1,
|
||||
approveButtonOpacity: 0,
|
||||
denyButtonPosition: 0.5,
|
||||
denyButtonOpacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
// keyframes
|
||||
// - approve:
|
||||
// - 0: pos turqoise circle center, gray background
|
||||
// - 1: pos turqoise circle right of big circle, gray-green gradient background, arrows fade out
|
||||
// - 2: pos turqoise circle right of entire button, "approve" in middle of button, button green
|
||||
// - 3: no turqoise circle, "approve" in middle of button, button green, rest disappears
|
||||
|
||||
// - deny:
|
||||
// - 0: pos turqoise circle center, gray background
|
||||
// - 1: pos turqoise circle left of big circle, gray-red gradient background, arrows fade out
|
||||
@ -35,6 +165,8 @@ const ApproveDenyButtonElement = ({
|
||||
const headerStyle = { fontSize: w * SIZES.fontSize, height: h - w * SIZES.button, lineHeight: `${h - w * SIZES.button - 2}px` };
|
||||
const buttonStyle = { fontSize: w * SIZES.fontSize, height: w * SIZES.button - 2, lineHeight: `${w * SIZES.button - 2}px`, width: w * SIZES.sideLabel };
|
||||
|
||||
const [state, setState] = useState(INITIAL_KEYFRAME);
|
||||
|
||||
return (
|
||||
<div
|
||||
id={id}
|
||||
|
Loading…
Reference in New Issue
Block a user