From 5aafe6d39acc6e212fced54ed658c49b07eee675 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 22 Nov 2023 17:57:53 +0800 Subject: [PATCH] site: use vanilla-tilt.js for banner motion --- .../PreviewBanner/ComponentsBlock.tsx | 11 ++- .../index/components/PreviewBanner/Tilt.tsx | 33 +++++++++ .../index/components/PreviewBanner/index.tsx | 16 ++-- .../PreviewBanner/useMouseTransform.tsx | 73 ------------------- package.json | 1 + 5 files changed, 51 insertions(+), 83 deletions(-) create mode 100644 .dumi/pages/index/components/PreviewBanner/Tilt.tsx delete mode 100644 .dumi/pages/index/components/PreviewBanner/useMouseTransform.tsx diff --git a/.dumi/pages/index/components/PreviewBanner/ComponentsBlock.tsx b/.dumi/pages/index/components/PreviewBanner/ComponentsBlock.tsx index 42dc50702d02..f9f937b3f289 100644 --- a/.dumi/pages/index/components/PreviewBanner/ComponentsBlock.tsx +++ b/.dumi/pages/index/components/PreviewBanner/ComponentsBlock.tsx @@ -19,6 +19,7 @@ import { import { createStyles } from 'antd-style'; import classNames from 'classnames'; +import Tilt from './Tilt'; import useLocale from '../../../../hooks/useLocale'; const { _InternalPanelDoNotUseOrYouWillBeFired: ModalPanel } = Modal; @@ -79,7 +80,7 @@ const useStyle = createStyles(({ token, css }) => { display: flex; flex-direction: column; row-gap: ${gap}px; - opacity: 0.65; + opacity: 0.8; `, flex: css` @@ -117,7 +118,11 @@ const ComponentsBlock: React.FC = (props) => { const { styles } = useStyle(); return ( -
+ {locale.text} @@ -252,7 +257,7 @@ const ComponentsBlock: React.FC = (props) => { -
+ ); }; diff --git a/.dumi/pages/index/components/PreviewBanner/Tilt.tsx b/.dumi/pages/index/components/PreviewBanner/Tilt.tsx new file mode 100644 index 000000000000..51f758ab86f9 --- /dev/null +++ b/.dumi/pages/index/components/PreviewBanner/Tilt.tsx @@ -0,0 +1,33 @@ +import React, { useEffect, useRef } from 'react'; +import VanillaTilt, { type TiltOptions } from 'vanilla-tilt'; + +interface TiltProps extends React.HTMLAttributes { + options?: TiltOptions; +} + +// https://micku7zu.github.io/vanilla-tilt.js/index.html +const defaultTiltOptions = { + scale: 1.02, + max: 8, + speed: 1500, + glare: true, + 'max-glare': 0.8, +}; + +const Tilt: React.FC = ({ options, ...props }) => { + const node = useRef(null); + useEffect(() => { + if (node.current) { + VanillaTilt.init(node.current, { + ...defaultTiltOptions, + ...options, + }); + } + return () => { + (node.current as any)?.vanillaTilt.destroy(); + }; + }, []); + return
; +}; + +export default Tilt; diff --git a/.dumi/pages/index/components/PreviewBanner/index.tsx b/.dumi/pages/index/components/PreviewBanner/index.tsx index 45991dfaba52..e84689170b4e 100644 --- a/.dumi/pages/index/components/PreviewBanner/index.tsx +++ b/.dumi/pages/index/components/PreviewBanner/index.tsx @@ -7,7 +7,6 @@ import useLocale from '../../../../hooks/useLocale'; import SiteContext from '../../../../theme/slots/SiteContext'; import * as utils from '../../../../theme/utils'; import { GroupMask } from '../Group'; -import useMouseTransform from './useMouseTransform'; const ComponentsBlock = React.lazy(() => import('./ComponentsBlock')); @@ -28,7 +27,6 @@ const locales = { const useStyle = () => { const { direction } = React.useContext(ConfigProvider.ConfigContext); const isRTL = direction === 'rtl'; - return createStyles(({ token, css, cx }) => { const textShadow = `0 0 3px ${token.colorBgContainer}`; @@ -37,7 +35,9 @@ const useStyle = () => { inset: 0; backdrop-filter: blur(4px); opacity: 1; - transition: opacity 1s ease; + background: rgba(255, 255, 255, 0.2); + transition: all 1s ease; + pointer-events: none; `); return { @@ -114,10 +114,8 @@ const PreviewBanner: React.FC = (props) => { const { pathname, search } = useLocation(); const isZhCN = utils.isZhCN(pathname); - const [componentsBlockStyle, mouseEvents] = useMouseTransform(); - return ( - + {/* Image Left Top */} = (props) => {
{/* Mobile not show the component preview */} - {!isMobile && } + {isMobile ? null : ( +
+ +
+ )}
diff --git a/.dumi/pages/index/components/PreviewBanner/useMouseTransform.tsx b/.dumi/pages/index/components/PreviewBanner/useMouseTransform.tsx deleted file mode 100644 index a6985067bb6a..000000000000 --- a/.dumi/pages/index/components/PreviewBanner/useMouseTransform.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import React, { startTransition } from 'react'; -import { ConfigProvider } from 'antd'; - -const getTransformRotateStyle = ( - event: React.MouseEvent, - currentTarget: EventTarget & HTMLDivElement, - multiple: number, - isRTL: boolean, -): string => { - const box = currentTarget?.getBoundingClientRect(); - const calcX = -(event.clientY - box.y - box.height / 2) / multiple; - const calcY = (event.clientX - box.x - box.width / 2) / multiple; - return isRTL - ? `rotate3d(${24 + calcX}, ${83 + calcY}, -45, 57deg)` - : `rotate3d(${24 + calcX}, ${-83 + calcY}, 45, 57deg)`; -}; - -const useMouseTransform = ({ transitionDuration = 500, multiple = 36 } = {}) => { - const [componentsBlockStyle, setComponentsBlockStyle] = React.useState({}); - - const { direction } = React.useContext(ConfigProvider.ConfigContext); - - const isRTL = direction === 'rtl'; - - const onMouseMove: React.MouseEventHandler = (event) => { - const { currentTarget } = event; - startTransition(() => { - setComponentsBlockStyle((style) => ({ - ...style, - transform: getTransformRotateStyle(event, currentTarget, multiple, isRTL), - })); - }); - }; - - const onMouseEnter: React.MouseEventHandler = () => { - startTransition(() => { - setComponentsBlockStyle((style) => ({ - ...style, - transition: `transform ${transitionDuration / 1000}s`, - })); - }); - - setTimeout(() => { - startTransition(() => { - setComponentsBlockStyle((style) => ({ - ...style, - transition: '', - })); - }); - }, transitionDuration); - }; - - const onMouseLeave: React.MouseEventHandler = () => { - startTransition(() => { - setComponentsBlockStyle((style) => ({ - ...style, - transition: `transform ${transitionDuration / 1000}s`, - transform: '', - })); - }); - }; - - return [ - componentsBlockStyle, - { - onMouseMove, - onMouseEnter, - onMouseLeave, - }, - ] as const; -}; - -export default useMouseTransform; diff --git a/package.json b/package.json index fd588360f702..38fa65056fa6 100644 --- a/package.json +++ b/package.json @@ -310,6 +310,7 @@ "typedoc": "^0.25.0", "typescript": "~5.2.2", "vanilla-jsoneditor": "^0.18.0", + "vanilla-tilt": "^1.8.1", "webpack-bundle-analyzer": "^4.1.0", "xhr-mock": "^2.4.1" },