Reactで雪を降らせてみる
メリークリスマス！！
ただ残念なことに、
コロナウィルスの第3波が来てしまって、遊びに行くことも憚られる状態ですね😢
せっかくのクリスマスなのに、、、
例年ならイルミネーションとかきれいなはずなのに😨
ということで、クリスマスっぽいWebアプリを作ってみることにしました！！
作成はReactを用いました！！
■Reactで雪を降らせる
Reactで雪を降らせるにあたり、snow-fallというAPIを用いました。
https://www.npmjs.com/package/react-snowfall
まずはsnow-fallのセットアップです。
こちらのコマンドを実行！！
sudo npm i react-snowfall yarn add react-snowfall
では、実際に雪を降らせるコードを作成します。
サンプルコードを利用して、このように作成しました。
import React, { Component } from 'react';
import Snowfall from 'react-snowfall';
export default class Snow extends Component {
render() {
const {position} = this.state;
const {City} = this.state;
var Pos = position;
return (
<div>
<div className="layout" style={{ height: 850, width: 1850, background: '#282c34' }}>
<Snowfall />
</div>,
</div>
);
}
}snow-fallライブラリを用いれば実装は簡単で、
<Snowfall />
をコールすれば雪を降らせることが可能です！！
今回は背景を黒色にして雪を目立つようにしています。
<div className="layout" style={{ height: 850, width: 1850, background: '#282c34' }}>こちらを動作させるとこんな感じになります。
雪を降らすことが出来ました！！
後、Configurationをセットすれば雪の量や色を変更することが可能になります。
ただ、雪の結晶サイズはどうやら変更できない模様です。。
■メリークリスマスw
雪を降らせることが出来たので、ちょっとクリスマスっぽいアプリを作成してみました！！
作成したアプリを実行するとこんな感じになります。
クリスマスっぽいですかね？？
コードはこんな感じになります。
import React, { Component } from 'react';
import Snowfall from 'react-snowfall';
import Tokyo from './image/Area1.JPG';
import Yokohama from './image/Area2.JPG';
import Tower from './image/Area3.JPG';
import Santa from './image/santa.png';
import Tide from './image/Tide.png';
import "./snow.css"
export default class Snow extends Component {
constructor (props) {
super(props);
this.state = {
position:1600,
City:Tokyo,
Count:0,
};
}
SantaMove=()=>{
var {position} = this.state;
var Pos = position;
const {Count} = this.state;
if(Pos <= 10){
this.setState({position:1600});
switch(Count){
case 0:
this.setState({City:Yokohama});
this.setState({Count:1});
break;
case 1:
this.setState({City:Tower});
this.setState({Count:2});
break;
case 2:
this.setState({City:Tokyo});
this.setState({Count:0});
break;
default:
this.setState({City:Tokyo});
this.setState({Count:0});
break;
}
}else{
this.setState({position:Pos-20});
}
}
componentDidMount() {
this.intervalId = setInterval(()=>{
this.SantaMove();
}, 200);
}
render() {
const {position} = this.state;
const {City} = this.state;
var Pos = position;
return (
<div>
<div className="layout" style={{ height: 850, width: 1850, background: '#282c34' }}>
<img src={Santa} alt="Santa" id="santaID" className="santa" style={{left:Pos}}/>
<img src={City} alt="City" height="850" width="1850" />
<img src={Tide} alt="Tide" className="Tide" />
<Snowfall snowflakeCount={300}/>
</div>,
</div>
);
}
}サンタクロースの動作ですが、
componentDidMount() {
this.intervalId = setInterval(()=>{
this.SantaMove();
}, 200);
}により、200ms毎にSantaMove()関数をコールしており、
SantaMove()関数は、
SantaMove=()=>{
var {position} = this.state;
var Pos = position;
const {Count} = this.state;
if(Pos <= 10){
this.setState({position:1600});
switch(Count){
case 0:
this.setState({City:Yokohama});
this.setState({Count:1});
break;
case 1:
this.setState({City:Tower});
this.setState({Count:2});
break;
case 2:
this.setState({City:Tokyo});
this.setState({Count:0});
break;
default:
this.setState({City:Tokyo});
this.setState({Count:0});
break;
}
}else{
this.setState({position:Pos-20});
}
}となります。
20px毎に動かして、10px以下の場合には別の背景に切り替えるような制御となっております。
■最後に
今回は雪を降らせてサンタクロースを動かしてみました！！
ライブラリが用意されていると簡単にアプリを作成させることが出来ますね！！
