import React from 'react';
import { TweenOneGroup } from 'rc-tween-one';
import QueueAnim from 'rc-queue-anim';
import { Row, Col } from 'antd';
import ScrollOverPack from 'rc-scroll-anim/lib/ScrollOverPack';
import { Link } from 'bisheng/router';
import { FormattedMessage } from 'react-intl';
import * as utils from '../utils';
const page1Data = [
{
img: 'https://gw.alipayobjects.com/zos/rmsportal/URIeCOKLMAbRXaeXoNqN.svg',
name: '设计价值观',
nameEn: 'Design Values',
to: '/docs/spec/values',
svgBg: (
),
},
{
img: 'https://gw.alipayobjects.com/zos/rmsportal/qXncdwwUTTgUFnsbCNCE.svg',
name: '视觉',
nameEn: 'Visual',
to: '/docs/spec/colors',
svgBg: (
),
},
{
img: 'https://gw.alipayobjects.com/zos/rmsportal/YFXXZocxAgjReehpPNbX.svg',
name: '可视化',
nameEn: 'Visualization',
to: '/docs/spec/visual',
svgBg: (
),
},
{
img: 'https://gw.alipayobjects.com/zos/rmsportal/VPuetGsvJuYBwoDkZWFW.svg',
name: '动效',
nameEn: 'Animation',
to: '/docs/spec/motion',
svgBg: (
),
},
];
const getTransformXY = t => {
const s = t.replace(/[a-z|(|)]/g, '').split(',');
return {
x: s[0],
y: s[1],
};
};
const svgToXY = page1Data.map(item => {
const c = item.svgBg.props.children;
return c.map(child => {
const p = child.props;
const trnasformXY = p.transform ? getTransformXY(p.transform) : {};
return {
x: parseFloat(p.x || p.cx || trnasformXY.x),
y: parseFloat(p.y || p.cy || trnasformXY.y),
};
});
});
export default class Page1 extends React.PureComponent {
state = {
hoverKey: null,
};
leave = {
opacity: 0,
duration: 300,
x: 100,
y: 150,
ease: 'easeInBack',
};
onMouseOver = key => {
this.setState({
hoverKey: key,
});
};
onMouseOut = () => {
this.setState({
hoverKey: null,
});
};
getEnter = (i, e) => {
const ii = e.index;
const r = Math.random() * 2 - 1;
const y = Math.random() * 10 + 10;
const delay = Math.round(Math.random() * (ii * 30));
const pos = svgToXY[i][ii];
return [
{ x: 100, y: 150, duration: 0 },
{
delay,
opacity: 1,
x: pos.x,
y: pos.y,
ease: 'easeOutBack',
duration: 300,
},
{
y: r > 0 ? `+=${y}` : `-=${y}`,
duration: Math.random() * 1000 + 2000,
yoyo: true,
repeat: -1,
},
];
};
getSvgChild = child =>
child.map((item, i) => {
const props = { ...item.props };
if (item.type === 'g') {
props.transform = null;
} else {
['x', 'y', 'cx', 'cy'].forEach(str => {
if (str in props) {
props[str] = null;
}
});
}
return {React.cloneElement(item, props)};
});
render() {
const { locale, isMobile } = this.props;
const { hoverKey } = this.state;
const isZhCN = locale === 'zh-CN';
const children = page1Data.map((item, i) => {
const isHover = item.nameEn === hoverKey;
return (
this.getEnter(i, e)}
leave={this.leave}
{...item.svgBg.props}
component="svg"
resetStyle={false}
exclusive
>
{(isMobile || isHover) && this.getSvgChild(item.svgBg.props.children)}
{
this.onMouseOver(item.nameEn);
}}
onMouseLeave={this.onMouseOut}
>
{isZhCN ? item.name : item.nameEn}
);
});
return (
);
}
}