mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-05 17:59:57 +08:00
afedb4127f
* patch route * use data for promise * rename Article file * Article in TS * clean up * use collect * adjust css * card it * listing * res * hiring * add footer * english it * rm others * fix lint * fix navigation * add dropdown button * Header with TS * split input & logo * navigation out * use flex * flex everything * stretch * hide search when narrow * init category * global rules * more cat * pages * level 2 width * level 3 * level 4 * skip before ready * clean up * unqiue shadow variable * update eslintignore * update ignore * fix ssr * fix location param * replace images * shake more * fix top of navigation * remove home * reorder nav & adjust padding style * narrow res style * Update research-form-page.zh-CN.md (#21426) Co-authored-by: Golevka <huangsamfisher@163.com> * rm skip * narrow merge in * reset p style * update svg * fix lint * update ignore * update lint ignore * Update research-result-page.zh-CN.md (#21432) Co-authored-by: mihaideyu <zxy1010414746@163.com> * Update research-result-page.zh-CN.md * Update research-workbench.zh-CN.md (#21438) Co-authored-by: yingxirz <inseeing@gmail.com> * Update research-workbench.zh-CN.md * Update research-list-page.zh-CN.md (#21441) Co-authored-by: yingxirz <inseeing@gmail.com> * Update research-list-page.zh-CN.md * padding use 40px * add responsive of ref * fix p margin * Update research-workbench.zh-CN.md * Update buttons.md (#21456) Co-authored-by: yingxirz <inseeing@gmail.com> * Update resources.en-US.md (#21457) * Update research-navigation.zh-CN.md (#21453) * Update research-navigation.zh-CN.md * Update research-navigation.zh-CN.md * Update research-navigation.zh-CN.md * Update research-empty.zh-CN.md (#21451) * Update research-empty.zh-CN.md * Update research-empty.zh-CN.md * Update research-empty.zh-CN.md * Update research-empty.zh-CN.md Co-authored-by: 二货机器人 <smith3816@gmail.com> * Update research-exception-page.zh-CN.md (#21452) * Update research-exception-page.zh-CN.md * Update research-exception-page.zh-CN.md * Update research-message-and-feedback.zh-CN.md (#21463) * Update research-message-and-feedback.zh-CN.md (#21467) * Update research-message-and-feedback.zh-CN.md * Update research-message-and-feedback.zh-CN.md * Update research-message-and-feedback.zh-CN.md * Update research-message-and-feedback.zh-CN.md * replace background * fix lines margin * home padding * patch minTilda doc * Update resources.zh-CN.md (#21503) * clean up * Update research-workbench.zh-CN.md (#21512) Co-authored-by: yingxirz <inseeing@gmail.com> * Update research-overview.zh-CN.md (#21513) Co-authored-by: yingxirz <inseeing@gmail.com> * Update research-result-page.zh-CN.md (#21514) Co-authored-by: mihaideyu <zxy1010414746@163.com> * Update research-list-page.zh-CN.md (#21515) Co-authored-by: yingxirz <inseeing@gmail.com> * fix doc * Update research-message-and-feedback.zh-CN.md (#21516) * adjust home nav width * Update research-message-and-feedback.zh-CN.md (#21535) * Update research-form-page.zh-CN.md (#21554) Co-authored-by: Golevka <huangsamfisher@163.com> * patch file * clean up * update shadow.zh-CN update shadow.zh-CN * add shadow table * Update visual.zh-CN.md (#21577) Co-authored-by: shuwenliu0116 <33922479+shuwenliu0116@users.noreply.github.com> * Update docs/spec/shadow.zh-CN.md Co-Authored-By: 偏右 <afc163@gmail.com> * Update docs/spec/shadow.zh-CN.md Co-Authored-By: 偏右 <afc163@gmail.com> * Update docs/spec/shadow.zh-CN.md Co-Authored-By: 偏右 <afc163@gmail.com> * Update docs/spec/shadow.zh-CN.md Co-Authored-By: 偏右 <afc163@gmail.com> * Update docs/spec/shadow.zh-CN.md Co-Authored-By: 偏右 <afc163@gmail.com> * patch docs * fix doc * rm page suffix * fix style * mobile it * Update resources.en-US.md (#21561) * chart res * add qr code * adjust qr * Update visual.zh-CN.md (#21603) Co-authored-by: shuwenliu0116 <33922479+shuwenliu0116@users.noreply.github.com> * fix site qr * mobile height of it * book update * 3.x site link * isMobile is new cnotext * Update research-form.zh-CN.md (#21604) Co-authored-by: Golevka <huangsamfisher@163.com> * adjust form doc * mobile use link * adjust order * flush * fix ts * Update research-navigation.zh-CN.md (#21606) * Update research-navigation.zh-CN.md (#21609) * rm useless lines * add mobile icon * Update research-exception.zh-CN.md (#21612) * Update research-empty.zh-CN.md (#21610) * Update research-workbench.zh-CN.md * Update visual.zh-CN.md * adjust mobile icon * Update research-message-and-feedback.zh-CN.md (#21613) * Update research-list.zh-CN.md (#21617) Co-authored-by: yingxirz <inseeing@gmail.com> * Update research-workbench.zh-CN.md (#21618) Co-authored-by: yingxirz <inseeing@gmail.com> * Update visual.zh-CN.md (#21619) Co-authored-by: shuwenliu0116 <33922479+shuwenliu0116@users.noreply.github.com> * Update research-result.zh-CN.md (#21620) Co-authored-by: mihaideyu <zxy1010414746@163.com> * Update research-form.zh-CN.md (#21615) * Update research-message-and-feedback.zh-CN.md (#21616) * Update research-list.zh-CN.md (#21621) Co-authored-by: yingxirz <inseeing@gmail.com> * Update research-result.zh-CN.md (#21624) Co-authored-by: mihaideyu <zxy1010414746@163.com> * update ref color * update zip file * fix mobile icon * rm skip dark * fix cat * update zip link * update zip link Co-authored-by: Golevka <huangsamfisher@163.com> Co-authored-by: mihaideyu <zxy1010414746@163.com> Co-authored-by: yingxirz <inseeing@gmail.com> Co-authored-by: 偏右 <afc163@gmail.com> Co-authored-by: myeunhyuk <39618466+myeunhyuk@users.noreply.github.com> Co-authored-by: minTilda <31951290+minTilda@users.noreply.github.com> Co-authored-by: ziyuan-174774 <61226089+ziyuan-174774@users.noreply.github.com> Co-authored-by: 竹尔 <54707870+AntDesigners@users.noreply.github.com> Co-authored-by: shuwenliu0116 <33922479+shuwenliu0116@users.noreply.github.com>
187 lines
5.6 KiB
TypeScript
187 lines
5.6 KiB
TypeScript
import * as React from 'react';
|
|
import Hitu from '@ant-design/hitu';
|
|
import './Background.less';
|
|
|
|
const RANDOM_OFFSET = 50;
|
|
const TOTAL_FRAMES = 600;
|
|
|
|
function randomFrames(x: number, y: number): any[] {
|
|
const common = { x, y, cubic: Hitu.CUBIC_EASE_IN_OUT };
|
|
|
|
return [
|
|
{
|
|
frame: 0,
|
|
...common,
|
|
},
|
|
{
|
|
frame: TOTAL_FRAMES / 2,
|
|
...common,
|
|
x: x - Math.random() * RANDOM_OFFSET * 2 + RANDOM_OFFSET,
|
|
y: y - Math.random() * RANDOM_OFFSET * 2 + RANDOM_OFFSET,
|
|
},
|
|
{
|
|
frame: TOTAL_FRAMES,
|
|
...common,
|
|
},
|
|
];
|
|
}
|
|
|
|
const ShadowSize = 30;
|
|
|
|
// =================================== Circle 1 ===================================
|
|
const CircleSize1 = 140;
|
|
const Circle1 = () => (
|
|
<svg>
|
|
<defs>
|
|
<filter id="banner-circle-shadow-1">
|
|
<feDropShadow dx="10" dy="10" stdDeviation="10" floodColor="rgba(0,0,0,0.05)" />
|
|
</filter>
|
|
<linearGradient id="banner-circle-fill-1" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" style={{ stopColor: '#FAFCFE' }} />
|
|
<stop offset="100%" style={{ stopColor: '#F9FCFE' }} />
|
|
</linearGradient>
|
|
</defs>
|
|
<circle
|
|
cx={CircleSize1 + ShadowSize}
|
|
cy={CircleSize1 + ShadowSize}
|
|
r={CircleSize1}
|
|
fill="url(#banner-circle-fill-1)"
|
|
filter="url(#banner-circle-shadow-1)"
|
|
/>
|
|
</svg>
|
|
);
|
|
Circle1.width = (CircleSize1 + ShadowSize) * 2;
|
|
Circle1.height = (CircleSize1 + ShadowSize) * 2;
|
|
|
|
// =================================== Circle 2 ===================================
|
|
const CircleSize2 = 200;
|
|
const Circle2 = () => (
|
|
<svg>
|
|
<defs>
|
|
<filter id="banner-circle-shadow-2">
|
|
<feDropShadow dx="10" dy="10" stdDeviation="10" floodColor="rgba(0,0,0,0.05)" />
|
|
</filter>
|
|
<linearGradient id="banner-circle-fill-2" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" style={{ stopColor: '#FAFCFE' }} />
|
|
<stop offset="50%" style={{ stopColor: '#F3F9FC' }} />
|
|
</linearGradient>
|
|
</defs>
|
|
<circle
|
|
cx={CircleSize2 + ShadowSize}
|
|
cy={CircleSize2 + ShadowSize}
|
|
r={CircleSize2}
|
|
fill="url(#banner-circle-fill-2)"
|
|
filter="url(#banner-circle-shadow-2)"
|
|
/>
|
|
</svg>
|
|
);
|
|
Circle2.width = (CircleSize2 + ShadowSize) * 2;
|
|
Circle2.height = (CircleSize2 + ShadowSize) * 2;
|
|
|
|
// ==================================== Rect 1 ====================================
|
|
const ReactSize1 = 90;
|
|
const React1 = () => (
|
|
<svg>
|
|
<defs>
|
|
<filter id="banner-rect-shadow-1">
|
|
<feDropShadow dx="10" dy="10" stdDeviation="10" floodColor="rgba(0,0,0,0.05)" />
|
|
</filter>
|
|
<linearGradient id="banner-rect-fill-1" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="25%" style={{ stopColor: '#F8FCFF' }} />
|
|
<stop offset="100%" style={{ stopColor: '#F8FBFF' }} />
|
|
</linearGradient>
|
|
</defs>
|
|
<rect
|
|
x={ShadowSize}
|
|
y={ShadowSize}
|
|
width={ReactSize1 * 2}
|
|
height={ReactSize1 * 2}
|
|
fill="url(#banner-rect-fill-1)"
|
|
filter="url(#banner-rect-shadow-1)"
|
|
/>
|
|
</svg>
|
|
);
|
|
React1.width = (ReactSize1 + ShadowSize) * 2;
|
|
React1.height = (ReactSize1 + ShadowSize) * 2;
|
|
|
|
// ================================== Diamond 1 ===================================
|
|
const DiamondSize1 = 400;
|
|
const Diamond1 = () => {
|
|
const start = ShadowSize;
|
|
const center = ShadowSize + DiamondSize1;
|
|
const end = ShadowSize + DiamondSize1 * 2;
|
|
|
|
return (
|
|
<svg width={center * 2} height={center * 2}>
|
|
<defs>
|
|
<filter id="banner-diamond-shadow-1">
|
|
<feDropShadow dx="10" dy="10" stdDeviation="10" floodColor="rgba(0,0,0,0.05)" />
|
|
</filter>
|
|
<linearGradient id="banner-diamond-fill-1" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="60%" style={{ stopColor: '#FCFDFF' }} />
|
|
<stop offset="100%" style={{ stopColor: '#FCFDFE' }} />
|
|
</linearGradient>
|
|
</defs>
|
|
|
|
<path
|
|
d={`M ${start} ${center} ${center} ${start} ${end} ${center} ${center} ${end} Z`}
|
|
fill="url(#banner-diamond-fill-1)"
|
|
filter="url(#banner-diamond-shadow-1)"
|
|
/>
|
|
</svg>
|
|
);
|
|
};
|
|
Diamond1.width = (DiamondSize1 + ShadowSize) * 2;
|
|
Diamond1.height = (DiamondSize1 + ShadowSize) * 2;
|
|
|
|
export default function Background() {
|
|
const [circleFrames, setCircleFrames] = React.useState<any[]>(randomFrames(550, 200));
|
|
const [circle2Frames, setCircle2Frames] = React.useState<any[]>(randomFrames(0, 448));
|
|
const [reactFrames, setReactFrames] = React.useState<any[]>(randomFrames(1400, 300));
|
|
const [diamondFrames, setDiamondFrames] = React.useState<any[]>(randomFrames(1100, -230));
|
|
|
|
return (
|
|
<div className="home-banner-background">
|
|
<img
|
|
alt="background"
|
|
src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*kJM2Q6uPXCAAAAAAAAAAAABkARQnAQ"
|
|
/>
|
|
<Hitu
|
|
width={1440}
|
|
height={448}
|
|
frames={TOTAL_FRAMES}
|
|
onFrame={frame => {
|
|
if (frame === 0) {
|
|
setCircleFrames(randomFrames(550, 200));
|
|
setCircle2Frames(randomFrames(0, 448));
|
|
setReactFrames(randomFrames(1400, 300));
|
|
setDiamondFrames(randomFrames(1100, -230));
|
|
}
|
|
}}
|
|
shapes={[
|
|
{
|
|
type: 'shape',
|
|
source: Circle1,
|
|
frames: circleFrames,
|
|
},
|
|
{
|
|
type: 'shape',
|
|
source: Circle2,
|
|
frames: circle2Frames,
|
|
},
|
|
{
|
|
type: 'shape',
|
|
source: React1,
|
|
frames: reactFrames,
|
|
},
|
|
{
|
|
type: 'shape',
|
|
source: Diamond1,
|
|
frames: diamondFrames,
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|