SwiftUI で Neumorphism!!!

SwiftUI で Neumorphism!!!

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

D4f04ef104c8fbfc9caa3c80e41692fd?s=128

Ryo Tsuzukihashi

April 27, 2020
Tweet

Transcript

  1. 3ZP5TV[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 IFYl$%&#z  w ϕʔεͷً౓ͷΈΛม͑ͨ΋ͷͰ ӨΛ࡞Δ w

    4XJGU͸)4#ͷΈରԠ w IFY3(#")4-")4# /FVNPSQIJTN 4PGU6* JO6TFSJOUFSGBDFEFTJHO5VUPSJBMΑΓ /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