Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

SwiftUI で Neumorphism!!!

SwiftUI で Neumorphism!!!

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

Ryo Tsuzukihashi

April 27, 2020
Tweet

More Decks by Ryo Tsuzukihashi

Other Decks in Programming

Transcript

  1. 4XJGU6*ͰͲ͏࣮૷͢Δͷ͔ʁ w $PMPSͷ&YUFOTJPOͰϕʔεͷΧϥʔίʔυΛड͚औΔ $PMPS IFYl$%&#z  w ϕʔεͷً౓ͷΈΛม͑ͨ΋ͷͰ ӨΛ࡞Δ w

    4XJGU͸)4#ͷΈରԠ w IFY3(#")4-")4# /FVNPSQIJTN 4PGU6* JO6TFSJOUFSGBDFEFTJHO5VUPSJBMΑΓ /FVNPSQIJTNྩ࿨࣌୅ͷεΩϡʔϞʔϑΟζϜ @touyoubuntu
  2. 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  ^ ͍͢͝؆୯ʂ ͚ͩͲɺ΋ͬͱศརʹ͍ͨ͠ʂ
  3. ϥΠϒϥϦ࡞Γ·ͨ͠ 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 ࣮࣭͜ͷߦʹू໿ʂ
  4. ϥΠϒϥϦ࡞Γ·ͨ͠ 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) }