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,
}
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)}
);
});
leave = {
opacity: 0, duration: 300, x: 100, y: 150, ease: 'easeInBack',
};
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 (
);
}
}