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-04 15:16:09 +10:00
parent af4efd43b8 d7b54f080c
commit 16d22fca0b
15 changed files with 232 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/animations.test.jsx
+1 -1
View File
@@ -110,7 +110,7 @@ const SKILLS = [
'SleepI',
'SnareI',
'StrikeI',
'TauntI',
'InterceptI',
'ThrowI',
'TriageI',
'TriageTickI',
client/src/components/animations.jsx
+3 -2
View File
@@ -27,6 +27,7 @@ const Refl = require('./anims/reflect');
const Chaos = require('./anims/chaos');
const Invert = require('./anims/invert');
const Slay = require('./anims/slay');
const Intercept = require('./anims/intercept');
const Sleep = require('./anims/sleep');
const Triage = require('./anims/triage');
const TriageTick = require('./anims/triage.tick');
@@ -121,7 +122,7 @@ function animations(props) {
case 'TriageTick': return <TriageTick />;
case 'Scatter': return false;
case 'Hybrid': return <Hybrid />;
case 'Taunt': return false;
case 'Intercept': return <Intercept player={player} />;
// Debuff base
case 'Debuff': return <Debuff />;
@@ -147,7 +148,7 @@ function animations(props) {
case 'Clutch': return false;
case 'Electrify': return <Electrify />;
case 'Electrocute': return <Electrocute />;
case 'ElectrocuteTick': return false;
case 'ElectrocuteTick': return <Electrocute />;
case 'Parry': return <Parry team={player} />;
case 'Purify': return <Purify team={player} />;
case 'Recharge': return <Recharge team={player} />;
client/src/components/anims/intercept.jsx
+94
View File
@@ -0,0 +1,94 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const {
TIMES,
COLOURS,
} = require('../../constants');
class Intercept extends Component {
constructor() {
super();
this.animations = [];
}
render() {
return (
<svg
class='skill-animation'
version="1.1"
id="intercept"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 128 128">
<filter id='interceptFilter'>
<feTurbulence type="turbulence" baseFrequency="0" numOctaves="1" result="turbulence"></feTurbulence>
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
</filter>
<g filter="url(#interceptFilter)" stroke="none" fill={COLOURS.RED} >
<rect x='32' y="64" width="64" height="2" />
<rect x='48' y="32" width="32" height="2" />
<rect x='56' y="16" width="16" height="2" />
</g>
</svg>
);
}
componentDidMount() {
this.animations.push(anime({
targets: ['#intercept'],
opacity: [
{ 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.2 },
],
easing: 'easeInOutSine',
}));
this.animations.push(anime({
targets: ['#intercept'],
transform: [
`scale(1) ${this.props.player ? 'rotate(180)' : ''}`,
`scale(3) ${this.props.player ? 'rotate(180)' : ''}`,
],
strokeWidth: 0,
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS,
easing: 'easeInSine',
// direction: 'reverse',
}));
this.animations.push(anime({
targets: ['#intercept rect'],
y: 96,
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS,
easing: 'easeInSine',
// direction: 'reverse',
}));
this.animations.push(anime({
targets: ['#interceptFilter feTurbulence', '#interceptFilter 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 = Intercept;
client/src/components/anims/red.circles.js
+81
View File
@@ -0,0 +1,81 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const { TIMES } = require('../../constants');
class Intercept extends Component {
constructor() {
super();
this.animations = [];
}
render({ player }) {
return (
<svg
class='skill-animation red'
version="1.1"
id="intercept"
xmlns="http://www.w3.org/2000/svg"
style={{
transform: player ? 'rotate3d(1, 0, 0, 180deg)' : '',
}}
viewBox="0 0 128 128">
<filter id='interceptFilter'>
<feTurbulence type="turbulence" baseFrequency="0" numOctaves="1" result="turbulence"></feTurbulence>
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
</filter>
<g filter="url(#interceptFilter)">
<circle cx="64" cy="128" r="48" />
<circle cx="64" cy="128" r="32" />
<circle cx="64" cy="128" r="16" />
</g>
</svg>
);
}
componentDidMount() {
this.animations.push(anime({
targets: ['#intercept'],
opacity: [
{ 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.2 },
],
easing: 'easeInOutSine',
}));
this.animations.push(anime({
targets: ['#intercept'],
scale: 3,
strokeWidth: 0,
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS,
easing: 'easeInOutCubic',
}));
this.animations.push(anime({
targets: ['#interceptFilter feTurbulence', '#interceptFilter 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 = Intercept;
client/src/test.instance.js
+1 -1
View File
@@ -1413,7 +1413,7 @@ function testInstance(uuid) {
"cd": null
},
{
"skill": "Taunt",
"skill": "Intercept",
"self_targeting": false,
"cd": 2
},
client/src/utils.jsx
+1 -1
View File
@@ -351,7 +351,7 @@ const removeTier = skill => {
if (skill.includes('Decay')) return 'Decay';
if (skill.includes('Invert')) return 'Invert';
if (skill.includes('Taunt')) return 'Taunt';
if (skill.includes('Intercept')) return 'Intercept';
if (skill.includes('Triage')) return 'Triage';
if (skill.includes('Scatter')) return 'Scatter';
if (skill.includes('Haste')) return 'Haste';