ant-design/site/theme/template/Home/Banner/Background.tsx
二货机器人 afedb4127f
docs: Site with single paging (#21360)
* 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>
2020-02-27 10:53:30 +08:00

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>
);
}