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

Merge branch 'anims-change' of ssh://mnml.gg:40022/~/mnml into anims-change

Browse Source
This commit is contained in:
Mashy 2019-07-02 23:14:10 +10:00
commit cd3634a692
4 changed files with 34 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
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,14 +56,12 @@ 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: 'easeInOutSine',
strokeWidth: [8, 0], delay: TIMES.TARGET_DURATION_MS / 2,
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,
direction: 'reverse',
})); }));
} }

39
client/src/components/anims/decay.jsx
View File

@ -1,6 +1,7 @@
const preact = require('preact'); const preact = require('preact');
const { Component } = require('preact'); const { Component } = require('preact');
const anime = require('animejs').default; const anime = require('animejs').default;
const times = require('lodash/times');
const { TIMES, COLOURS } = require('../../constants'); const { TIMES, COLOURS } = require('../../constants');
@ -14,25 +15,17 @@ class Decay extends Component {
return ( return (
<svg <svg
id='decay' id='decay'
class="skill-animation white" 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 300 300"> viewBox="0 0 300 300">
<g> <g>
<rect x="135" y="135" width="30" height="30" /> {times(15, () => (
<rect x="135" y="135" width="30" height="30" /> <g class="box">
<rect x="135" y="135" width="30" height="30" /> <rect class="blue" x="135" y="135" width="30" height="30" />
<rect x="135" y="135" width="30" height="30" /> <rect class="white" style={{ strokeWidth: '2px' }} x="135" y="135" width="30" height="30" />
<rect x="135" y="135" width="30" height="30" /> </g>
<rect x="135" y="135" width="30" height="30" /> ))}
<rect x="135" y="135" width="30" height="30" />
<rect x="135" y="135" width="30" height="30" />
<rect x="135" y="135" width="30" height="30" />
<rect x="135" y="135" width="30" height="30" />
<rect x="135" y="135" width="30" height="30" />
<rect x="135" y="135" width="30" height="30" />
<rect x="135" y="135" width="30" height="30" />
<rect x="135" y="135" width="30" height="30" />
</g> </g>
</svg> </svg>
); );
@ -42,20 +35,18 @@ class Decay extends Component {
this.animations.push(anime({ this.animations.push(anime({
targets: ['#decay'], targets: ['#decay'],
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_DURATION_MS - 1000, 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',
})); }));
this.animations.push(anime({ this.animations.push(anime({
targets: ['#decay rect'], targets: ['#decay .box'],
x: () => anime.random(50, 250), transform: () => `
y: () => anime.random(50, 250), translate(${anime.random(-120, 120)} ${anime.random(-120, 120)})
stroke: [COLOURS.WHITE, COLOURS.BLUE], rotate(${anime.random(-15, 15)})
strokeWidth: [4, 2], `,
transform: () => `rotate(${anime.random(-15, 15)})`,
filter: [`drop-shadow(0 0 5px ${COLOURS.WHITE}`, `drop-shadow(0 0 5px ${COLOURS.BLUE}`],
easing: 'easeOutSine', easing: 'easeOutSine',
delay: TIMES.TARGET_DELAY_MS, 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,

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

@ -44,7 +44,7 @@ class Parry extends Component {
targets: ['#parry'], targets: ['#parry'],
opacity: [ opacity: [
{ value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 }, { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
{ value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.3 }, { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
], ],
easing: 'easeInOutSine', easing: 'easeInOutSine',
})); }));
@ -52,7 +52,7 @@ class Parry extends Component {
this.animations.push(anime({ this.animations.push(anime({
targets: ['#parry'], targets: ['#parry'],
rotateX: 180, rotateX: 180,
delay: TIMES.TARGET_DELAY_MS, delay: TIMES.TARGET_DELAY_MS * 2,
duration: TIMES.TARGET_DURATION_MS / 2, duration: TIMES.TARGET_DURATION_MS / 2,
easing: 'easeOutSine', easing: 'easeOutSine',
})); }));