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

remove stroke from chaos

Browse Source
This commit is contained in:
ntr 2019-10-07 12:25:43 +11:00
parent a72dd96bf4
commit 0a327786ce
2 changed files with 38 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
client/src/animations.test.jsx
View File

@ -69,13 +69,31 @@ document.fonts.load('16pt "Jura"').then(() => {
});
const SKILLS = [
'Absorb',
'Absorption',
'Amplify',
'Attack',
'Banish',
'Bash',
'Blast',
'Block',
'Break',
'Buff',
'Chaos',
'Counter',
'CounterAttack',
'Curse',
'Debuff',
'Decay',
'DecayTick',
'Electrify',
'Electrocute',
'ElectrocuteTick',
'Haste',
'HasteStrike',
'Heal',
'HybridBlast',
'Hybrid',
'HybridBlast',
'Intercept',
'Invert',
'Link',
@ -95,22 +113,4 @@ const SKILLS = [
'Sustain',
'Triage',
'TriageTick',
'Absorb',
'Absorption',
'Amplify',
'Attack',
'Banish',
'Bash',
'Blast',
'Block',
'Break',
'Buff',
'Chaos',
'CounterAttack',
'Counter',
'Curse',
'Debuff',
'Decay',
'DecayTick',
'Electrify',
];

57
client/src/components/anims/chaos.jsx
View File

@ -19,10 +19,7 @@ function projectile(x, y, radius, colour) {
cx={x}
cy={y}
r={radius}
fill="url(#grad1)"
stroke-width="2"
stroke={colour}
filter="url(#explosion)"
fill={colour}
/>
);
}
@ -31,8 +28,11 @@ class Chaos extends Component {
constructor() {
super();
this.animations = [];
const points = randomPoints(7, 30, { x: 0, y: 0, width: 300, height: 100 });
this.charges = points.map(coord => projectile(coord[0], coord[1], 14, '#A25AC1'));
const points = randomPoints(20, 30, { x: 0, y: 0, width: 300, height: 100 });
this.charges = points.map(coord => {
const colour = Math.random() >= 0.5 ? '#a52a2a' : '#3050f8';
return projectile(coord[0], coord[1], 7, colour);
});
}
render() {
@ -43,19 +43,6 @@ class Chaos extends Component {
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 300 400">
// {this.charges}
<defs>
<radialGradient id="grad1" cx="50%" cy="0%" r="85%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:#dba9a9;stop-opacity:0.6" />
<stop offset="100%" style={'stop-color:#A25AC1;stop-opacity:1'} />
</radialGradient>
</defs>
<filter id="explosion">
<feGaussianBlur stdDeviation="4"/>
<feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="3" result="turbulence"/>
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="A" yChannelSelector="A"/>
</filter>
{this.charges}
</svg>
);
@ -63,20 +50,14 @@ class Chaos extends Component {
componentDidMount() {
const projectiles = document.querySelectorAll('.skill-anim circle');
projectiles.forEach(proj => {
const colour = Math.random() >= 0.5 ? '#a52a2a' : '#3050f8';
anime.set(proj, {
stroke: colour,
});
});
anime.set('.skill-anim', {
translateY: -(window.screen.height) * 0.35 * this.props.direction.y,
translateX: -(window.screen.width) * 0.15 * this.props.direction.x,
opacity: 0,
});
anime.set('#explosion feDisplacementMap', {
scale: 1,
});
// anime.set('#explosion feDisplacementMap', {
// scale: 1,
// });
this.animations.push(anime({
targets: '.skill-anim',
@ -96,19 +77,19 @@ class Chaos extends Component {
duration: (TIMES.TARGET_DURATION_MS * 1 / 2),
easing: 'easeInQuad',
}));
this.animations.push(anime({
targets: '#explosion feDisplacementMap',
scale: 75,
loop: false,
delay: (TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 2 / 3),
duration: (TIMES.TARGET_DURATION_MS * 1 / 3),
easing: 'easeInQuad',
}));
// this.animations.push(anime({
// targets: '#explosion feDisplacementMap',
// scale: 75,
// loop: false,
// delay: (TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 2 / 3),
// duration: (TIMES.TARGET_DURATION_MS * 1 / 3),
// easing: 'easeInQuad',
// }));
projectiles.forEach(proj => anime({
targets: proj,
cx: Math.random() * 250 + 25,
cy: Math.random() * 300 + 50,
cx: 150 + (Math.random() * 50 * (Math.random() < 0.5 ? -1 : 1)),
cy: 200 + (Math.random() * 50 * (Math.random() < 0.5 ? -1 : 1)),
delay: TIMES.TARGET_DELAY_MS,
duration: (TIMES.TARGET_DURATION_MS * 2 / 3),
easing: 'easeInQuad',