Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
SwiftUIでキラキラを作る
Search
Asakura Shinsuke
July 01, 2025
0
4
SwiftUIでキラキラを作る
Asakura Shinsuke
July 01, 2025
Tweet
Share
More Decks by Asakura Shinsuke
See All by Asakura Shinsuke
ローカル拠点でのEMの役割
asashin227
0
190
XcodeCloud移行奮闘記
asashin227
0
92
現場主導の開発効率向上の仕組みづくり
asashin227
0
360
Xcode File templateで 開発をちょっと便利にしたはなし
asashin227
0
84
名古屋でフル出社という選択 - Local Engineering MeetUp #1
asashin227
0
80
Flutterでヘルスケアデータへアクセスする
asashin227
0
250
Vaporで始めるServer side Swift
asashin227
0
460
HealthKitを触ってみよう
asashin227
0
92
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
How to train your dragon (web standard)
notwaldorf
93
6.1k
For a Future-Friendly Web
brad_frost
179
9.8k
Typedesign – Prime Four
hannesfritz
42
2.7k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Designing Experiences People Love
moore
142
24k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Thoughts on Productivity
jonyablonski
69
4.7k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
We Have a Design System, Now What?
morganepeng
53
7.7k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Transcript
Copyright © stmn, inc. All rights reserved. プロダクト開発部 エンジニアリングマネージャ 朝倉慎亮(@asashin227)
SwiftUIで キラキラを作る
2 プロダクト開発部 エンジニアリングマネージャ 朝倉慎亮 @asashin227 自己紹介 学生時代からiOSアプリ開発を経験、 2023年4月にiOSエンジニアとして スタメンに入社。 2024年5月からエンジニアリングマ
ネージャ 01. 自己紹介
最近こうゆうのありますよね
アプリ内でのホログラム表現 端末の傾きによってカードの光沢変化 マイナンバーカード
アプリ内でのホログラム表現 メルカリアイコンがホログラム デバイスの傾きによって光沢が変化 メルカード
「間違いない!アレはキラキラだ!」
ゴール ホログラム表示(キラキラ✨)を SwiftUIのModifierとして実装する 独自Viewをサクッとキラキラにする
作り方
作り方 キラキラレイヤー✨を作る ジャイロセンサーの数値によってキラキラレイヤー✨を動かす キラキラレイヤー✨をViewModifier化する
キラキラ✨レイヤーを作る 01
ホログラムを以下のように分解する グラデーションレイヤ 光沢レイヤ 反射光レイヤ
グラデーションレイヤ 左上から右下にかけて グラデーションをかける
グラデーションレイヤ
グラデーションレイヤ 左上を中心に 円形にグラデーション
これらを重ねると、、、
虹色レイヤー
ジャイロセンサーの数値によって キラキラレイヤー✨を動かす 02
作り方 ジャイロセンサーの値取得 取得した値によって以下の値を変更 色の取得 フィルタの回転 光沢の位置変更
ジャイロセンサーの数値取得
回転角度から色の配列を生成する
フィルタの回転、光沢フィルタの位置変更
キラキラレイヤー✨を ViewModifier化する 03
キラキラレイヤーをViewModifier化する
完成✨
ありがとうございました! 25