SwiftUI で Neumorphism!!!

Transcript

1. 1.

   3ZP
   5TV[VLJIBTIJ
    4XJGU6*Ͱ/FVNPSQIJTN <0/-*/&>
   QPUBUPUJQT
   

2. 2.

   w ࣗݾ঺հ
   w /FVNPSQIJTNͱ͸ʁ
   w 4XJGU6*Ͱͷ࣮ݱํ๏
   w ϥΠϒϥϦ࡞Γ·ͨ͠
   w /FVNPSQIJTNσβΠϯΛదԠͨ͠ΞϓϦϦϦʔε

   ΞδΣϯμ
3. 3.

   !UTV[VLJ w :BIPP
   +"1"/
   ৽ଔ೥໨
   w 1BZ1BZϑϦϚJ04։ൃ
   w झຯ
   
   
   ݸਓΞϓϦ։ൃ
   
   
   ແਓౡ։୓ ࣗݾ঺հ

   Nuemorphism!!!
4. 4.

   /FVNPSQIJTNͱ͸ʁ w ৽͍͠
   ʮεΩϡʔϞϑΟζϜʯ
   w ໌Δ͍ӨΛࠨ্ʹɺ҉͍ӨΛӈԼʹ͢Δ
   w ͳΜ͔৽ͯ͘͠ྑ͍☺ Neumorphism in

   user interfacesΑΓ ˠͦ΋ͦ΋εΩϡʔϞϑΟζϜͱ͸ʁ
5. 5.

   εΩϡʔϞϑΟζϜͱ͸ʁ w ݱ࣮ͷ෺࣭ʹࣅͤͯɺ
   Ϣʔβʹͳ͡Έ΍͘͢͠ɺ
   ௚ײతʹૢ࡞Λཧղͤ͞Δ͜ͱ͕Ͱ͖Δ J04
    ౾UJQT
   ΪϦγΞޠͷʮTLFPVTʯ ೖΕ෺
   

   ͱʮNPSQIÊʯ ܗ ͱݴ͏୯ޠ͔Β࡞ΒΕͨΒ͍͠ɻ
6. 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. 7.

   Ͳ͕ͬͪ/FVNPSQIJTN ౾UJQT
   ِ/FVNPSQIJTNʹ஫ҙʂ
   /FVNPSQIJTN͸നͱࠇͷӨΛ͚ͭΕ͹ྑ͍ͱݴ͏
   Θ͚Ͱ͸ແ͍ͷͰ͢ɻ

8. 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. 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. 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. 11.

    ϥΠϒϥϦ࡞Γ·ͨ͠

12. 12.

    /FVNPSQIJTNσβΠϯΛదԠͨ͠ΞϓϦϦϦʔε #FGPSF "GUFS #PPL#BOL

13. 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