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

wip testing more anim stuff

Browse Source
This commit is contained in:
Mashy 2019-06-18 17:02:15 +10:00
parent 13405c9444
commit c4c3c415b9
3 changed files with 197 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,8 @@
const preact = require('preact');
const Attack = require('./anims/attack');
const Strike = require('./anims/strike');
const Test = require('./anims/test');
function animations(props) {
const { combatTextClass, combatText, stage, player, construct } = props;
@ -8,6 +10,8 @@ function animations(props) {
const anim = text => {
switch (text) {
case 'Attack': return <Attack id={construct.id} stage={stage} team={player}/>;
case 'StrikeI': return <Strike id={construct.id} stage={stage} team={player}/>;
default: return text;
}
};
@ -18,7 +22,11 @@ function animations(props) {
{combatAnim}
</div>;
}
return (
<div class={combatTextClass}>
<Test id={construct.id} stage={stage} team={player}/>
</div>
);
return (<div>&nbsp;</div>);
}

72
client/src/components/anims/strike.jsx Normal file
View File

@ -0,0 +1,72 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const { TIMES } = require('../../constants');
const duration = TIMES.START_SKILL;
class Strike extends Component {
constructor(props) {
super();
this.props = props;
const points = [];
for (let i = 0; i <= 70; i += 1) {
const x = Math.floor(300 * Math.random());
const y = Math.floor(400 * Math.random());
points.push([x, y]);
this.circles = points.map((coord, j) => <circle key={j} cx={coord[0]} cy={coord[1]} r="7" stroke="#a52a2a" fill="#a52a2a" />);
}
}
render() {
return (
<svg
class={'skill-anim'}
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 300 400">
{this.circles}
</svg>
);
}
componentDidMount() {
let y = -100;
const daggers = document.querySelectorAll('.skill-anim circle');
if (this.props.stage === 'START_SKILL') {
if (!this.props.team) {
anime.set('.skill-anim', {
rotate: 180,
});
} else {
anime.set('.skill-anim', {
rotate: 0,
});
}
}
if (this.props.stage === 'END_SKILL') {
if (!this.props.team) {
anime.set('.skill-anim', {
rotate: 0,
});
} else {
anime.set('.skill-anim', {
rotate: 180,
});
}
}
anime({
targets: daggers,
cx: 150,
cy: y,
duration,
easing: 'easeInQuad',
});
}
}
module.exports = Strike;

116
client/src/components/anims/test.jsx Normal file
View File

@ -0,0 +1,116 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const { TIMES } = require('../../constants');
const duration = TIMES.START_SKILL;
class Attack extends Component {
constructor(props) {
super();
this.props = props;
const points = [];
for (let i = 0; i <= 2; i += 1) {
const x = Math.floor(Math.random() * 200 + 50);
const y = Math.floor(Math.random() * 300 + 50);
points.push([x, y]);
this.circles = points.map((coord, j) => (
<svg key={j}>
<polygon
points={`
${coord[0]},${coord[1] - 10}
${coord[0] - 20},${coord[1] + 20}
${coord[0] + 20},${coord[1] + 20}
`}
stroke="#a52a2a"
stroke-width="2"
id="charge"
/>
<polyline
points={`
${coord[0] + 20},${coord[1] + 20}
${coord[0] + 35},${coord[1] + 10}
${coord[0]},${coord[1] - 40}
${coord[0] - 35},${coord[1] + 10}
${coord[0] - 20},${coord[1] + 20}
`}
stroke="#a52a2a"
stroke-width="2"
id="charge"
/>
<polyline
points={`
${coord[0] + 35},${coord[1] + 10}
${coord[0] + 50},${coord[1]}
${coord[0]},${coord[1] - 70}
${coord[0] - 50},${coord[1]}
${coord[0] - 35},${coord[1] + 10}
`}
stroke="#a52a2a"
stroke-width="2"
id="charge"
/>
</svg>
));
}
}
render() {
return (
<svg
class={'skill-anim'}
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 300 400">
<filter id="blurMe">
<feGaussianBlur in="SourceGraphic" stdDeviation="2" />
</filter>
{this.circles}
</svg>
);
}
componentDidMount() {
if (this.props.stage === 'START_SKILL') {
if (!this.props.team) {
anime.set('.skill-anim', {
rotate: 180,
});
} else {
anime.set('.skill-anim', {
rotate: 0,
});
}
}
if (this.props.stage === 'END_SKILL') {
if (!this.props.team) {
anime.set('.skill-anim', {
rotate: 0,
});
} else {
anime.set('.skill-anim', {
rotate: 180,
});
}
}
const stageone = document.querySelectorAll('#charge');
anime({
targets: stageone,
fill: '#a52a2a',
delay: anime.stagger(100),
loop: true,
duration: 1000,
easing: 'easeInQuad',
});
}
}
module.exports = Attack;