58 lines
1.7 KiB
JavaScript
58 lines
1.7 KiB
JavaScript
const preact = require('preact');
|
|
const { Component } = require('preact');
|
|
|
|
class TrippyTriangle extends Component {
|
|
constructor() {
|
|
super();
|
|
this.state = { pct: 0, delta: 0 };
|
|
this.progress = this.progress.bind(this);
|
|
}
|
|
|
|
render() {
|
|
const { pct, delta } = this.state;
|
|
|
|
return (
|
|
<svg
|
|
style={{
|
|
transform: `rotate3d(0, 1, 0, ${delta * 0.2}rad) translate(0px, ${-7.5 * delta}px)`,
|
|
}}
|
|
class='skill-animation'
|
|
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,${pct} 190,190`}/>
|
|
<polygon class='blue' points={`40,170 100,${pct} 160,170`}/>
|
|
<polygon class='blue' points={`70,150 100,${pct} 130,150`}/>
|
|
</g>
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
progress() {
|
|
requestAnimationFrame(this.progress);
|
|
this.now = window.performance.now();
|
|
const elapsed = this.now - this.then;
|
|
if (elapsed > this.fpsInterval) {
|
|
this.then = this.now - (elapsed % this.fpsInterval);
|
|
const delta = this.state.delta + Math.PI * 0.04;
|
|
const pct = 75 + 15 * Math.sin(delta);
|
|
this.setState({ pct, delta });
|
|
}
|
|
}
|
|
|
|
componentDidMount() {
|
|
const fps = 30;
|
|
this.fpsInterval = 1000 / fps;
|
|
this.then = window.performance.now();
|
|
requestAnimationFrame(this.progress);
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
// clearAnimation(this.props.id);
|
|
}
|
|
}
|
|
|
|
module.exports = TrippyTriangle;
|