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

parry fixes and curse change

Browse Source
This commit is contained in:
ntr 2019-07-02 22:26:02 +10:00
parent 8dd3a923ec
commit 6070df8bd0
3 changed files with 21 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,7 +17,7 @@ class Curse extends Component {
return ( return (
<svg <svg
id='curse' id='curse'
class="skill-animation blue" class="skill-animation"
version="1.1" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 198 200"> viewBox="0 0 198 200">
@ -30,10 +30,16 @@ class Curse extends Component {
</feMerge> </feMerge>
</filter> </filter>
</defs> </defs>
<g filter="url(#curseFilter)"> <g filter="url(#curseFilter)" class="blue" >
<ellipse cx="100" cy="100" rx="30" ry="30"/> <circle cx="100" cy="100" r="30" />
<ellipse cx="100" cy="100" rx="60" ry="60"/> <circle cx="100" cy="100" r="60" />
<ellipse cx="100" cy="100" rx="90" ry="90"/> <circle cx="100" cy="100" r="90" />
</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" />
</g> </g>
</svg> </svg>
); );
@ -50,13 +56,10 @@ class Curse extends Component {
})); }));
this.animations.push(anime({ this.animations.push(anime({
targets: ['#curse'], targets: ['#curse circle'],
scale: [0.5, 1], r: 0,
stroke: [COLOURS.WHITE, COLOURS.BLUE], easing: 'easeInSine',
strokeWidth: [8, 0], delay: TIMES.TARGET_DURATION_MS * 0.4,
filter: [`drop-shadow(0 0 5px ${COLOURS.WHITE}`, `drop-shadow(0 0 5px ${COLOURS.BLUE}`],
easing: 'easeOutSine',
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS, duration: TIMES.TARGET_DURATION_MS,
})); }));
} }

10
client/src/components/anims/heal.jsx
View File

@ -58,16 +58,6 @@ class Heal extends Component {
easing: 'easeInOutSine', easing: 'easeInOutSine',
})); }));
// this.animations.push(anime({
// targets: '.skill-anim',
// translateY: 0,
// translateX: 0,
// loop: false,
// delay: TIMES.TARGET_DELAY_MS,
// duration: (duration * 1 / 2),
// easing: 'easeInQuad',
// }));
this.animations.push(anime({ this.animations.push(anime({
targets: ['#heal circle'], targets: ['#heal circle'],
cx: 150, cx: 150,

12
client/src/components/anims/parry.jsx
View File

@ -43,8 +43,8 @@ class Parry extends Component {
this.animations.push(anime({ this.animations.push(anime({
targets: ['#parry'], targets: ['#parry'],
opacity: [ opacity: [
{ value: 1, delay: TIMES.TARGET_FADE_IN_DELAY, duration: TIMES.TARGET_FADE_IN_DURATION }, { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
{ value: 0, delay: TIMES.TARGET_FADE_OUT_DELAY, duration: TIMES.FADE_OUT_DURATION }, { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
], ],
easing: 'easeInOutSine', easing: 'easeInOutSine',
})); }));
@ -52,20 +52,20 @@ class Parry extends Component {
this.animations.push(anime({ this.animations.push(anime({
targets: ['#parry'], targets: ['#parry'],
rotateX: 180, rotateX: 180,
delay: TIMES.TARGET_FADE_IN_DELAY * 3, delay: TIMES.TARGET_DELAY_MS * 2,
duration: TIMES.TARGET_DURATION_MS / 2, duration: TIMES.TARGET_DURATION_MS / 2,
easing: 'easeOutSine', easing: 'easeOutSine',
})); }));
this.animations.push(anime({ this.animations.push(anime({
targets: ['#parryFilter feTurbulence', ' #parryFilter feDisplacementMap'], targets: ['#parryFilter feTurbulence', '#parryFilter feDisplacementMap'],
baseFrequency: 2, baseFrequency: 2,
scale: 10, scale: 10,
numOctaves: 5, numOctaves: 5,
easing: 'easeOutSine', easing: 'easeOutSine',
delay: TIMES.TARGET_FADE_IN_DELAY, delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.RESOLUTION_TOTAL_MS, duration: TIMES.TARGET_DURATION_MS,
})); }));
} }