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

resets

Browse Source
This commit is contained in:
ntr 2019-06-30 13:22:59 +10:00
parent 2f9c1aeda3
commit ee331230ce
8 changed files with 131 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
client/assets/styles/game.css
View File

@ -342,6 +342,15 @@
opacity: 0;
}
.skill-animation {
opacity: 0;
transition-property: opacity;
transition-duration: 0.5s;
transition-delay: 0;
transition-timing-function: ease;
}
/*
COMBAT ANIMATIONS
*/

2
client/src/animations.socket.jsx
View File

@ -37,7 +37,7 @@ function createSocket(store) {
// store.dispatch(actions.setResolution(stagedR));
// });
setTimeout(cb, 2000);
setTimeout(cb, TIMES.RESOLUTION_TOTAL_MS);
}, err => {
if (err) return console.error(err);
store.dispatch(actions.setResolution(null));

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

@ -1,12 +1,13 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const { TIMES } = require('../../constants');
class Amplify extends Component {
constructor() {
super();
this.id = Math.random();
this.animations = [];
}
render() {
@ -30,24 +31,41 @@ class Amplify extends Component {
componentDidMount() {
const altPath = 'M0,100 C100,400 100,-200 200,100';
anime({
targets: '#amplify path',
this.animations.push(anime({
targets: ['#amplify'],
opacity: 1,
}));
this.animations.push(anime({
targets: ['#amplify path'],
d: [{ value: altPath }],
stroke: ['#3498db', '#a52a2a'],
duration: 1000,
direction: 'alternate',
easing: 'easeInOutSine',
delay: 500,
});
anime({
duration: TIMES.TARGET_DURATION_MS,
delay: TIMES.TARGET_DELAY_MS,
}));
this.animations.push(anime({
targets: ['#ampFilter feTurbulence', '#ampFilter feDisplacementMap'],
baseFrequency: 0.15,
scale: 4,
direction: 'alternate',
easing: 'easeInOutExpo',
delay: 500,
});
duration: TIMES.TARGET_DURATION_MS,
delay: TIMES.TARGET_DELAY_MS,
}));
}
// this is necessary because
// skipping / timing / unmounting race conditions
// can cause the animations to cut short, this will ensure the values are reset
// because preact will recycle all these components
componentWillUnmount() {
for (let i = this.animations.length - 1; i >= 0; i--) {
this.animations[i].reset();
}
}
}

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

@ -5,6 +5,11 @@ const anime = require('animejs').default;
const { TIMES } = require('../../constants');
class Buff extends Component {
constructor() {
super();
this.animations = [];
}
render() {
return (
<svg
@ -22,29 +27,39 @@ class Buff extends Component {
}
componentDidMount() {
anime({
this.animations.push(anime({
targets: ['#buff .buff-one'],
points: '0,190 100,10 190,190',
easing: 'easeOutExpo',
duration: TIMES.START_SKILL,
complete: anim => anim.reset(),
});
}));
anime({
this.animations.push(anime({
targets: ['#buff .buff-two'],
points: '40,170 100,50 160,170',
easing: 'easeOutExpo',
duration: TIMES.START_SKILL,
complete: anim => anim.reset(),
});
}));
anime({
this.animations.push(anime({
targets: ['#buff .buff-three'],
points: '70,150 100,90 130,150',
easing: 'easeOutExpo',
duration: TIMES.START_SKILL,
complete: anim => anim.reset(),
});
}));
}
// this is necessary because
// skipping / timing / unmounting race conditions
// can cause the animations to cut short, this will ensure the values are reset
// because preact will recycle all these components
componentWillUnmount() {
for (let i = this.animations.length - 1; i >= 0; i--) {
this.animations[i].reset();
}
}
}

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

@ -4,16 +4,20 @@ const anime = require('animejs').default;
const { TIMES } = require('../../constants');
class Buff extends Component {
class Debuff extends Component {
constructor() {
super();
this.animations = [];
}
render() {
return (
<svg
id='buff'
version="1.1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 300 300"
style={{ transform: 'rotate(180deg)' }}
>
viewBox="0 0 300 300">
<g>
<polygon class='buff-one' points='0,190 100,300 190,190'/>
<polygon class='buff-two' points='40,170 100,300 160,170'/>
@ -24,30 +28,40 @@ class Buff extends Component {
}
componentDidMount() {
anime({
this.animations.push(anime({
targets: ['#buff .buff-one'],
points: '0,190 100,10 190,190',
easing: 'easeOutExpo',
duration: TIMES.START_SKILL,
complete: anim => anim.reset(),
});
}));
anime({
this.animations.push(anime({
targets: ['#buff .buff-two'],
points: '40,170 100,50 160,170',
easing: 'easeOutExpo',
duration: TIMES.START_SKILL,
complete: anim => anim.reset(),
});
}));
anime({
this.animations.push(anime({
targets: ['#buff .buff-three'],
points: '70,150 100,90 130,150',
easing: 'easeOutExpo',
duration: TIMES.START_SKILL,
complete: anim => anim.reset(),
});
}));
}
// this is necessary because
// skipping / timing / unmounting race conditions
// can cause the animations to cut short, this will ensure the values are reset
// because preact will recycle all these components
componentWillUnmount() {
for (let i = this.animations.length - 1; i >= 0; i--) {
this.animations[i].reset();
}
}
}
module.exports = Buff;
module.exports = Debuff;

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

@ -9,18 +9,26 @@ const { TIMES } = require('../../constants');
// https://animejs.com/documentation/#svgAttr
class Hex extends Component {
constructor() {
super();
this.animations = [];
}
render() {
return (
<svg
class='hex-anim skill-animation blue'
class='skill-animation blue'
version="1.1"
id="hex"
xmlns="http://www.w3.org/2000/svg"
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>
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="15" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
</filter>
<polygon
key={Date.now()}
points="64 68.64 8.574 100 63.446 67.68 64 4 64.554 67.68 119.426 100"
style={{ filter: 'url("#hexFilter")' }}>
</polygon>
@ -29,22 +37,42 @@ class Hex extends Component {
}
componentDidMount() {
anime({
targets: ['.hex-anim polygon'],
this.animations.push(anime({
targets: ['#hex'],
opacity: 1,
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DELAY_MS,
}));
this.animations.push(anime({
targets: ['#hex polygon'],
points: '64 124.94732621931382 8.574 96.00354944613788 8.62269130211947 32.03166105954991 64 4 119.37730869788052 32.03166105954991 119.426 96.00354944613788',
easing: 'easeOutExpo',
duration: TIMES.START_SKILL,
complete: anim => anim.reset(),
});
anime({
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS,
}));
this.animations.push(anime({
targets: ['feTurbulence', 'feDisplacementMap'],
baseFrequency: 0,
scale: 1,
easing: 'easeOutSine',
duration: TIMES.START_SKILL,
complete: anim => anim.reset(),
});
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS,
}));
}
// this is necessary because
// skipping / timing / unmounting race conditions
// can cause the animations to cut short, this will ensure the values are reset
// because preact will recycle all these components
componentWillUnmount() {
for (let i = this.animations.length - 1; i >= 0; i--) {
this.animations[i].reset();
}
}
}

6
client/src/constants.jsx
View File

@ -1,5 +1,11 @@
module.exports = {
TIMES: {
RESOLUTION_TOTAL_MS: 2000,
SOURCE_DURATION_MS: 1000,
TARGET_DELAY_MS: 500,
TARGET_DURATION_MS: 1500,
START_SKILL: 2000,
END_SKILL: 2000,
POST_SKILL: 2000,