attack dagger animation test

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 = (
-            <g>
-                <polygon class='blue' points={'0,0    100,50   300,400'}/>
-                <polygon class='blue' points={'40,170    100,50   160,170'}/>
-                <polygon class='blue' points={'70,150    100,50   130,150'}/>
-            </g>
-        );
     }
 
     render() {
         return (
             <svg
-                class={`attack-anim-${this.props.id}`}
+                class={'attack-anim'}
                 version="1.1"
                 id="Layer_1"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 300 400">
-                ${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)}
             </svg>
         );
     }
 
     componentDidMount() {
-        let value = '';
+        let y = 0;
-        if ((!this.props.team && this.props.stage === 'START_SKILL')
+        const daggers = document.querySelectorAll('.attack-anim .dagger');
-            || (this.props.team && this.props.stage === 'END_SKILL')) {
+        if (this.props.stage === 'START_SKILL') {
-            anime.set('.attack-anim', {
+            anime.set(daggers, {
-                rotateX: 0,
+                y: 250,
+            });
+            y = -150;
+            if (!this.props.team) {
+                anime.set('.attack-anim', {
+                    rotate: 180,
+                });
+            } else {
+                anime.set('.attack-anim', {
+                    rotate: 0,
                 });
-            value = '+=250px',
             }
-        if ((!this.props.team && this.props.stage === 'END_SKILL')
+        }
-            || (this.props.team && this.props.stage === 'START_SKILL')) {
+
-            anime.set('.attack-anim', {
+        if (this.props.stage === 'END_SKILL') {
-                rotateX: 0,
+            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`],
+            targets: daggers,
-            translateY: {
+            delay: anime.stagger(250, {
-                value,
+                start: 250,
+                grid: [1, 7],
+                from: 'center',
+                easing: 'linear',
+            }),
+            y,
             duration,
-            },
-            loop: false,
-            duration,
-            easing: 'easeInQuad',
         });
     }
 }

client/src/constants.jsx

@@ -1,7 +1,7 @@
 module.exports = {
     TIMES: {
-        START_SKILL: 700,
+        START_SKILL: 1000,
-        END_SKILL: 700,
+        END_SKILL: 1000,
         POST_SKILL: 1000,
         DELAY: 150,
     },