Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
SwiftUI で Neumorphism!!!
Search
Ryo Tsuzukihashi
April 27, 2020
Programming
2
1.8k
SwiftUI で Neumorphism!!!
SwiftUIでのNeumorphsim の実装方法
ライブラリとアプリの紹介
Ryo Tsuzukihashi
April 27, 2020
Tweet
Share
More Decks by Ryo Tsuzukihashi
See All by Ryo Tsuzukihashi
二次元コードを読み取りやすくするために 画面を強制的に明るくするのは もうやめにしませんか?👀
tsuzuki817
0
370
動画だけじゃない!iOS 15のピクチャ・イン・ピクチャを使って好きなUIを表示させよう!
tsuzuki817
3
3.9k
iOS 16からのロック画面Widget争奪戦に備える
tsuzuki817
2
1k
Complications and widgets: Reloadedの要約
tsuzuki817
1
1.1k
Speech framework tips
tsuzuki817
1
2.5k
Build complication in SwiftUI の要約
tsuzuki817
0
670
SwiftUIで作りながら学ぶアニメーション インジケーター編
tsuzuki817
0
550
Other Decks in Programming
See All in Programming
我々のデザインシステムは Chakra v3 にアップデートします
shunya078
2
1.5k
watsonx.ai Dojo #4 生成AIを使ったアプリ開発、応用編
oniak3ibm
PRO
1
250
TypeScriptでライブラリとの依存を限定的にする方法
tutinoko
3
820
イマのCSSでできる インタラクション最前線 + CSS最新情報
clockmaker
5
3.7k
Arm移行タイムアタック
qnighy
0
380
最新TCAキャッチアップ
0si43
0
250
React への依存を最小にするフロントエンド設計
takonda
21
8.3k
Enabling DevOps and Team Topologies Through Architecture: Architecting for Fast Flow
cer
PRO
0
400
C++でシェーダを書く
fadis
6
4.2k
PaaSとSaaSの境目で信頼性と開発速度を両立する 〜TROCCO®︎のこれまでとこれから〜
gtnao
5
5.4k
.NET 9アプリをCGIとして レンタルサーバーで動かす
mayuki
0
680
Flutterを言い訳にしない!アプリの使い心地改善テクニック5選🔥
kno3a87
3
350
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Gamification - CAS2011
davidbonilla
80
5k
Fashionably flexible responsive web design (full day workshop)
malarkey
405
65k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
870
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Making the Leap to Tech Lead
cromwellryan
133
8.9k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.3k
A designer walks into a library…
pauljervisheath
204
24k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Become a Pro
speakerdeck
PRO
25
5k
[RailsConf 2023] Rails as a piece of cake
palkan
52
5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
27
4.3k
Transcript
3ZP5TV[VLJIBTIJ 4XJGU6*Ͱ/FVNPSQIJTN <0/-*/&>QPUBUPUJQT
w ࣗݾհ w /FVNPSQIJTNͱʁ w 4XJGU6*Ͱͷ࣮ݱํ๏ w ϥΠϒϥϦ࡞Γ·ͨ͠ w /FVNPSQIJTNσβΠϯΛదԠͨ͠ΞϓϦϦϦʔε
ΞδΣϯμ
!UTV[VLJ w :BIPP+"1"/৽ଔ w 1BZ1BZϑϦϚJ04։ൃ w झຯ ݸਓΞϓϦ։ൃ ແਓౡ։ ࣗݾհ
Nuemorphism!!!
/FVNPSQIJTNͱʁ w ৽͍͠ ʮεΩϡʔϞϑΟζϜʯ w ໌Δ͍ӨΛࠨ্ʹɺ҉͍ӨΛӈԼʹ͢Δ w ͳΜ͔৽ͯ͘͠ྑ͍☺ Neumorphism in
user interfacesΑΓ ˠͦͦεΩϡʔϞϑΟζϜͱʁ
εΩϡʔϞϑΟζϜͱʁ w ݱ࣮ͷ࣭ʹࣅͤͯɺ Ϣʔβʹͳ͡Έ͘͢͠ɺ ײతʹૢ࡞Λཧղͤ͞Δ͜ͱ͕Ͱ͖Δ J04 ౾UJQT ΪϦγΞޠͷʮTLFPVTʯ ೖΕ
ͱʮNPSQIÊʯ ܗ ͱݴ͏୯ޠ͔Β࡞ΒΕͨΒ͍͠ɻ
4XJGU6*ͰͲ͏࣮͢Δͷ͔ʁ w $PMPSͷ&YUFOTJPOͰϕʔεͷΧϥʔίʔυΛड͚औΔ $PMPS IFYl$%&#z w ϕʔεͷًͷΈΛม͑ͨͷͰ ӨΛ࡞Δ w
4XJGU)4#ͷΈରԠ w IFY3(#")4-")4# /FVNPSQIJTN 4PGU6* JO6TFSJOUFSGBDFEFTJHO5VUPSJBMΑΓ /FVNPSQIJTNྩ࣌ͷεΩϡʔϞʔϑΟζϜ @touyoubuntu
Ͳ͕ͬͪ/FVNPSQIJTN ౾UJQT ِ/FVNPSQIJTNʹҙʂ /FVNPSQIJTNനͱࠇͷӨΛ͚ͭΕྑ͍ͱݴ͏ Θ͚Ͱແ͍ͷͰ͢ɻ
4XJGU6*ͰͲ͏࣮͢Δͷ͔ʁ TIBEPX DPMPSSBEJVTYZ ;4UBDL\ $PMPS IFY$%&# FEHFT*HOPSJOH4BGF"SFB BMM $JSDMF
pMM $PMPS IFY$%&# GSBNF XJEUI IFJHIU TIBEPX DPMPS$PMPS IFY$%&# EBSLFS$PMPS SBEJVT Y Z TIBEPX DPMPS$PMPS IFY$%&# MJHIUFS$PMPS SBEJVT Y Z ^ ͍͢͝؆୯ʂ ͚ͩͲɺͬͱศརʹ͍ͨ͠ʂ
ϥΠϒϥϦ࡞Γ·ͨ͠ let neumorphism = NeumorphismManager( isDark: false, lightColor: Color(hex: “C1D2EB"),
darkColor: Color(hex: "2C292C") ) let contentView = ContentView() .environmentObject(neumorphism) import NeumorphismUI ZStack { neumorphism.color.edgesIgnoringSafeArea(.all) Circle() .fill(neumorphism.color) .frame(width: 200, height: 200) .neumorphismShadow() } 4DFOF%FMFHBUF $POUFOU7JFX ࣮࣭͜ͷߦʹूʂ
ϥΠϒϥϦ࡞Γ·ͨ͠ extension View { func neumorphismShadow() -> some View {
self.modifier(NeumorphismShadowModifier()) } } 7JFX.PEJpFSͷ func body(content: Self.Content) -> Self.Body func body(content: Content) -> some View { content .shadow(color: darkShadowColor, radius: radius, x: x, y: y) .shadow(color: lightShadowColor, radius: radius, x: -x, y: -y) }
ϥΠϒϥϦ࡞Γ·ͨ͠
/FVNPSQIJTNσβΠϯΛదԠͨ͠ΞϓϦϦϦʔε #FGPSF "GUFS #PPL#BOL
GJO ࢀߟ63- https://note.com/hironobukimura/n/n0431c73714e8 https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf3a6 https://qiita.com/touyoubuntu/items/bf887093ec7265efe201 https://qiita.com/MasasaM_shi/items/4b86622bd95fd48deb76 ࡞ͬͨϥΠϒϥϦ(ϓϧϦΫͬͯ·͢ʂʂʂ) https://github.com/tsuzukihashi/NeumorphismUI ϦϦʔεͨ͠ΞϓϦ(ΞυόΠεͬͯ·͢ʂʂʂ) https://apps.apple.com/jp/developer/ryo-tsudukihashi/id1320583602?l