mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-05 01:19:45 +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
87 lines
2.8 KiB
TypeScript
87 lines
2.8 KiB
TypeScript
import * as React from 'react';
|
|
import Hitu from '@ant-design/hitu';
|
|
import { Shape } from '@ant-design/hitu/lib/interface';
|
|
import InteractiveIcon from './InteractiveIcon';
|
|
|
|
function Heart() {
|
|
return (
|
|
<path
|
|
fill="#F74455"
|
|
d="M24.7788462,5.41153846 C24.3923077,4.51442308 23.8384615,3.7125 23.1375,3.02307692 C22.4365385,2.33653846 21.6230769,1.8 20.7144231,1.42211538 C19.7769231,1.03269231 18.7846154,0.836538462 17.7605769,0.836538462 C16.3384615,0.836538462 14.9509615,1.22596154 13.7451923,1.96153846 C13.4567308,2.1375 13.1826923,2.33076923 12.9230769,2.54134615 C12.6634615,2.33076923 12.3894231,2.1375 12.1009615,1.96153846 C10.8951923,1.22596154 9.50769231,0.836538462 8.08557692,0.836538462 C7.06153846,0.836538462 6.06923077,1.03269231 5.13173077,1.42211538 C4.22596154,1.79711538 3.40961538,2.33653846 2.70865385,3.02307692 C2.00480769,3.7125 1.45384615,4.51442308 1.06730769,5.41153846 C0.666346154,6.34326923 0.461538462,7.33269231 0.461538462,8.35096154 C0.461538462,9.31153846 0.657692308,10.3125 1.04711538,11.3307692 C1.37307692,12.1817308 1.84038462,13.0644231 2.4375,13.9557692 C3.38365385,15.3663462 4.68461538,16.8375 6.3,18.3288462 C8.97692308,20.8009615 11.6278846,22.5086538 11.7403846,22.5778846 L12.4240385,23.0163462 C12.7269231,23.2096154 13.1163462,23.2096154 13.4192308,23.0163462 L14.1028846,22.5778846 C14.2153846,22.5057692 16.8634615,20.8009615 19.5432692,18.3288462 C21.1586538,16.8375 22.4596154,15.3663462 23.4057692,13.9557692 C24.0028846,13.0644231 24.4730769,12.1817308 24.7961538,11.3307692 C25.1855769,10.3125 25.3817608,9.31153846 25.3817608,8.35096154 C25.3846154,7.33269231 25.1798077,6.34326923 24.7788462,5.41153846 Z"
|
|
/>
|
|
);
|
|
}
|
|
|
|
Heart.width = 26;
|
|
Heart.height = 24;
|
|
|
|
function Circle() {
|
|
return <circle cx={36} cy={36} r="30" stroke="#F74455" strokeWidth={12} fill="rgba(0,0,0,0)" />;
|
|
}
|
|
|
|
Circle.width = 72;
|
|
Circle.height = 72;
|
|
|
|
const center = { x: 60, y: 60 };
|
|
|
|
const shapes: Shape[] = [
|
|
{
|
|
type: 'shape',
|
|
source: Circle,
|
|
frames: [
|
|
{
|
|
frame: 0,
|
|
scaleX: 1.3,
|
|
scaleY: 1.3,
|
|
opacity: 0.4,
|
|
...center,
|
|
},
|
|
{
|
|
frame: 20,
|
|
scaleX: 1.5,
|
|
scaleY: 1.5,
|
|
opacity: 0,
|
|
},
|
|
{
|
|
frame: 21,
|
|
scaleX: 1,
|
|
scaleY: 1,
|
|
opacity: 0,
|
|
},
|
|
{
|
|
frame: 40,
|
|
scaleX: 1.3,
|
|
scaleY: 1.3,
|
|
opacity: 0.4,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
type: 'shape',
|
|
source: Circle,
|
|
frames: [
|
|
{
|
|
frame: 0,
|
|
scaleX: 1,
|
|
scaleY: 1,
|
|
...center,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
type: 'shape',
|
|
source: Heart,
|
|
frames: [
|
|
{
|
|
frame: 0,
|
|
...center,
|
|
cubic: Hitu.CUBIC_EASE,
|
|
},
|
|
],
|
|
},
|
|
];
|
|
|
|
export default function Meaningful() {
|
|
return <InteractiveIcon shapes={shapes} frames={60} />;
|
|
}
|