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

absorption anim

Browse Source
This commit is contained in:
ntr 2019-12-18 16:44:49 +10:00
parent 90bffcb6b7
commit 0563add0cb
3 changed files with 88 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
client/src/animations.test.jsx
View File

@ -65,19 +65,19 @@ const SKILLS = [
'Buff',
'Chaos',
'Counter',
// 'CounterAttack',
'CounterAttack',
'Curse',
'Debuff',
'Decay',
'DecayTick',
'Electrify',
'Electrocute',
// 'ElectrocuteTick',
'ElectrocuteTick',
'Haste',
// 'HasteStrike',
'HasteStrike',
'Heal',
'Hybrid',
// 'HybridBlast',
'HybridBlast',
'Intercept',
'Invert',
'Link',
@ -89,12 +89,12 @@ const SKILLS = [
'Ruin',
'Silence',
'Siphon',
// 'SiphonTick',
'SiphonTick',
'Slay',
'Sleep',
'Strike',
'Stun',
'Sustain',
'Triage',
// 'TriageTick',
'TriageTick',
];

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

@ -5,6 +5,7 @@ const { connect } = require('preact-redux');
const Amplify = require('./anims/amplify');
const Attack = require('./anims/attack');
const Absorb = require('./anims/absorb');
const Absorption = require('./anims/absorption');
const Bash = require('./anims/bash');
const Blast = require('./anims/blast');
const Block = require('./anims/block');
@ -113,6 +114,7 @@ class ConstructAnimation extends Component {
// case 'Banish': return setAvatarAnimation(true, true, resolution.id, construct.id, 'banish', null);
case 'Bash': return <Bash />;
case 'Absorb': return <Absorb />;
case 'Absorption': return <Absorption />;
case 'Sleep': return <Sleep />;
case 'Break': return <Break />;
case 'Ruin': return <Ruin />;

80
client/src/components/anims/absorption.jsx Normal file
View File

@ -0,0 +1,80 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const { TIMES } = require('../../constants');
class Absorb extends Component {
constructor() {
super();
this.animations = [];
}
render() {
return (
<svg
class='skill-animation blue'
version="1.1"
id="absorb"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 128 128">
<defs>
<filter id="absorbFilter">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<polygon
class='blue'
points="64 124.94732621931382 8.574 96.00354944613788 8.62269130211947 32.03166105954991 64 4 119.37730869788052 32.03166105954991 119.426 96.00354944613788"
filter="url(#absorbFilter)">
</polygon>
<polygon
class='white'
points="64 124.94732621931382 8.574 96.00354944613788 8.62269130211947 32.03166105954991 64 4 119.37730869788052 32.03166105954991 119.426 96.00354944613788">
</polygon>
</svg>
);
}
componentDidMount() {
this.animations.push(anime({
targets: ['#absorb'],
opacity: [
{ value: 1, duration: TIMES.TARGET_DURATION_MS * 0.2 },
{ value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
],
easing: 'easeInOutSine',
}));
this.animations.push(anime({
targets: ['#absorb polygon'],
points: '64 68.64 8.574 100 63.446 67.68 64 4 64.554 67.68 119.426 100',
easing: 'easeOutExpo',
duration: TIMES.TARGET_DURATION_MS,
}));
this.animations.push(anime({
targets: ['#absorb polygon.white'],
strokeWidth: [2, 1],
easing: 'easeInOutSine',
direction: 'alternate',
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 = Absorb;