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

sameerize timings fns

Browse Source
This commit is contained in:
ntr 2019-06-30 16:43:43 +10:00
parent 75c5e6cafb
commit 25f367091b
7 changed files with 79 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -35,7 +35,9 @@ class Amplify extends Component {
this.animations.push(anime({ this.animations.push(anime({
targets: ['#amplify'], targets: ['#amplify'],
opacity: 1, opacity: 1,
easing: 'easeInSine',
easing: 'easeOutExpo',
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DELAY_MS,
})); }));

6
client/src/components/anims/block.jsx
View File

@ -49,10 +49,10 @@ class Block extends Component {
})); }));
this.animations.push(anime({ this.animations.push(anime({
targets: ['feTurbulence', 'feDisplacementMap'], targets: ['#blockFilter feTurbulence', ' #blockFilter feDisplacementMap'],
baseFrequency: 0.02, baseFrequency: 0,
scale: 1, scale: 1,
easing: 'easeInOutElastic', easing: 'easeOutSine',
delay: TIMES.TARGET_DELAY_MS, delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS, duration: TIMES.TARGET_DURATION_MS,

29
client/src/components/anims/buff.jsx
View File

@ -14,10 +14,15 @@ class Buff extends Component {
return ( return (
<svg <svg
id='buff' id='buff'
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> <filter id='buffFilter'>
<feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="turbulence" style="transform: scale(1);"></feTurbulence>
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="15" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
</filter>
<g filter='url("#buffFilter")'>
<polygon class='buff-one' points='0,190 100,300 190,190'/> <polygon class='buff-one' points='0,190 100,300 190,190'/>
<polygon class='buff-two' points='40,170 100,300 160,170'/> <polygon class='buff-two' points='40,170 100,300 160,170'/>
<polygon class='buff-three' points='70,150 100,300 130,150'/> <polygon class='buff-three' points='70,150 100,300 130,150'/>
@ -27,11 +32,20 @@ class Buff extends Component {
} }
componentDidMount() { componentDidMount() {
this.animations.push(anime({
targets: ['#buff'],
opacity: 1,
easing: 'easeOutExpo',
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DELAY_MS,
}));
this.animations.push(anime({ this.animations.push(anime({
targets: ['#buff .buff-one'], targets: ['#buff .buff-one'],
points: '0,190 100,10 190,190', points: '0,190 100,10 190,190',
easing: 'easeOutExpo', easing: 'easeOutExpo',
duration: TIMES.START_SKILL duration: TIMES.START_SKILL,
})); }));
this.animations.push(anime({ this.animations.push(anime({
@ -47,6 +61,17 @@ class Buff extends Component {
easing: 'easeOutExpo', easing: 'easeOutExpo',
duration: TIMES.START_SKILL, duration: TIMES.START_SKILL,
})); }));
this.animations.push(anime({
targets: ['#buffFilter feTurbulence', ' #buffFilter feDisplacementMap'],
baseFrequency: 0,
scale: 1,
easing: 'easeOutSine',
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS,
}));
} }
// this is necessary because // this is necessary because

42
client/src/components/anims/debuff.jsx
View File

@ -13,15 +13,20 @@ class Debuff extends Component {
render() { render() {
return ( return (
<svg <svg
id='buff' id='debuff'
class="skill-animation"
version="1.1" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
style={{ transform: 'rotate(180deg)' }} style={{ transform: 'rotate(180deg)' }}
viewBox="0 0 300 300"> viewBox="0 0 300 300">
<g> <filter id='debuffFilter'>
<polygon class='buff-one' points='0,190 100,300 190,190'/> <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="turbulence" style="transform: scale(1);"></feTurbulence>
<polygon class='buff-two' points='40,170 100,300 160,170'/> <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="15" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
<polygon class='buff-three' points='70,150 100,300 130,150'/> </filter>
<g filter='url("#debuffFilter")'>
<polygon class='debuff-one' points='0,190 100,300 190,190'/>
<polygon class='debuff-two' points='40,170 100,300 160,170'/>
<polygon class='debuff-three' points='70,150 100,300 130,150'/>
</g> </g>
</svg> </svg>
); );
@ -29,26 +34,45 @@ class Debuff extends Component {
componentDidMount() { componentDidMount() {
this.animations.push(anime({ this.animations.push(anime({
targets: ['#buff .buff-one'], targets: ['#debuff'],
opacity: 1,
easing: 'easeOutExpo',
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DELAY_MS,
}));
this.animations.push(anime({
targets: ['#debuff .debuff-one'],
points: '0,190 100,10 190,190', points: '0,190 100,10 190,190',
easing: 'easeOutExpo', easing: 'easeOutExpo',
duration: TIMES.START_SKILL, duration: TIMES.START_SKILL,
})); }));
this.animations.push(anime({ this.animations.push(anime({
targets: ['#buff .buff-two'], targets: ['#debuff .debuff-two'],
points: '40,170 100,50 160,170', points: '40,170 100,50 160,170',
easing: 'easeOutExpo', easing: 'easeOutExpo',
duration: TIMES.START_SKILL, duration: TIMES.START_SKILL,
})); }));
this.animations.push(anime({ this.animations.push(anime({
targets: ['#buff .buff-three'], targets: ['#debuff .debuff-three'],
points: '70,150 100,90 130,150', points: '70,150 100,90 130,150',
easing: 'easeOutExpo', easing: 'easeOutExpo',
duration: TIMES.START_SKILL, duration: TIMES.START_SKILL,
complete: anim => anim.reset(),
})); }));
this.animations.push(anime({
targets: ['#debuffFilter feTurbulence', ' #debuffFilter feDisplacementMap'],
baseFrequency: 0,
scale: 1,
easing: 'easeOutSine',
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS,
}));
} }
// this is necessary because // this is necessary because

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

@ -22,13 +22,11 @@ class Hex extends Component {
id="hex" id="hex"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 128 128"> viewBox="0 0 128 128">
<filter id='hexFilter' <filter id='hexFilter'>
key={Date.now()}>
<feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="turbulence" style="transform: scale(1);"></feTurbulence> <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="turbulence" style="transform: scale(1);"></feTurbulence>
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="15" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap> <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="15" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
</filter> </filter>
<polygon <polygon
key={Date.now()}
points="64 68.64 8.574 100 63.446 67.68 64 4 64.554 67.68 119.426 100" points="64 68.64 8.574 100 63.446 67.68 64 4 64.554 67.68 119.426 100"
style={{ filter: 'url("#hexFilter")' }}> style={{ filter: 'url("#hexFilter")' }}>
</polygon> </polygon>

17
client/src/components/anims/stun.jsx
View File

@ -4,6 +4,9 @@ const anime = require('animejs').default;
const { TIMES } = require('../../constants'); const { TIMES } = require('../../constants');
// logarithmic spiral lifted from
// https://upload.wikimedia.org/wikipedia/commons/5/5b/Logarithmic_spiral_(1).svg
class Stun extends Component { class Stun extends Component {
constructor() { constructor() {
super(); super();
@ -47,14 +50,16 @@ class Stun extends Component {
this.animations.push(anime({ this.animations.push(anime({
targets: ['#stun'], targets: ['#stun'],
opacity: 1, opacity: 1,
easing: 'easeInSine',
easing: 'easeOutExpo',
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DELAY_MS,
})); }));
this.animations.push(anime({ this.animations.push(anime({
targets: ['#stun'], targets: ['#stun'],
rotate: 180, rotate: 180,
easing: 'easeInSine', easing: 'linear',
duration: TIMES.TARGET_DURATION_MS, duration: TIMES.TARGET_DURATION_MS,
delay: TIMES.TARGET_DELAY_MS, delay: TIMES.TARGET_DELAY_MS,
@ -62,12 +67,12 @@ class Stun extends Component {
this.animations.push(anime({ this.animations.push(anime({
targets: ['#stunFilter feTurbulence', '#stunFilter feDisplacementMap'], targets: ['#stunFilter feTurbulence', '#stunFilter feDisplacementMap'],
baseFrequency: 0.4, baseFrequency: 0,
scale: 5, scale: 1,
easing: 'easeInOutExpo', easing: 'easeOutSine',
duration: TIMES.TARGET_DURATION_MS,
delay: TIMES.TARGET_DELAY_MS, delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS,
})); }));
} }

2
client/src/components/targeting.arrows.jsx
View File

@ -89,7 +89,7 @@ class TargetSvg extends Component {
if (resolution.event[1]) ([, { skill }] = resolution.event); if (resolution.event[1]) ([, { skill }] = resolution.event);
} }
const resolutionText = resolution const resolutionText = resolution
? <text x={`${width / 2.3}`} y={`${height / 2.3}`} font-family="Jura" font-size="2em"> {skill} </text> ? <text x={`${(width / 2) - 50}`} y={`${(height / 2) + 16}`} font-family="Jura" font-size="2em"> {skill} </text>
: null; : null;
return ( return (