![]() ![]() shadowPath = UIBezierPath (rect : rect ). insetBy (dx : -spread, dy : -spread ) // We use insetBy(dx:dy:) and shadowPath to achieve the same effect. Sketch shadow with an offset of (20, 20), a blur of 20, and a spread of 20 Here is a shadow with an offset of (20, 20), a blur of 20, and a spread of 20 in Sketch. To replicate this behavior in iOS, we use insetBy(dx:dy:) and shadowPath. Sketch shadow with spread of 0, 20, and 40 respectively As you can see, the shadow increases its size in all directions equal to the value specified in spread, so it looks like a border for our square view. Then we set the spread value to 0, 20, and 40. Setting offset to (0, 0) and blur to 0 to make a shadow an identical size as the square. The best way to understand this is setting shadow-offset to (0, 0) and blur radius to 0, then play around with spread. You can think of this as an inset of a shadow. A positive value increases the size of the shadow, and a negative value decreases the size of the shadow. Spread radius increase / decrease the size of the shadow. Sponsor and reach thousands of iOS developers. You can easily support by checking out this sponsor. We can match the blur value the next one is the spread radius ( spread). It might not be identical, but it good enough, and number two is easy to remember. Sketch shadow with offset of (20, 20) and blur of 20 The following is the one from Sketch for comparison. shadowRadius = 20 / 2 iOS shadow with offset of (20, 20) and shadowRadius of 10 From what I read and try, the magic number is 2. To do that, we have to divide a value that we get from the Sketch with some value before we can use it as shadowRadius. The shadow in iOS is more blurry than the one in Sketch, so we need to tune it down a bit. Shadow Radiusįrom the above example, the offset seems to be right, but blur effect obviously not. iOS shadow with offset of (20, 20) and shadowRadius of 20 Sketch shadow with offset of (20, 20) and blur of 20 Blur vs. Sketch shadow settingĪs you can see, the result is not the same. shadowOffset = CGSize (width : 20, height : 20 )Īnd here is our setting in Sketch. The following are the result of setting a shadow offset of (20, 20) and a blur radius of 20 in iOS and Sketch. And even the one that looks like the same property, blur and shadowRadius, doesn't produce the same effect. That's because it has a property that doesn't exist in CALayer's shadow, spread. If you have ever been working from a Sketch design, a shadow might be one of the most frustrating elements to work with. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |