ReactNative Animation

1. Animated APIを使って
スクロールで隠れる
あのバー を作る

2. 自己紹介
• misoton - 海老原 圭吾
• Fringe81 フロントエンドエンジニア
• Scala・Elm・TypeScript
• UniposというプロダクトでReactNativeを使っています。

3. Animated API
アニメーションを扱うためのReactNative標準のAPI
Animated API
Animated.Value
ビュー
操作 参照
「10sで0から100に増加しなさい」 10sで0の位置から100の位置に移動

4. リストのスクロールと連動して上下に移動する
十分下にスクロールした後でも出現する
Twitter, Facebook, LINEでも採用されているUI
あのバー とは
Twitter画面のGIF

5. • ネイティブコードをできるだけ書かない。ネイティブのAPI
を自分で叩かないという開発方針。
• ネイティブコードが増えるとReactNativeのメリットが
薄くなる。
• 単純なものなら自分で書いて管理する方が安全。
• 外部ライブラリはいつメンテされなくなるかわからない。
• 明確なメリットがある場合は別。
ネイティブのAPIに用意されてないの？
ライブラリは使わないの？

6. あのバー を実現するために
1. リストのスクロールとバーの動きを連動させる。
→ スクロールイベントをAnimated.Valueにマップする。
2. スクロール位置に関係なく出現できる。
→ Animated.Valueを加工する。

7. リストのスクロールとバーの動きを連動させる。
スクロール位置に関係なく出現できる。

8. nativeEvent.contentOffset.y を animatedValue にマップ
現在のスクロール位置
イベントをAnimated.Valueにマッピングする関数
Animated.event(mapping, option)

9. 現在のスクロール位置分だけ
View(あのバー)のY座標を移動させる
transform: [{translateY: hoge}] … hogeだけY座標を移動させる

10. ✅ リストのスクロールとバーの動きを連動させる。

11. ✅ リストのスクロールとバーの動きを連動させる。
スクロール位置に関係なく出現できる。

12. スクロール位置
バーのY座標
バーのY座標 = スクロール位置
スクロールすればするほどバーは下にさがっていってしまう。

13. バーのY座標 = スクロール位置 -1
スクロール位置
バーのY座標
スクロールすればするほどバーは上にあがっていく。

14. 指定した関係に従ってAnimated.Valueを別の値に変換する関数
animatedValue.interpolate(config)
inputRange = X座標
outputRange = Y座標
これでリストとバーが同じ方向にスクロールされるように

15. Toolbar
どのスクロール位置でも出現できるように
ここまでの処理では、バーはスクロールすれば
するほど上に上がっていく。
1000スクロールすると1000上にあがる。
これをバーが丁度隠れる位置で止めたい。
0
-バーの高さ

16. Animated.Valueの値を指定範囲内での変化に制限する関数
Animated.diffClamp(animatedValue, min, max)
min(-バーの高さ)からmax(0)までの変化に制限
↓
これでバーが画面のすぐ上で停止するように

17. ✅ スクロール位置に関係なく出現できる。

18. ✅ リストのスクロールとバーの動きを連動させる。
✅ スクロール位置に関係なく出現できる。
あのバー 完成！

19. 完成だが…
• スクロールイベントの取得され方がiOS,Androidで微妙に
異なる。
• スクロール位置に従ってリスト自体をアニメーション
させる、など
• 上記を回避しようとするとプルダウン更新時のビューが見
えなくなってしまう。
• 一方が立つともう一方が立たず。妥協するか方法を捻出
するしかない。

20. まとめ
• AnimatedAPIには便利な関数が準備されており、単純な
アニメーションであればこれで簡単に対応できる。
• ただし、一歩踏み込んだ処理をする時にはiOS,Androidの
差異やReactNativeのクセを意識せざるを得ない状況が
やはりあるのでご注意。
• あのバー の正式名称を知っている方は教えてください…