Upgrade to Pro — share decks privately, control downloads, hide ads and more …

SwiftUI で Neumorphism!!!

SwiftUI で Neumorphism!!!

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

Ryo Tsuzukihashi

April 27, 2020
Tweet

More Decks by Ryo Tsuzukihashi

Other Decks in Programming

Transcript

  1. 3ZP5TV[VLJIBTIJ
    4XJGU6*Ͱ/FVNPSQIJTN
    <0/-*/&>QPUBUPUJQT

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    ͱʮNPSQIÊʯ ܗ
    ͱݴ͏୯ޠ͔Β࡞ΒΕͨΒ͍͠ɻ

    View full-size slide

  6. 4XJGU6*ͰͲ͏࣮૷͢Δͷ͔ʁ
    w $PMPSͷ&YUFOTJPOͰϕʔεͷΧϥʔίʔυΛड͚औΔ
    $PMPS IFYl$%z

    w ϕʔεͷً౓ͷΈΛม͑ͨ΋ͷͰ
    ӨΛ࡞Δ
    w 4XJGU͸)4#ͷΈରԠ
    w IFY3(#")4-")4#
    /FVNPSQIJTN 4PGU6*
    JO6TFSJOUFSGBDFEFTJHO5VUPSJBMΑΓ
    /FVNPSQIJTNྩ࿨࣌୅ͷεΩϡʔϞʔϑΟζϜ
    @touyoubuntu

    View full-size slide

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

    View full-size slide

  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

    ^
    ͍͢͝؆୯ʂ
    ͚ͩͲɺ΋ͬͱศརʹ͍ͨ͠ʂ

    View full-size slide

  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
    ࣮࣭͜ͷߦʹू໿ʂ

    View full-size slide

  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)
    }

    View full-size slide

  11. ϥΠϒϥϦ࡞Γ·ͨ͠

    View full-size slide

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

    View full-size slide

  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

    View full-size slide