SwiftUI で Neumorphism!!!

SwiftUIでのNeumorphsim の実装方法
ライブラリとアプリの紹介

Transcript

1. 3ZP
   5TV[VLJIBTIJ
    4XJGU6*Ͱ/FVNPSQIJTN <0/-*/&>
   QPUBUPUJQT
   
2. w ࣗݾ঺հ
   w /FVNPSQIJTNͱ͸ʁ
   w 4XJGU6*Ͱͷ࣮ݱํ๏
   w ϥΠϒϥϦ࡞Γ·ͨ͠
   w /FVNPSQIJTNσβΠϯΛదԠͨ͠ΞϓϦϦϦʔε ΞδΣϯμ
3. !UTV[VLJ w :BIPP
   +"1"/
   ৽ଔ೥໨
   w 1BZ1BZϑϦϚJ04։ൃ
   w झຯ
   
   
   ݸਓΞϓϦ։ൃ
   
   
   ແਓౡ։୓ ࣗݾ঺հ Nuemorphism!!!
4. /FVNPSQIJTNͱ͸ʁ w ৽͍͠
   ʮεΩϡʔϞϑΟζϜʯ
   w ໌Δ͍ӨΛࠨ্ʹɺ҉͍ӨΛӈԼʹ͢Δ
   w ͳΜ͔৽ͯ͘͠ྑ͍☺ Neumorphism in user interfacesΑΓ ˠͦ΋ͦ΋εΩϡʔϞϑΟζϜͱ͸ʁ
5. εΩϡʔϞϑΟζϜͱ͸ʁ w ݱ࣮ͷ෺࣭ʹࣅͤͯɺ
   Ϣʔβʹͳ͡Έ΍͘͢͠ɺ
   ௚ײతʹૢ࡞Λཧղͤ͞Δ͜ͱ͕Ͱ͖Δ J04
    ౾UJQT
   ΪϦγΞޠͷʮTLFPVTʯ ೖΕ෺
   ͱʮNPSQIÊʯ ܗ ͱݴ͏୯ޠ͔Β࡞ΒΕͨΒ͍͠ɻ
6. 4XJGU6*ͰͲ͏࣮૷͢Δͷ͔ʁ w $PMPSͷ&YUFOTJPOͰϕʔεͷΧϥʔίʔυΛड͚औΔ
   $PMPS IFY
   l$%&#z
   w ϕʔεͷً౓ͷΈΛม͑ͨ΋ͷͰ
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   ӨΛ࡞Δ
   w 4XJGU͸)4#ͷΈରԠ
   w IFY
   
   3(#"
   
   )4-"
   
   )4# /FVNPSQIJTN
   4PGU
   6*
   JO
   6TFS
   JOUFSGBDF
   EFTJHO
   
   5VUPSJBMΑΓ /FVNPSQIJTN
   ྩ࿨࣌୅ͷεΩϡʔϞʔϑΟζϜ @touyoubuntu
7. Ͳ͕ͬͪ/FVNPSQIJTN ౾UJQT
   ِ/FVNPSQIJTNʹ஫ҙʂ
   /FVNPSQIJTN͸നͱࠇͷӨΛ͚ͭΕ͹ྑ͍ͱݴ͏
   Θ͚Ͱ͸ແ͍ͷͰ͢ɻ
8. 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
   
   ^
   ͍͢͝؆୯ʂ
   ͚ͩͲɺ΋ͬͱศརʹ͍ͨ͠ʂ
9. ϥΠϒϥϦ࡞Γ·ͨ͠ 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 ࣮࣭͜ͷߦʹू໿ʂ
10. ϥΠϒϥϦ࡞Γ·ͨ͠ 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) }
11. ϥΠϒϥϦ࡞Γ·ͨ͠
12. /FVNPSQIJTNσβΠϯΛదԠͨ͠ΞϓϦϦϦʔε #FGPSF "GUFS #PPL#BOL
13. 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