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

Twitter启动界面实现方式:

  • logo图片缩放
  • 代码绘制logo(优点:减少app体积,更加优化)
TwitterLaunch.gif

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

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

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

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

原图

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

画出矢量图

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


导出SVG

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

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

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的背景色
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];
    }];
}

感谢作者:原文位置

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,590评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 86,808评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,151评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,779评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,773评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,656评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,022评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,678评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,038评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,659评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,756评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,411评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,005评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,973评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,053评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,495评论 2 343

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,441评论 25 707
  • 本书讲了什么 Sketch3基本操作介绍。 作者什么来头 郑成云,社会化媒体营销实践者,专注网络社交领域。从业6年...
    少穻阅读 2,388评论 0 1
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,019评论 4 62
  • 昨天,我坐着绿皮,经过三个多小时到达南京,先后游览了南京的玄武湖,夫子庙,秦淮河等地方,本想早点游完回青旅去,骑着...
    oscarshan阅读 717评论 2 0
  • 今天和朋友去看了浪漫主义芭蕾《吉赛尔》(Giselle)在上海国际舞蹈中心的演出。这部被誉为“芭蕾之冠”经典的芭蕾...
    Santonin阅读 927评论 1 48