かっこいいアプリを作成するためにはアニメーションがあると、サイト全体が締まりますよね。
reactでアニメーションを付ける際の候補は色々とあると思いますが、
今回はreact-animationsを使っていきたいと思います。
有益なライブラリの１つとして、このライブラリはそこそこ人気です。
どのくらい人気かというと、starが3000！
3000はちょっとの人気じゃ到達しませんね。世界中で使用されているライブラリといって間違いないです。
では、早速実装していきます。
react-animationsの情報
公式のHPはここです。
https://github.com/FormidableLabs/react-animations
動きのあるサンプル的な画像があって、期待度大ですね。
では早速文字をアニメーションさせていきます。今回はこのサイトのタイトルでもある「いはかよ」を動かしてみます。
何を作るか決める。どんなアニメーションにするか
公式HPをみて、何を作るか決めていきます。
とりあえず今回は公式のページにもある以下を目標にしてみます。
import React from ‘react’;
import { bounce } from ‘react-animations’;
import Radium, {StyleRoot} from ‘radium’;
const styles = {
bounce: {
animation: ‘x 1s’,
animationName: Radium.keyframes(bounce, ‘bounce’)
}
}
class Test extends React.Component {
render() {
}
}
これを見ると２つのライブラリをインストールする必要がありそうですね。
早速以下のコマンドでインストールしていきます。
npm i react-animations
npm i radium
サンプルを参考に実装していく
■変更前
import { FcAbout, FcAcceptDatabase } from “react-icons/fc”;
function App() {
return (
<div className=”App”>
<div>ポップなアイコンでいいですね。</div>
<FcAbout size={200} />
<FcAcceptDatabase size={100} />
</div>
);
}
export default App;
■変更後
赤字部分が修正したところです。
そのままだとバウンドしているのが分かりにくかったので、padding-leftとpadding-topを入れています。
reactの場合はstyle属性に指定するのはCSSと同じ名前じゃダメなので、padding-left → paddingLeftという感じになっています。
これはreactを扱う上でよく出てくるし、よく間違うところなので覚えておきましょう！
import React from ‘react’;
import { bounce } from ‘react-animations’;
import Radium, { StyleRoot } from ‘radium’;
const styles = {
bounce: {
animation: ‘x 1s’,
animationName: Radium.keyframes(bounce, ‘bounce’),
paddingLeft: ‘100px’,
paddingTop: ‘100px’
},
}
function App() {
return (
<div className=”App”>
<div>バウンドするよ！</div>
<StyleRoot>
<div className=”test” style={styles.bounce}>いはかよ
</div>
</StyleRoot>
</div>
);
}
export default App;
実際の画面
「いはかよ」が上下にバウンドしているのが分かりますね。
インパクトがあるので、いずれトップページに組み込むと面白そうですね。
使ってみて感想
簡単にアニメーションが実装出来て楽しかったです。
将来的にはこのアニメーションをこのブログのロゴにしようかと考えています。。。