basic attack animation

2019-06-12 18:55:40 +10:00
parent a037d5e93b
commit 28a4c259bb
7 changed files with 89 additions and 2301 deletions
@@ -0,0 +1,63 @@
+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;
+    }
+
+    render() {
+        return (
+            <svg
+                id={this.props.id}
+                class={`attack-anim skill-animation ${this.props.stage}`}
+                version="1.1"
+                id="Layer_1"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 300 300">
+                <g>
+                    <polygon class='blue' points={'0,190    100,50   190,190'}/>
+                    <polygon class='blue' points={'40,170    100,50   160,170'}/>
+                    <polygon class='blue' points={'70,150    100,50   130,150'}/>
+                </g>
+            </svg>
+        );
+    }
+
+    componentDidMount() {
+        let value = '';
+        if ((!this.props.team && this.props.stage === 'START_SKILL')
+            || (this.props.team && this.props.stage === 'END_SKILL')) {
+            anime.set('.attack-anim', {
+                translateY: -250,
+            });
+            value = '+=250px';
+        }
+        if ((!this.props.team && this.props.stage === 'END_SKILL')
+            || (this.props.team && this.props.stage === 'START_SKILL')) {
+            anime.set('.attack-anim', {
+                translateY: 0,
+            });
+            value = '-=250px';
+        }
+
+        anime({
+            targets: ['.attack-anim'],
+            translateY: {
+                value,
+                duration,
+            },
+            loop: false,
+            duration,
+            easing: 'easeInQuad',
+        });
+    }
+}
+
+module.exports = Attack;