「マイクロインタラクション with React Native」のテーマでLTしました

こんにちは、stand.fm のエンジニアの moriyuu です。

先日 React Native Tech Blog LT いうイベントに参加し、マイクロインタラクションの実装に関する LT をさせていただきました。
タイトルは「マイクロインタラクション with React Native」で、今回はそれについてまとめた内容です。

LT の資料と、YouTube のアーカイブは以下からご確認いただけますので、よろしければご覧ください。

マイクロインタラクションとは

マイクロインタラクションは、ユーザーのアクションに対する（リアルタイムな | 説明的な）フィードバックであり、ユーザーが取ったアクションが思った通りに作用したことを理解するのを助けます。

Lottie for React Native

Lottie は Airbnb 製のアニメーションライブラリです。
Adobe After Effect で実装したアニメーションを Bodymovin という拡張機能でJSON 形式で出力し Lottie に渡すと、そのままアニメーションを描画してくれます。
React Native 以外にも、iOS, Android, Web, Windows など複数プラットフォームに対応しています。
アニメーションは LottieFiles のアプリから実機でプレビューすることが可能です。

実装方法

小さな例が以下です。
たとえば Twitter のように、「いいねボタン」のタップのタイミングでアニメーションを動かしたい場合は、likeAnimationRef.current.play() をいいねボタンタップの処理（onPressLike のような）に書くと、そのタイミングでアニメーションが動いてくれるようになります。
実装自体は非常にシンプルです。

import LottieView from 'lottie-react-native';

<LottieView
 ref={likeAnimationRef}
 source={require('./likeAnimation.json')}
/>;

likeAnimationRef.current.play();

続きと詳細は上に記載しました SpeakerDeck、YouTube をご覧ください！

さいごに

stand.fm ではエンジニアを募集しています！
募集職種はこちらから↓

採用情報 | 株式会社stand.fm

stand.fm の技術情報などの発信は Twitter から行なっております。ぜひフォローしてチェックしてみてください。

Tweets by standfm_tech