IOS app hull (1) – Launch Page Logo" " to fly out of the screen

IOS app hull (1) - Launch Page Logo" " to fly out of the screen

Preface

Today is a look at the face of the world, a app yen value may decide the user number and icon value may Yan users decide whether to download, if you are ugly, ugly in the mobile phone desktop, the user may directly uninstall. So beautiful interface UI + reasonable user experience UX/UE will largely determine the user’s stickiness. Recently, due to the company’s app ready to beautify the interface, improve performance, so I would like to beautify the process can be shared with all things to sort out, take out and share with everyone to learn. The “hull” I wrote a series of it, I believe the beautification of the road is the world without end! (off the pitch: he gave himself a huge pit)

Source of inspiration

Perhaps some people read the title of the article is not necessarily fully understand what it means, in fact, the source of this design from the micro-blog I saw a moving picture, very vivid, image.

IOS app hull (1) - Launch Page Logo" " to fly out of the screen

A stay MOE uncle open Twitter client, the interface has a dynamic effect, that is, their logo direct fly out of the screen, hit him in the face. This effect I saw at that time is very interesting. Many applications are directly after each entry, or to show a few seconds of advertising page. In fact, if you add a startup feature, I feel pretty good.

Two. Animation principle

Next the principle above start effects, in fact, the principle is very simple: app after starting up, the first loading a View, on top of our logo, and then doing a magnification of UIView animation is good. Let’s see what I’m doing.

Three. Preparation tools

PS + AI or Sketch + PaintCode
this may have been asked, how suddenly also need these mapping tools. In fact, we can also load a logo image on the view, the same can be achieved. But the boss feels that if you load a picture too high will account for the size of the app, the program can draw as much as possible, so that the program painted. For irregular complex graphics, we have to use the above set of tools.

IOS app hull (1) - Launch Page Logo" " to fly out of the screen

PS is mainly to pull out the logo

IOS app hull (1) - Launch Page Logo" " to fly out of the screen
IOS app hull (1) - Launch Page Logo" " to fly out of the screen

AI and Sketch in order to pull out of the logo with a pen tool, tracing points, export path.

IOS app hull (1) - Launch Page Logo" " to fly out of the screen

Finally, PaintCode is the path to convert UIBezierPath (PaintCode this software is very powerful, can be directly to the inside of the SVG path directly into the corresponding Swift or Objective-C code) (later I discovered that in fact as long as the use of a PaintCode software can complete the above function, it can directly use the pen tool to draw the path)

Four. Start making

1 first with the PS Logo drawing out, save as a picture.
2 and then open the Sketch, import just Logo pictures.

IOS app hull (1) - Launch Page Logo" " to fly out of the screen

3 select the upper left corner of the “Insert” – “Vector” pen tool, followed by the Logo icon to connect each vertex

IOS app hull (1) - Launch Page Logo" " to fly out of the screen

4 and then between each vertex, add a new anchor, pen tool will appear +. On the right side of the software, the following panel appears

IOS app hull (1) - Launch Page Logo" " to fly out of the screen

drag these points you add, you can make the path fully consistent with the complex shape of Logo. Drag a drag, it should be the following figure like.

IOS app hull (1) - Launch Page Logo" " to fly out of the screen

5 then we choose to have a Page panel on the left panel

IOS app hull (1) - Launch Page Logo" " to fly out of the screen

choose just to trace out of the Path, the lower right corner will appear a Export panel

IOS app hull (1) - Launch Page Logo" " to fly out of the screen
IOS app hull (1) - Launch Page Logo" " to fly out of the screen
IOS app hull (1) - Launch Page Logo" " to fly out of the screen

This time we choose to export the SVG file

SVG IOS app hull (1) - Launch Page Logo" " to fly out of the screen
SVG logo (Scalable Vector Graphics zoom vector graphics) is
based on extensible markup language (XML), a graphic format for describing two-dimensional vector graphics. SVG is W3C (“World Wide Web ConSortium”, “Internet standards organization”) in August 2000 to develop a new two-dimensional vector graphics format, but also in the specification of the network vector graphics standards. SVG strictly follows the XML grammar, and uses the descriptive language of text format to describe the image content, so it is a kind of vector graphics format independent of image resolution

In fact, there is a small episode, draw the path, in fact, I use the AI trace point, and then exported to the SVG PaintCode, actually do not recognize my path. Later asked the Internet, God wants me to try for Sketch, and then on the line. Later, I compare the Sketch and AI export SVG what is the difference, only to find that I had AI export, plus a few layers, the path covered. Using AI to draw the path method and Sketch almost, as follows.

IOS app hull (1) - Launch Page Logo" " to fly out of the screen
IOS app hull (1) - Launch Page Logo" " to fly out of the screen

6 before exporting the SVG file into the PaintCode, the following will automatically generate Objective-C code

IOS app hull (1) - Launch Page Logo" " to fly out of the screen

Copy the generated code.

Color UIColor* = [UIColor Color1 / Declarations colorWithRed: 0.521 green: 0.521 blue: 0.521 alpha: 1]; Bezier Drawing Page-1 {/ / / / / / / / / / / / Bezier 2 Drawing UIBezierPath* bezier2Path = UIBezierPath.bezierPath; [bezier2Path moveToPoint: CGPointMake (552.37, 9.09)]; [bezier2Path addCurveToPoint: CGPointMake (519.07, 26.69) controlPoint1: CGPointMake (552.37, 9.09) controlPoint2: CGPointMake (538.05, 18.98)] [bezier2Path addCurveToPoint:; CGPointMake (480.56, 38.26) controlPoint1: CGPointMake (500.1, 34.4) controlPoint2: CGPointMake (480.56, 38.26)]; [bezier2Path addCurveToPoint: CGPointMake (439.19, 9.09) controlPoint1: CGPointMake (480.56, 38.26) controlPoint2: CGPointMake (467.44, 22.55)]; [bezier2Path addCurveTo Point: CGPointMake (368.15, 2.85) controlPoint1: CGPointMake (410.93, -4.38) controlPoint2: CGPointMake (368.15, 2.85)]; [bezier2Path addCurveToPoint: CGPointMake (316.47, 30.92) controlPoint1: CGPointMake (368.15, 2.85) controlPoint2: CGPointMake (340.52, 7.85)]; [bezier2Path addCurveToPoint: CGPointMake (281.09, 86.36) controlPoint1: CGPointMake (292.42, 53.99) controlPoint2: CGPointMake (290.08, 59.09)]; [bezier2Path addCurveToPoint: CGPointMake (279.09, 144.27) controlPoint1: CGPointMake (272.1, 113.63) controlPoint2: CGPointMake (279.09, 144.27)]; [bezier2Path addCurveToPoint: CGPointMake (181.55, 124.87) controlPoint1: CGPointMake (279.09, 144.27) controlPoint2: CGPointMake (224.85, 139.76)]; [bezier2Path addCurveToPoint: CGPoin TMake (101.23, 83.11) controlPoint1: CGPointMake (138.25, 109.98) controlPoint2: CGPointMake (101.23, 83.11)]; [bezier2Path addLineToPoint: CGPointMake (38.19, 22.55)]; [bezier2Path addCurveToPoint: CGPointMake (21.56, 66.97) controlPoint1: CGPointMake (38.19, 22.55) controlPoint2: CGPointMake (24, 45.21)]; [bezier2Path addCurveToPoint: CGPointMake (28.04, 113.2) controlPoint1: CGPointMake (19.12, 88.74) controlPoint2: CGPointMake (28.04, 113.2)]; [bezier2Path addCurveToPoint: CGPointMake (45.34, 151.3) controlPoint1: CGPointMake (28.04, 113.2) controlPoint2: CGPointMake (34.12, 134.96)]; [bezier2Path addCurveToPoint: CGPointMake (72.71, 178.32) controlPoint1: CGPointMake (56.55, 167.65) controlPoint2: CGPointMake (72.71, 178.32)]; [bezier2Path addCurveToPoint: CGPointMake (45.34, 173.23) controlPoint1: CGPointMake (72.71, 178.32) controlPoint2: CGPointMake (57.6, 176.78)]; [bezier2Path addCurveToPoint: CGPointMake (21.56, 163.51) controlPoint1: CGPointMake (33.08, 169.68) controlPoint2: CGPointMake (21.56, 163.51)]; [bezier2Path addCurveToPoint: CGPointMake (28.04, 210.73) controlPoint1: CGPointMake (21.56, 163.51) controlPoint2: CGPointMake (20.58, 191.27)]; [bezier2Path addCurveToPoint: CGPointMake (53.47, 246.86) controlPoint1: CGPointMake (35.49, 230.2) controlPoint2: CGPointMake (53.47, 246.86)]; [bezier2Path addCurveToPoint: CGPointMake (80.14, 268.29) controlPoint1: CGPointMake (53.47, 246.86) controlPoint2: CGPointMake (65.25, 259.74)]; [bezier2Path ad DCurveToPoint: CGPointMake (113.46, 281.28) controlPoint1: CGPointMake (95.04, 276.83) controlPoint2: CGPointMake (113.46, 281.28)]; [bezier2Path addCurveToPoint: CGPointMake (86.11, 286.04) controlPoint1: CGPointMake (113.46, 281.28) controlPoint2: CGPointMake (98.18, 285.95)]; [bezier2Path addCurveToPoint: CGPointMake (62.93, 281.67) controlPoint1: CGPointMake (74.03, 286.13) controlPoint2: CGPointMake (62.93, 281.67)]; [bezier2Path addCurveToPoint: CGPointMake (80.14, 317.03) controlPoint1: CGPointMake (62.93, 281.67) controlPoint2: CGPointMake (71.12, 304.22)]; [bezier2Path addCurveToPoint: CGPointMake (103.91, 339.84) controlPoint1: CGPointMake (89.17, 329.83) controlPoint2: CGPointMake (103.91, 339.84)]; [bezier2Path addCurveToP Oint: CGPointMake (135.88, 359.44) controlPoint1: CGPointMake (103.91, 339.84) controlPoint2: CGPointMake (119.59, 353.53)]; [bezier2Path addCurveToPoint: CGPointMake (170.93, 364.15) controlPoint1: CGPointMake (152.16, 365.34) controlPoint2: CGPointMake (170.93, 364.15)]; [bezier2Path addCurveToPoint: CGPointMake (135.88, 386.44) controlPoint1: CGPointMake (170.93, 364.15) controlPoint2: CGPointMake (153.54, 376.98)]; [bezier2Path addCurveToPoint: CGPointMake (101.13, 401.54) controlPoint1: CGPointMake (118.21, 395.9) controlPoint2: CGPointMake (101.13, 401.54)]; [bezier2Path addCurveToPoint: CGPointMake (53.47, 412.64) controlPoint1: CGPointMake (101.13, 401.54) controlPoint2: CGPointMake (81.16, 409.59)]; [bezier2Path addCurveToPoi Nt: CGPointMake (0.29, 412.64) controlPoint1: CGPointMake (25.78, 415.7) controlPoint2: CGPointMake (0.29, 412.64)]; [bezier2Path addCurveToPoint: CGPointMake (72.71, 447.67) controlPoint1: CGPointMake (0.29, 412.64) controlPoint2: CGPointMake (36.62, 435.16)]; [bezier2Path addCurveToPoint: CGPointMake (149.39, 464.31) controlPoint1: CGPointMake (108.8, 460.17) controlPoint2: CGPointMake (149.39, 464.31)]; [bezier2Path addCurveToPoint: CGPointMake (249.01, 457.71) controlPoint1: CGPointMake (149.39, 464.31) controlPoint2: CGPointMake (196.6, 469.56)]; [bezier2Path addCurveToPoint: CGPointMake (352.07, 418.46) controlPoint1: CGPointMake (301.42, 445.86) controlPoint2: CGPointMake (352.07, 418.46)]; [bezier2Path addCurveToPoint: CGPoint Make (414.45, 370.11) controlPoint1: CGPointMake (352.07, 418.46) controlPoint2: CGPointMake (388.26, 396.31)]; [bezier2Path addCurveToPoint: CGPointMake (458.34, 312.2) controlPoint1: CGPointMake (440.64, 343.92) controlPoint2: CGPointMake (458.34, 312.2)]; [bezier2Path addCurveToPoint: CGPointMake (489.68, 246.86) controlPoint1: (458.34 CGPointMake, 312.2 CGPointMake (controlPoint2:) 476.64, 284.33)]; [bezier2Path addCurveToPoint: CGPointMake (509.39, 165.55) controlPoint1: CGPointMake (502.73, 209.38) controlPoint2: CGPointMake (509.39, 165.55)]; [bezier2Path addLineToPoint: CGPointMake (510.48, 117.41)]; [bezier2Path addCurveToPoint: CGPointMake (542.8, 90.45) controlPoint1: (510.48 CGPointMake, 117.41 CGPointMake (controlPoint2:) 526.7, 107.34)]; [bezier2Path addCurveToPoint: CGPointMake (569.12, 56.54) controlPoint1: CGPointMake (558.9, 73.55) controlPoint2: CGPointMake (569.12, 56.54)]; [bezier2Path addLineToPoint: CGPointMake (537.79, 66.97) []; bezier2Path addLineToPoint: CGPointMake (503.61, 73.55)]; [bezier2Path addCurveToPoint: CGPointMake (537.79, 43.14) (503.61, controlPoint1: CGPointMake 73.55) controlPoint2: CGPointMake (528.94, 56.27)]; [bezier2Path addCurveToPoint: CGPointMake (552.37, 9.09) controlPoint1: CGPointMake (546.63, 30.01) controlPoint2: CGPointMake (552.37, 9.09)]; [bezier2Path closePath]; bezier2Path.miterLimit = 4; bezier2Path.usesEvenOddFillRule = YES; [color1 setStroke]; bezier2Path.lineWidth = 1; [bezi Er2Path stroke];}

Episode: when I finished all this, I found out that PaintCode had a pen tool

IOS app hull (1) - Launch Page Logo" " to fly out of the screen

means that only one PaintCode can do all the things you want to do, do not need Sketch or AI to draw the path. PaintCode can draw their own path, export OC or Swift code.

7 now we return to the Xcode project. Add a UIView to display Logo. And add Layer to View’s Layer

- (void) addLayerToLaunchView {//self.launchView is a Logo UIVIew CAShapeLayer *layer = [[CAShapeLayer alloc]init] layer.path = I add; [self setBezierPath].CGPath; layer.bounds = CGPathGetBoundingBox (layer.path); self.launchView.backgroundColor [UIColor = blueColor]; layer.position = CGPointMake (self.view.layer.bounds.size.width / 2, self.view.layer.bounds.size.height/ 2); layer.fillColor = [UIColor whiteColor].CGColor; [self.launchView.layer addSublayer:layer];}
- (UIBezierPath * setBezierPath) {/ / this is just add PaintCode to paste the code out}
IOS app hull (1) - Launch Page Logo" " to fly out of the screen

8 add animation to this View. Carefully observe my article at the beginning of the stay MOE uncle opened the Gif Twitter diagram, the animation effect is to reduce the birds, and then become larger

- (void) startLaunch [UIView animateWithDuration:0.2 animations:^{{/ / here first View reduced self.launchView.frame = CGRectMake (0, 0, 50, 50); self.launchView.center = self.view.center;} completion:^ (BOOL finished) {[UIView animateWithDuration:0.3 animations:^{/ / View here should be the amplification of self.launchView.frame = CGRectMake (0, 0, 5000, 5000); self.launchView.center = self.view.center; self.alpha = 0;} completion:^ (BOOL finished) {[self.launchView; removeFromSuperview];}];}];}

Then run the project can be achieved when the application starts, let Logo fly up the effect.

This is what I do this effect in app:

IOS app hull (1) - Launch Page Logo" " to fly out of the screen

Ending

This effect is actually applicable to a lot of app, if the company does not have to be forced to join the ad page, and so on other pages,
can be considered after the start with these animations to increase the user experience app. Excellent cut animation can make app more vivid, full of vitality!