SwiftUIでキラキラを作る

Transcript

1. Copyright © stmn, inc. All rights reserved. プロダクト開発部 エンジニアリングマネージャ 朝倉慎亮(@asashin227) SwiftUIで キラキラを作る
2. 2 プロダクト開発部 エンジニアリングマネージャ 朝倉慎亮 @asashin227 自己紹介 学生時代からiOSアプリ開発を経験、 2023年4月にiOSエンジニアとして スタメンに入社。 2024年5月からエンジニアリングマ ネージャ 01. 自己紹介
3. 最近こうゆうのありますよね
4. アプリ内でのホログラム表現 端末の傾きによってカードの光沢変化 マイナンバーカード
5. アプリ内でのホログラム表現 メルカリアイコンがホログラム デバイスの傾きによって光沢が変化 メルカード
6. 「間違いない！アレはキラキラだ！」
7. ゴール ホログラム表示（キラキラ✨）を SwiftUIのModifierとして実装する 独自Viewをサクッとキラキラにする
8. 作り方
9. 作り方 キラキラレイヤー✨を作る ジャイロセンサーの数値によってキラキラレイヤー✨を動かす キラキラレイヤー✨をViewModifier化する
10. キラキラ✨レイヤーを作る 01
11. ホログラムを以下のように分解する グラデーションレイヤ 光沢レイヤ 反射光レイヤ
12. グラデーションレイヤ 左上から右下にかけて グラデーションをかける
13. グラデーションレイヤ
14. グラデーションレイヤ 左上を中心に 円形にグラデーション
15. これらを重ねると、、、
16. 虹色レイヤー
17. ジャイロセンサーの数値によって キラキラレイヤー✨を動かす 02
18. 作り方 ジャイロセンサーの値取得 取得した値によって以下の値を変更 色の取得 フィルタの回転 光沢の位置変更
19. ジャイロセンサーの数値取得
20. 回転角度から色の配列を生成する
21. フィルタの回転、光沢フィルタの位置変更
22. キラキラレイヤー✨を ViewModifier化する 03
23. キラキラレイヤーをViewModifier化する
24. 完成✨
25. ありがとうございました！ 25