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