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

actually fix curse (anime doesn't seem to reset 'reverse')

Browse Source
This commit is contained in:
Mashy 2019-10-29 17:32:22 +10:00
parent 188ae0de6a
commit 8ce7edd841
1 changed files with 25 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
client/src/components/anims/curse.jsx
View File

@ -36,15 +36,15 @@ class Curse extends Component {
</filter>
</defs>
<g filter="url(#curseFilter)" class="blue" >
<circle cx="100" cy="100" r="30" />
<circle cx="100" cy="100" r="60" />
<circle cx="100" cy="100" r="90" />
<circle id="curseFilterOne" cx="100" cy="100" r="0" />
<circle id="curseFilterTwo" cx="100" cy="100" r="0" />
<circle id="curseFilterThree" cx="100" cy="100" r="0" />
</g>
<g class="white" style={{ strokeWidth: '2px' }}>
<circle cx="100" cy="100" r="30" />
<circle cx="100" cy="100" r="60" />
<circle cx="100" cy="100" r="90" />
<circle id="curseCircleOne" cx="100" cy="100" r="0" />
<circle id="curseCircleTwo" cx="100" cy="100" r="0" />
<circle id="curseCircleThree" cx="100" cy="100" r="0" />
</g>
</svg>
);
@ -61,12 +61,27 @@ class Curse extends Component {
}));
this.animations.push(anime({
targets: ['#curse circle'],
r: 0,
targets: ['#curseCircleOne', '#curseFilterOne'],
r: 30,
easing: 'easeInOutSine',
delay: TIMES.TIMES.TARGET_DELAY_MS,
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS,
}));
this.animations.push(anime({
targets: ['#curseCircleTwo', '#curseFilterTwo'],
r: 60,
easing: 'easeInOutSine',
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS,
}));
this.animations.push(anime({
targets: ['#curseCircleThree', '#curseFilterThree'],
r: 90,
easing: 'easeInOutSine',
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS,
direction: 'reverse',
}));
}