mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-13 07:39:10 +08:00
abf215a982
* init recommend block * init design pages * home frames * add background banner * hello, Hitu makes the animation * add media query * add images * update types * add declare * preload support * update ignore * additional ignore site Home lint * update ignore * add hover effect * adjust alt of bannber * adjust lang & card shadow * fix typo * adjust desc * hitu in english * article add link * Certainty is hitu * Meaning Hitu * Growth with Hitu * Natural Hitu * slow down of Natural * adjust speed of icons * New Meaning animation * adjust animation duration * update card link * update link * values doc * replace images * faster Growth * update values * fix lint * all slow down * adjust padding * update icons * adjust margin * update images * adjust montion * adjust by designer * update pages * update design prod * update articles * update site style * update doc * update images * update style * lint fix * adjust liner color * github text color update * adjust margin of title * mobile design * update design sub card * update style * less lint * update images * design card auto height * update img * update logo transition * adjust card style * adjust style to fix 184 * adjust nav style * category it * slow down of logo * update style * hide video link * hitu article * use img of hitu * update docs * style lint * update Hitu layout doc * update images * speed up logo * update link * clean up * clean up * update doc * adjust doc * update images
46 lines
1013 B
TypeScript
46 lines
1013 B
TypeScript
import * as React from 'react';
|
|
import Hitu, { HiTuRefObject } from '@ant-design/hitu';
|
|
import { Shape } from '@ant-design/hitu/lib/interface';
|
|
|
|
const HOVER_LOOP = false;
|
|
|
|
export interface InteractiveIconProps {
|
|
shapes: Shape[];
|
|
debug?: boolean;
|
|
frames?: number;
|
|
}
|
|
|
|
export default function InteractiveIcon({ shapes, debug, frames }: InteractiveIconProps) {
|
|
const hituRef = React.useRef<HiTuRefObject>(null);
|
|
const [loop, setLoop] = React.useState(false);
|
|
|
|
return (
|
|
<span
|
|
onMouseEnter={() => {
|
|
if (HOVER_LOOP) {
|
|
setLoop(true);
|
|
}
|
|
|
|
if (hituRef.current) {
|
|
hituRef.current.triggerMotion(true);
|
|
}
|
|
}}
|
|
onMouseLeave={() => {
|
|
setLoop(false);
|
|
}}
|
|
>
|
|
<Hitu
|
|
debug={debug}
|
|
loop={loop}
|
|
defaultPlay={false}
|
|
ref={hituRef}
|
|
frames={frames || 120}
|
|
width={120}
|
|
height={120}
|
|
style={{ width: 120, height: 120 }}
|
|
shapes={shapes}
|
|
/>
|
|
</span>
|
|
);
|
|
}
|