サイバーエージェント主催『AbemaTV Hack - ネイティブアプリ編』に参加し、投げ銭UXを改善！Lottieを活用したアニメーション演出やUI設計、Rxを活用した開発の課題と今後の学びについて振り返ります。
前回の続きになります！
AbemaTV HackにiOSエンジニアとして参加！開発プロセスとUI/UX設計の工夫【Part 1】
2日目は「どのようにしたら、より投げ銭しやすいアプリになるか」「快適に投げ銭を行うことができるか」ということに着眼して、開発を進めていました。
特定の投げ銭アイテムを使用したと分かる演出や効果は、Lottieというライブラリを使い、JSON形式のアニメーションを表示することで表現しました。また、アイテム毎に特徴を出したアニメーションをつけることで、何の効果かわかりやすくしました。
この際に、ボタンを押してからアイテム毎のアニメーションを２画面目のまま表示し、 その後、１画面目に遷移してから、投げ銭を行ったことを表現するコインのアニメーションを出す仕様にしました。
アイテム使用時のアニメーション | アイテム使用時のアニメーション
投げ銭を行った時のコインのアニメーション | 投げ銭を行った時のコインのアニメーション
このような仕様にした理由は、アイテム一覧のままコインのアニメーションを表示するよりも、１画面目に遷移して表示した方がギフトを送ったというコインのアニメーションの演出を、ユーザーが心地よく感じることができると考えたからです。
コインのアニメーションを表示した後には、コメントのように画面の右から左に
なぜ・いくら投げ銭を行ったのかUILabelのTextを流す機能を実装しました。
コメントが流れている様子 | コメントが流れている様子
コインのアニメーションを表示する処理は、以下のように実装しています。
動作の様子 | 動作の様子