Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
SwiftUIでキラキラを作る
Search
Asakura Shinsuke
July 01, 2025
0
62
SwiftUIでキラキラを作る
Asakura Shinsuke
July 01, 2025
Tweet
Share
More Decks by Asakura Shinsuke
See All by Asakura Shinsuke
ReactNative入門
asashin227
0
38
アウトプットしようね
asashin227
0
15
ローカル拠点でのEMの役割
asashin227
0
230
XcodeCloud移行奮闘記
asashin227
0
110
現場主導の開発効率向上の仕組みづくり
asashin227
0
370
Xcode File templateで 開発をちょっと便利にしたはなし
asashin227
0
91
名古屋でフル出社という選択 - Local Engineering MeetUp #1
asashin227
0
82
Flutterでヘルスケアデータへアクセスする
asashin227
0
270
Vaporで始めるServer side Swift
asashin227
0
470
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
54
7.9k
[SF Ruby Conf 2025] Rails X
palkan
0
460
Build your cross-platform service in a week with App Engine
jlugia
234
18k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
Docker and Python
trallard
46
3.7k
Automating Front-end Workflow
addyosmani
1371
200k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Building Better People: How to give real-time feedback that sticks.
wjessup
370
20k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
659
61k
Designing for humans not robots
tammielis
254
26k
Mobile First: as difficult as doing things right
swwweet
225
10k
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