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

curse

Browse Source
This commit is contained in:
ntr 2019-06-30 21:55:15 +10:00
parent 6fdd1c6a6c
commit 34bcf2209a
3 changed files with 158 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,6 +10,7 @@ const Bash = require('./anims/bash');
const Block = require('./anims/block');
const Buff = require('./anims/buff');
const Debuff = require('./anims/debuff');
const Curse = require('./anims/curse');
const Stun = require('./anims/stun');
const Heal = require('./anims/heal');
const Hex = require('./anims/hex');
@ -102,6 +103,7 @@ function animations(props) {
case 'Bash': return <Bash />;
case 'Block': return <Block />;
case 'Buff': return <Buff />;
case 'Curse': return <Curse />;
case 'Blast': return <Blast id={construct.id} stage={stage} team={player}/>;
case 'Debuff': return <Debuff />;
case 'Strike': return <Strike id={construct.id} stage={stage} team={player} colour={colours.red}/>;

97
client/src/components/anims/bash.jsx Normal file
View File

@ -0,0 +1,97 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const { TIMES } = require('../../constants');
class Bash extends Component {
constructor() {
super();
this.animations = [];
}
render() {
return (
<svg
class='skill-animation red red-fill'
version="1.1"
id="bash"
xmlns="http://www.w3.org/2000/svg"
style={{ transform: 'scale(3)' }}
viewBox="0 0 128 128">
<filter id='bashFilter'>
<feTurbulence type="turbulence" baseFrequency="0" numOctaves="1" result="turbulence"></feTurbulence>
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
</filter>
<rect
x="32"
y="32"
width="64"
height="64"
style={{ filter: 'url("#bashFilter")' }}>
</rect>
</svg>
);
}
componentDidMount() {
this.animations.push(anime({
targets: ['#bash'],
opacity: 1,
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DELAY_MS,
}));
this.animations.push(anime({
targets: ['#bash'],
scale: {
value: 1,
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS * 0.1,
endDelay: TIMES.TARGET_DURATION_MS * 0.9,
easing: 'easeInExpo',
},
keyframes: [
{ translateX: 0, translateY: 0 },
{ translateX: -5, translateY: 0 },
{ translateX: 0, translateY: -5 },
{ translateX: 5, translateY: 0 },
{ translateX: 0, translateY: 5 },
{ translateX: -2, translateY: 0 },
{ translateX: 0, translateY: -2 },
{ translateX: 2, translateY: 0 },
{ translateX: 0, translateY: 2 },
],
delay: TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 0.1,
duration: TIMES.TARGET_DURATION_MS * 0.2,
easing: 'easeOutSine',
}));
this.animations.push(anime({
targets: ['#bashFilter feTurbulence', '#bashFilter feDisplacementMap'],
baseFrequency: 2,
scale: 10,
numOctaves: 5,
easing: 'easeOutSine',
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();
}
}
}
module.exports = Bash;

59
client/src/components/anims/curse.jsx Normal file
View File

@ -0,0 +1,59 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const { TIMES } = require('../../constants');
class Curse extends Component {
constructor() {
super();
this.animations = [];
}
render() {
return (
<svg
id='curse'
class="skill-animation blue"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 198 200">
<ellipse cx="100" cy="100" rx="30" ry="30"/>
<ellipse cx="100" cy="100" rx="60" ry="60"/>
<ellipse cx="100" cy="100" rx="90" ry="90"/>
</svg>
);
}
componentDidMount() {
this.animations.push(anime({
targets: ['#curse'],
opacity: 1,
easing: 'easeOutExpo',
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DELAY_MS,
}));
this.animations.push(anime({
targets: ['#curse'],
scale: [0.5, 0.8],
strokeWidth: 0,
easing: 'easeInOutSine',
direction: 'alternate',
duration: TIMES.START_SKILL,
}));
}
// 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 = Curse;