animations test fixes + new strike
This commit is contained in:
ntr
parent
d1b13ce092
commit
0edfe55387
@ -1,8 +1,14 @@
|
||||
require('./assets/styles/styles.less');
|
||||
require('./assets/styles/styles.mobile.css');
|
||||
require('./assets/styles/menu.less');
|
||||
require('./assets/styles/nav.less');
|
||||
require('./assets/styles/footer.less');
|
||||
require('./assets/styles/account.less');
|
||||
require('./assets/styles/controls.less');
|
||||
require('./assets/styles/instance.less');
|
||||
require('./assets/styles/vbox.less');
|
||||
require('./assets/styles/game.less');
|
||||
require('./assets/styles/player.less');
|
||||
require('./assets/styles/styles.mobile.css');
|
||||
require('./assets/styles/instance.mobile.css');
|
||||
require('./assets/styles/game.css');
|
||||
|
||||
// kick it off
|
||||
require('./src/animations.test.jsx');
|
||||
|
||||
@ -93,6 +93,18 @@ dl {
|
||||
"main ctrl";
|
||||
|
||||
padding: 0.5em 1em;
|
||||
|
||||
&.animations-test {
|
||||
grid-template-columns: 1fr 9fr 1fr;
|
||||
grid-template-areas:
|
||||
"hdr hdr ctrl"
|
||||
"nav main ctrl"
|
||||
"nav main ctrl";
|
||||
|
||||
nav {
|
||||
display: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
|
||||
@ -55,7 +55,7 @@ document.fonts.load('16pt "Jura"').then(() => {
|
||||
|
||||
const Animations = () => (
|
||||
<Provider store={store}>
|
||||
<div id="mnml">
|
||||
<div id="mnml" class="animations-test">
|
||||
<nav>
|
||||
{animationsNav(ws)}
|
||||
</nav>
|
||||
@ -69,24 +69,6 @@ document.fonts.load('16pt "Jura"').then(() => {
|
||||
});
|
||||
|
||||
const SKILLS = [
|
||||
'Absorb',
|
||||
'Absorption',
|
||||
'Amplify',
|
||||
'Attack',
|
||||
'Banish',
|
||||
'Bash',
|
||||
'Blast',
|
||||
'Block',
|
||||
'Break',
|
||||
'Buff',
|
||||
'Chaos',
|
||||
'CounterAttack',
|
||||
'Counter',
|
||||
'Curse',
|
||||
'Debuff',
|
||||
'Decay',
|
||||
'DecayTick',
|
||||
'Electrify',
|
||||
'Electrocute',
|
||||
'ElectrocuteTick',
|
||||
'Haste',
|
||||
@ -113,4 +95,22 @@ const SKILLS = [
|
||||
'Sustain',
|
||||
'Triage',
|
||||
'TriageTick',
|
||||
'Absorb',
|
||||
'Absorption',
|
||||
'Amplify',
|
||||
'Attack',
|
||||
'Banish',
|
||||
'Bash',
|
||||
'Blast',
|
||||
'Block',
|
||||
'Break',
|
||||
'Buff',
|
||||
'Chaos',
|
||||
'CounterAttack',
|
||||
'Counter',
|
||||
'Curse',
|
||||
'Debuff',
|
||||
'Decay',
|
||||
'DecayTick',
|
||||
'Electrify',
|
||||
];
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
const preact = require('preact');
|
||||
const { Component } = require('preact');
|
||||
const anime = require('animejs').default;
|
||||
const { connect } = require('preact-redux');
|
||||
const anime = require('animejs').default;
|
||||
|
||||
const { TIMES } = require('../../constants');
|
||||
const { TIMES, COLOURS } = require('../../constants');
|
||||
|
||||
const addState = connect(
|
||||
function receiveState(state) {
|
||||
@ -12,116 +12,67 @@ const addState = connect(
|
||||
}
|
||||
);
|
||||
|
||||
function laser(dimensions, colour) {
|
||||
const { x, y, length } = dimensions;
|
||||
return (
|
||||
<rect
|
||||
width="14"
|
||||
height={length}
|
||||
x={x}
|
||||
y={y}
|
||||
fill="url(#grad1)"
|
||||
stroke-width="2"
|
||||
stroke={colour}
|
||||
filter="url(#strikeFilter)"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
class Strike extends Component {
|
||||
constructor(props) {
|
||||
super();
|
||||
this.team = props.team;
|
||||
this.props = props;
|
||||
this.animations = [];
|
||||
this.colour = props.colour;
|
||||
|
||||
const coord = [0, 50, 100, 150, 200];
|
||||
const points = coord.map(pos => ({
|
||||
x: pos + Math.random() * 40,
|
||||
y: 50 + Math.random() * 100,
|
||||
length: 150 + Math.random() * 150,
|
||||
}));
|
||||
this.charges = points.map(pos => laser(pos, this.colour));
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<svg
|
||||
class={'skill-animation'}
|
||||
class='strike-anim'
|
||||
version="1.1"
|
||||
id="strike"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 300 400">
|
||||
<defs>
|
||||
<radialGradient id="grad1" cx="50%" cy="0%" r="85%" fx="50%" fy="50%">
|
||||
<stop offset="0%" style="stop-color:#dba9a9;stop-opacity:0.6" />
|
||||
<stop offset="100%" style={`stop-color:${this.colour};stop-opacity:1`} />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<filter id="strikeFilter">
|
||||
<feGaussianBlur stdDeviation="4"/>
|
||||
<feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="3" result="turbulence"/>
|
||||
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="A" yChannelSelector="A"/>
|
||||
viewBox="0 0 400 400">
|
||||
<filter id='strikeFilter'>
|
||||
<feTurbulence type="turbulence" baseFrequency="0" numOctaves="1" result="turbulence"></feTurbulence>
|
||||
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
|
||||
</filter>
|
||||
{this.charges}
|
||||
<g>
|
||||
<rect x="200" y="400"
|
||||
width="12" height="100" stroke-width="0" fill={COLOURS.RED} style={{ filter: 'url("#strikeFilter")' }} />
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
let rotate = 0; // Self target value
|
||||
if (this.props.direction.y) {
|
||||
if (!this.props.direction.x) rotate = this.props.direction.y > 0 ? 0 : 180;
|
||||
else {
|
||||
rotate = this.props.direction.y > 0
|
||||
? -Math.atan(this.props.direction.y / this.props.direction.x) * 180 / Math.PI
|
||||
: -Math.atan(this.props.direction.y / this.props.direction.x) * 180 / Math.PI + 180;
|
||||
}
|
||||
} else if (this.props.direction.x) {
|
||||
rotate = this.props.direction.x > 0 ? 270 : 90;
|
||||
}
|
||||
anime.set('#strike', {
|
||||
rotate,
|
||||
});
|
||||
|
||||
anime.set('#strike', {
|
||||
translateY: (window.screen.height) * 0.35 * this.props.direction.y,
|
||||
translateX: 0,
|
||||
});
|
||||
|
||||
this.animations.push(anime({
|
||||
targets: '#strike',
|
||||
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: '#strike',
|
||||
translateY: 0,
|
||||
translateX: 0,
|
||||
loop: false,
|
||||
targets: ['#strike rect'],
|
||||
easing: 'easeOutExpo',
|
||||
y: [400, 200, 200],
|
||||
x: [200, 0, 200],
|
||||
height: [200, 10, 0],
|
||||
width: [20, 400, 0],
|
||||
delay: TIMES.TARGET_DELAY_MS,
|
||||
duration: (TIMES.TARGET_DURATION_MS * 1 / 2),
|
||||
easing: 'easeInQuad',
|
||||
duration: TIMES.TARGET_DURATION_MS,
|
||||
}));
|
||||
|
||||
this.animations.push(anime({
|
||||
targets: '#strikeFilter feDisplacementMap',
|
||||
scale: 200,
|
||||
loop: false,
|
||||
delay: (TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 1 / 4),
|
||||
easing: 'easeInQuad',
|
||||
targets: ['#strikeFilter feTurbulence', '#strikeFilter feDisplacementMap'],
|
||||
baseFrequency: 2,
|
||||
scale: 50,
|
||||
numOctaves: 5,
|
||||
easing: 'easeOutSine',
|
||||
delay: TIMES.TARGET_DELAY_MS + (TIMES.TARGET_DURATION_MS / 3),
|
||||
duration: TIMES.TARGET_DURATION_MS / 2,
|
||||
}));
|
||||
}
|
||||
|
||||
// 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();
|
||||
}
|
||||
this.props.animCb && this.props.animCb();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
module.exports = addState(Strike);
|
||||
|
||||
@ -154,7 +154,7 @@ impl Effect {
|
||||
},
|
||||
|
||||
_ => {
|
||||
info!("{:?} does not have a mod effect", self);
|
||||
warn!("{:?} does not have a mod effect", self);
|
||||
return value;
|
||||
},
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user