ntr/mnml
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

charge svg, space out randomly generated points

Browse Source
This commit is contained in:
Mashy
2019-06-19 14:01:34 +10:00
parent c4c3c415b9
commit ae481d54bf
3 changed files with 81 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/anims/test.jsx
+7 -52
View File
@@ -2,7 +2,9 @@ const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const charge = require('../svgs/charge');
const { TIMES } = require('../../constants');
const { randomPoints } = require('../../utils');
const duration = TIMES.START_SKILL;
@@ -10,53 +12,9 @@ class Attack extends Component {
constructor(props) {
super();
this.props = props;
const points = [];
for (let i = 0; i <= 2; i += 1) {
const x = Math.floor(Math.random() * 200 + 50);
const y = Math.floor(Math.random() * 300 + 50);
points.push([x, y]);
this.circles = points.map((coord, j) => (
<svg key={j}>
<polygon
points={`
${coord[0]},${coord[1] - 10}
${coord[0] - 20},${coord[1] + 20}
${coord[0] + 20},${coord[1] + 20}
`}
stroke="#a52a2a"
stroke-width="2"
id="charge"
/>
<polyline
points={`
${coord[0] + 20},${coord[1] + 20}
${coord[0] + 35},${coord[1] + 10}
${coord[0]},${coord[1] - 40}
${coord[0] - 35},${coord[1] + 10}
${coord[0] - 20},${coord[1] + 20}
`}
stroke="#a52a2a"
stroke-width="2"
id="charge"
/>
<polyline
points={`
${coord[0] + 35},${coord[1] + 10}
${coord[0] + 50},${coord[1]}
${coord[0]},${coord[1] - 70}
${coord[0] - 50},${coord[1]}
${coord[0] - 35},${coord[1] + 10}
`}
stroke="#a52a2a"
stroke-width="2"
id="charge"
/>
</svg>
));
}
const points = randomPoints(7, 50, 300, 400);
const length = 6;
this.charges = points.map(coord => charge(coord[0], coord[1], length, '#a52a2a'));
}
render() {
@@ -67,10 +25,7 @@ class Attack extends Component {
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 300 400">
<filter id="blurMe">
<feGaussianBlur in="SourceGraphic" stdDeviation="2" />
</filter>
{this.circles}
{this.charges}
</svg>
);
}
@@ -105,7 +60,7 @@ class Attack extends Component {
fill: '#a52a2a',
delay: anime.stagger(100),
loop: true,
duration: 1000,
duration: duration,
easing: 'easeInQuad',
});