非图片方式实现Twitter启动界面

Twitter启动界面实现方式:

  • logo图片缩放
  • 代码绘制logo(优点:减少app体积,更加优化)
非图片方式实现Twitter启动界面_第1张图片
TwitterLaunch.gif

1. 通过Sketch软件生成SVG格式矢量图

SVG 可伸缩矢量图形 (Scalable Vector Graphics)

可缩放矢量图形是基于可扩展标记语言 ,用于描述二维矢量图形的一种图形格式。它由万维网联盟制定,是一个开放标准。SVG 使用 XML 格式定义图形,因此图像在放大或改变尺寸的情况下其图形质量不会有所损失。与 JPEG 和 GIF 图像比起来,其尺寸更小,且可压缩性更强。

将原图导入Sketch,通过Vector勾出鸽子的矢量点。

非图片方式实现Twitter启动界面_第2张图片
原图

在画出一条线后,选择Mirrored,调节线的样式,贴合原图曲线:

非图片方式实现Twitter启动界面_第3张图片
画出矢量图

最后点击右下角,导出SVG格式矢量图:


非图片方式实现Twitter启动界面_第4张图片
导出SVG

2. 通过PaintCode生成SVG格式文件

直接将SVG图片拖入,会自动生成贝塞尔曲线的代码。直接复制代码:

非图片方式实现Twitter启动界面_第5张图片
PaintCode

3.XCode中实现:

1. 创建LaunchView继承UIView

LaunchView.h :

@interface LaunchView : UIView
@property (strong, nonatomic) UIView *launchView;
-(void)addLayerToLaunchView;
@end

LaunchView.m : 注意,上一步复制的代码直接放到*- (UIBezierPath )bezierPath;方法中

@implementation LaunchView

-(void)addLayerToLaunchView {
    
    self.backgroundColor = [UIColor colorWithRed:0.18 green:0.70 blue:0.90 alpha:1.0];
    
    self.launchView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 150, 150)];
    self.launchView.backgroundColor = [UIColor clearColor];
    self.launchView.center = self.center;
    [self addSubview:self.launchView];
    
    CAShapeLayer *layer = [[CAShapeLayer alloc]init];
    layer.path = [self bezierPath].CGPath;
    layer.bounds = CGPathGetBoundingBox(layer.path);
    layer.position = CGPointMake(self.launchView.bounds.size.width / 2, self.launchView.bounds.size.height/ 2);
    layer.fillColor = [UIColor whiteColor].CGColor;
    [self.launchView.layer addSublayer:layer];
    
    [self performSelector:@selector(startLaunch) withObject:nil afterDelay:1.0];
}

- (void)startLaunch {
    
    [UIView animateWithDuration:1 animations:^{
        
        //先缩小launchView
        self.launchView.transform = CGAffineTransformMakeScale(0.5, 0.5);
        
    } completion:^(BOOL finished) {
        
        [UIView animateWithDuration:1 animations:^{
            //在无线放大launchView
            self.launchView.transform = CGAffineTransformMakeScale(50, 50);
            self.launchView.alpha = 0;
        } completion:^(BOOL finished) {
            
            [self.launchView removeFromSuperview];
            [self removeFromSuperview];
        }];
        
    }];
}

- (UIBezierPath *)bezierPath
{
    //// Color Declarations
    UIColor* color1 = [UIColor colorWithRed: 0.521 green: 0.521 blue: 0.521 alpha: 1];
    
    //// Page-1
    //// Bezier Drawing
    UIBezierPath* bezierPath = UIBezierPath.bezierPath;
    [bezierPath moveToPoint: CGPointMake(49.61, 34.62)];
    [bezierPath addCurveToPoint: CGPointMake(35.76, 30.64) controlPoint1: CGPointMake(44.66, 33.85) controlPoint2: CGPointMake(38.57, 31.9)];
    [bezierPath addCurveToPoint: CGPointMake(29.98, 27.72) controlPoint1: CGPointMake(32.08, 29) controlPoint2: CGPointMake(30.38, 27.82)];
    [bezierPath addCurveToPoint: CGPointMake(26.57, 25.45) controlPoint1: CGPointMake(29.04, 27.47) controlPoint2: CGPointMake(28.21, 26.4)];
    [bezierPath addCurveToPoint: CGPointMake(19.58, 20.11) controlPoint1: CGPointMake(24.09, 24.01) controlPoint2: CGPointMake(21.99, 22.06)];
    [bezierPath addCurveToPoint: CGPointMake(9.97, 10.3) controlPoint1: CGPointMake(14.09, 15.69) controlPoint2: CGPointMake(9.97, 10.3)];
    [bezierPath addCurveToPoint: CGPointMake(7.62, 28.46) controlPoint1: CGPointMake(9.97, 10.3) controlPoint2: CGPointMake(6.05, 20.92)];
    [bezierPath addCurveToPoint: CGPointMake(16.08, 41.34) controlPoint1: CGPointMake(9.19, 36) controlPoint2: CGPointMake(16.24, 40.45)];
    [bezierPath addCurveToPoint: CGPointMake(6.69, 39.7) controlPoint1: CGPointMake(15.77, 43.11) controlPoint2: CGPointMake(6.69, 39.7)];
    [bezierPath addCurveToPoint: CGPointMake(7.67, 45.64) controlPoint1: CGPointMake(6.69, 39.7) controlPoint2: CGPointMake(6.74, 42.46)];
    [bezierPath addCurveToPoint: CGPointMake(12.08, 54.08) controlPoint1: CGPointMake(8.63, 48.95) controlPoint2: CGPointMake(10.76, 52.44)];
    [bezierPath addCurveToPoint: CGPointMake(24.25, 62.33) controlPoint1: CGPointMake(15.39, 58.19) controlPoint2: CGPointMake(24.25, 62.33)];
    [bezierPath addCurveToPoint: CGPointMake(20.75, 63.08) controlPoint1: CGPointMake(24.25, 62.33) controlPoint2: CGPointMake(23.27, 62.96)];
    [bezierPath addCurveToPoint: CGPointMake(14.86, 62.76) controlPoint1: CGPointMake(18.22, 63.2) controlPoint2: CGPointMake(14.86, 62.76)];
    [bezierPath addCurveToPoint: CGPointMake(21.38, 73.08) controlPoint1: CGPointMake(14.86, 62.76) controlPoint2: CGPointMake(15.99, 68.72)];
    [bezierPath addCurveToPoint: CGPointMake(35.76, 79.09) controlPoint1: CGPointMake(26.77, 77.43) controlPoint2: CGPointMake(35.76, 79.09)];
    [bezierPath addCurveToPoint: CGPointMake(20.46, 86.85) controlPoint1: CGPointMake(35.76, 79.09) controlPoint2: CGPointMake(28.27, 84.66)];
    [bezierPath addCurveToPoint: CGPointMake(3.39, 88.74) controlPoint1: CGPointMake(12.64, 89.05) controlPoint2: CGPointMake(3.39, 88.74)];
    [bezierPath addCurveToPoint: CGPointMake(21.68, 97.55) controlPoint1: CGPointMake(3.39, 88.74) controlPoint2: CGPointMake(11.09, 94.77)];
    [bezierPath addCurveToPoint: CGPointMake(48.84, 98.53) controlPoint1: CGPointMake(31.67, 100.17) controlPoint2: CGPointMake(44.44, 99.01)];
    [bezierPath addCurveToPoint: CGPointMake(72.94, 89.59) controlPoint1: CGPointMake(53.09, 98.06) controlPoint2: CGPointMake(64.43, 95.17)];
    [bezierPath addCurveToPoint: CGPointMake(89.18, 74.76) controlPoint1: CGPointMake(82.57, 83.27) controlPoint2: CGPointMake(89.18, 74.76)];
    [bezierPath addCurveToPoint: CGPointMake(100.57, 54.91) controlPoint1: CGPointMake(89.18, 74.76) controlPoint2: CGPointMake(98.04, 62.76)];
    [bezierPath addCurveToPoint: CGPointMake(103.81, 39.7) controlPoint1: CGPointMake(103.1, 47.06) controlPoint2: CGPointMake(103.28, 44.44)];
    [bezierPath addCurveToPoint: CGPointMake(104.02, 29.48) controlPoint1: CGPointMake(104.2, 36.24) controlPoint2: CGPointMake(104.02, 29.48)];
    [bezierPath addCurveToPoint: CGPointMake(110.4, 24) controlPoint1: CGPointMake(104.02, 29.48) controlPoint2: CGPointMake(107.9, 26.58)];
    [bezierPath addCurveToPoint: CGPointMake(115.39, 17.74) controlPoint1: CGPointMake(112.89, 21.42) controlPoint2: CGPointMake(115.39, 17.74)];
    [bezierPath addLineToPoint: CGPointMake(103.81, 20.66)];
    [bezierPath addLineToPoint: CGPointMake(109, 15.7)];
    [bezierPath addLineToPoint: CGPointMake(113.29, 8.07)];
    [bezierPath addCurveToPoint: CGPointMake(106.15, 11.1) controlPoint1: CGPointMake(113.29, 8.07) controlPoint2: CGPointMake(109.95, 9.69)];
    [bezierPath addCurveToPoint: CGPointMake(98.04, 13.75) controlPoint1: CGPointMake(102.36, 12.52) controlPoint2: CGPointMake(98.04, 13.75)];
    [bezierPath addCurveToPoint: CGPointMake(86.7, 7.25) controlPoint1: CGPointMake(98.04, 13.75) controlPoint2: CGPointMake(93.05, 9.04)];
    [bezierPath addCurveToPoint: CGPointMake(71.51, 7.55) controlPoint1: CGPointMake(80.35, 5.47) controlPoint2: CGPointMake(71.51, 7.55)];
    [bezierPath addCurveToPoint: CGPointMake(59.07, 19.68) controlPoint1: CGPointMake(71.51, 7.55) controlPoint2: CGPointMake(62.24, 12.68)];
    [bezierPath addCurveToPoint: CGPointMake(57.28, 30.47) controlPoint1: CGPointMake(57.31, 23.6) controlPoint2: CGPointMake(56.66, 27.57)];
    [bezierPath addCurveToPoint: CGPointMake(58.14, 35.08) controlPoint1: CGPointMake(57.83, 33.08) controlPoint2: CGPointMake(58.14, 35.08)];
    [bezierPath addCurveToPoint: CGPointMake(49.61, 34.62) controlPoint1: CGPointMake(58.14, 35.08) controlPoint2: CGPointMake(53.72, 35.25)];
    [bezierPath closePath];
    bezierPath.miterLimit = 4;
    
    bezierPath.usesEvenOddFillRule = YES;
    
    [color1 setStroke];
    bezierPath.lineWidth = 1;
    [bezierPath stroke];
    
    return bezierPath;
}
2. 将LaunchScreen.storyboard调成LaunchView的背景色
非图片方式实现Twitter启动界面_第6张图片
6555B4D7-BF06-4364-A24B-3CB7F994F5DE.png
3. 控制器中应用LaunchView

此时就可以看到一只鸽子飞出屏幕的启动动画了

@interface ViewController ()
@property (strong, nonatomic) LaunchView *launchView;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.view.backgroundColor = [UIColor redColor];
}

- (void)viewDidAppear:(BOOL)animated{
    [super viewDidAppear:animated];
    [self launchAnimation];
    
}

- (void)launchAnimation {

    self.launchView = [[LaunchView alloc]initWithFrame:[UIScreen mainScreen].bounds];

    UIWindow *mainWindow = [UIApplication sharedApplication].keyWindow;
    [mainWindow addSubview:self.launchView];
    
    [self.launchView addLayerToLaunchView];
    
    [UIView animateWithDuration:0.5f delay:2.5f options:UIViewAnimationOptionBeginFromCurrentState animations:^{
        self.launchView.alpha = 0.0f;
    } completion:^(BOOL finished) {
        [self.launchView removeFromSuperview];
    }];
}

感谢作者:原文位置

你可能感兴趣的:(非图片方式实现Twitter启动界面)