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
45
SwiftUIでキラキラを作る
Asakura Shinsuke
July 01, 2025
Tweet
Share
More Decks by Asakura Shinsuke
See All by Asakura Shinsuke
アウトプットしようね
asashin227
0
8
ローカル拠点でのEMの役割
asashin227
0
200
XcodeCloud移行奮闘記
asashin227
0
94
現場主導の開発効率向上の仕組みづくり
asashin227
0
360
Xcode File templateで 開発をちょっと便利にしたはなし
asashin227
0
86
名古屋でフル出社という選択 - 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
Become a Pro
speakerdeck
PRO
29
5.4k
Statistics for Hackers
jakevdp
799
220k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Automating Front-end Workflow
addyosmani
1370
200k
Raft: Consensus for Rubyists
vanstee
140
7k
Optimizing for Happiness
mojombo
379
70k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
370
A Modern Web Designer's Workflow
chriscoyier
695
190k
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