以前、スクロール操作に応じて上下のメニューを自動的に隠す機能を作成しました。
その時点では問題なく動いていましたが、後から子View 側でもメニューと連動するアニメーション(新規投稿ボタンの上下移動)を追加したところ、画面がカクつくようになりました。
以下のGIF が改善後の動様子です。

メニューが下がると新規投稿ボタンも下がっています。こちらが今回修正したかったポイントになります。
前提として、
- メニューは親View に配置
- 新規投稿ボタンは子View に配置
- アニメーションは親View で制御していた
という構造になっています。
ダメだったやり方
最初は、アニメーションで変化するメニュー表示位置(offset) をそのまま子View に渡せば、同時に動くだろうと考えました。
しかし、結果は冒頭の通り画面がカクついてしまいました。
原因は、連続的に変化する表示位置を子View に渡すと子View のbody がその都度再作成されるため、更新が遅くなってしまうというものです。
改善案
そこで、親子間で共有する値を連続的に変化する表示位置ではなく、メニューを表示するかどうかだけを示すBoolean フラグに変更しました。
それを、ViewModel に持たせて親子間で共有し、親子それぞれがフラグの変化をトリガーとして独自のアニメーションを行うようにしました。
こうすることで、アニメーション中に子View のbody が再作成されないため、カクツキがなくなりました。
厳密には、親と子のアニメーションが完全に同じタイミングで動いているわけではありませんが、体感では違和感のないレベルに収まっています。
ソースはこちらです。
コメントを残す