restrict

2019-07-04 23:11:59 +10:00
parent 9b250d4b7d
commit 95402ca10e
12 changed files with 160 additions and 57 deletions
@@ -0,0 +1,102 @@
+const preact = require('preact');
+const { Component } = require('preact');
+
+const anime = require('animejs').default;
+
+const { TIMES } = require('../../constants');
+
+class Restrict extends Component {
+    constructor() {
+        super();
+        this.animations = [];
+    }
+
+    render() {
+        return (
+            <svg
+                class='skill-animation red'
+                version="1.1"
+                id="restrict"
+                xmlns="http://www.w3.org/2000/svg"
+                style={{ transform: 'scale(3)' }}
+                viewBox="0 0 128 128">
+                <filter id='restrictFilter'>
+                    <feTurbulence type="turbulence" baseFrequency="0" numOctaves="1" result="turbulence"></feTurbulence>
+                    <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
+                </filter>
+                <g filter="url(#restrictFilter)" stroke-width="2px" >
+                    <path id="rOne" d="M 32 96 L 32 32" />
+                    <path id="rTwo" d="M 96 32 L 96 96" />
+                </g>
+            </svg>
+        );
+    }
+
+    componentDidMount() {
+        this.animations.push(anime({
+            targets: ['#restrict'],
+            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: ['#restrict'],
+            scale: {
+                value: 1,
+                delay: TIMES.TARGET_DELAY_MS,
+                duration: TIMES.TARGET_DURATION_MS * 0.2,
+                easing: 'easeInExpo',
+            },
+
+            delay: TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 0.1,
+            duration: TIMES.TARGET_DURATION_MS * 0.2,
+            easing: 'easeOutSine',
+        }));
+
+        this.animations.push(anime({
+            targets: ['#restrictFilter feTurbulence', '#restrictFilter feDisplacementMap'],
+            baseFrequency: 2,
+            scale: 5,
+            numOctaves: 5,
+            easing: 'easeOutSine',
+
+            delay: TIMES.TARGET_DELAY_MS,
+            duration: TIMES.TARGET_DURATION_MS,
+        }));
+
+        this.animations.push(anime({
+            targets: ['#rOne'],
+
+            d: 'M 96 32 L 32 96',
+
+            delay: TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 0.4,
+            duration: TIMES.TARGET_DURATION_MS * 0.4,
+            easing: 'easeOutSine',
+        }));
+
+        this.animations.push(anime({
+            targets: ['#rTwo'],
+
+            d: 'M 96 96 L 32 32',
+
+            delay: TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 0.4,
+            duration: TIMES.TARGET_DURATION_MS * 0.4,
+            easing: 'easeOutSine',
+        }));
+    }
+
+    // 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();
+        }
+    }
+}
+
+module.exports = Restrict;