From 13405c9444d3b2704237b0d326195e764b129c40 Mon Sep 17 00:00:00 2001 From: Mashy Date: Fri, 14 Jun 2019 21:26:22 +1000 Subject: [PATCH] attack dagger animation test --- client/src/components/anims/attack.jsx | 73 ++++++++++++++++---------- client/src/components/svgs/dagger.jsx | 43 +++++++++++++++ client/src/constants.jsx | 4 +- 3 files changed, 91 insertions(+), 29 deletions(-) create mode 100644 client/src/components/svgs/dagger.jsx diff --git a/client/src/components/anims/attack.jsx b/client/src/components/anims/attack.jsx index 4c5cbcfa..c642f645 100644 --- a/client/src/components/anims/attack.jsx +++ b/client/src/components/anims/attack.jsx @@ -2,6 +2,7 @@ const preact = require('preact'); const { Component } = require('preact'); const anime = require('animejs').default; +const dagger = require('../svgs/dagger'); const { TIMES } = require('../../constants'); const duration = TIMES.START_SKILL; @@ -10,54 +11,72 @@ class Attack extends Component { constructor(props) { super(); this.props = props; - this.graphic = ( - - - - - - ); } render() { return ( - ${this.graphic} + {dagger(10, 250, 40, 150)} + {dagger(50, 250, 40, 150)} + {dagger(90, 250, 40, 150)} + {dagger(130, 250, 40, 150)} + {dagger(170, 250, 40, 150)} + {dagger(210, 250, 40, 150)} + {dagger(250, 250, 40, 150)} ); } componentDidMount() { - let value = ''; - if ((!this.props.team && this.props.stage === 'START_SKILL') - || (this.props.team && this.props.stage === 'END_SKILL')) { - anime.set('.attack-anim', { - rotateX: 0, + let y = 0; + const daggers = document.querySelectorAll('.attack-anim .dagger'); + if (this.props.stage === 'START_SKILL') { + anime.set(daggers, { + y: 250, }); - value = '+=250px', + y = -150; + if (!this.props.team) { + anime.set('.attack-anim', { + rotate: 180, + }); + } else { + anime.set('.attack-anim', { + rotate: 0, + }); + } } - if ((!this.props.team && this.props.stage === 'END_SKILL') - || (this.props.team && this.props.stage === 'START_SKILL')) { - anime.set('.attack-anim', { - rotateX: 0, + + if (this.props.stage === 'END_SKILL') { + anime.set(daggers, { + y: 400, }); - value = '-=250px', + y = -150; + if (!this.props.team) { + anime.set('.attack-anim', { + rotate: 0, + }); + } else { + anime.set('.attack-anim', { + rotate: 180, + }); + } } anime({ - targets: [`.attack-anim-${this.props.id} polygon`], - translateY: { - value, - duration, - }, - loop: false, + targets: daggers, + delay: anime.stagger(250, { + start: 250, + grid: [1, 7], + from: 'center', + easing: 'linear', + }), + y, duration, - easing: 'easeInQuad', }); } } diff --git a/client/src/components/svgs/dagger.jsx b/client/src/components/svgs/dagger.jsx new file mode 100644 index 00000000..94640132 --- /dev/null +++ b/client/src/components/svgs/dagger.jsx @@ -0,0 +1,43 @@ +const preact = require('preact'); + + +//style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;" +module.exports = function dagger(x, y, width, height) { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/client/src/constants.jsx b/client/src/constants.jsx index ee619980..ad9bf9e0 100644 --- a/client/src/constants.jsx +++ b/client/src/constants.jsx @@ -1,7 +1,7 @@ module.exports = { TIMES: { - START_SKILL: 700, - END_SKILL: 700, + START_SKILL: 1000, + END_SKILL: 1000, POST_SKILL: 1000, DELAY: 150, },