让 Logo "飞" 出屏幕

 

推荐序

本文介绍了一种思路，即利用矢量工具来生成动画的关键代码，然后进一步制作成完整的动画效果，感谢作者授权转载。

作者介绍：一缕殇流化隐半边冰霜(微博@halfrost)，iOS 开发者，非常热衷于分享，常混迹于简书，个人博客 https://halfrost.com ，目前就职于上海一家小的创业金融公司。

前言

当今是个看脸的世界，一个 App 的颜值可能会决定用户的使用次数，icon 的颜值更可能决定了用户是否回去下载，如果太丑，放在手机桌面都难看，那用户很可能就直接卸载了。所以漂亮的界面 UI + 合理的用户体验 UX/UE 也会很大程度决定用户的黏性。最近由于公司的 App 准备美化一下界面，提升性能，所以我就想把美化过程中可以和大家分享的东西都整理整理，拿出来也和大家一起分享学习。这个 “旧貌换新颜” 我就写成一个系列吧，相信美化的道路是永无止境的！(场外音:自己又给自己开了一个巨坑)

一.灵感的来源

也许有些人看了文章的标题并不一定完全懂是啥意思，其实设计这个的来源源自于我在微博上看到的一个动图，很生动，形象。

一个呆萌的大叔点开 Twitter 客户端，启动界面有一个动效，就是他们的 logo 直接 “飞” 出屏幕，打在了他的脸上。这个效果我当时看了就觉得很有趣。很多应用每次启动之后都是直接进去，或者先展示一个几秒的广告页。其实要是加一个这种启动特性，感觉也挺不错。

二.动画原理

接下来说一下上面那个启动特效的原理，其实原理很简单:app 在启动之后，先加载一个 View，上面放了我们的 logo，然后在做一个放大的 UIView 的动画就好了。接下来看看我的做法吧。

三.准备工具

PS + AI 或者 Sketch + PaintCode
这个可能有人问了，怎么突然还需要这些作图的工具。其实大家也可以加载一个 logo 图片放在 view 上，一样可以实现。不过老板觉得加载一张图片如果太高清会占 app 大小，能尽量程序画出来的，就让程序画出来。对于不规则复杂的图形，就只好用上面这一套组合工具了。


PS主要是把logo抠出来

AI 和 Sketch 是为了把抠出来的 logo 用钢笔工具，进行描点，导出路径。

最后 PaintCode 就是把路径转换成 UIBezierPath(PaintCode 这个软件很厉害，可以直接把 SVG 里面的路径直接转换成对应的 Swift 或者 Objective-C 代码)(后来我发现其实只要用 PaintCode 一个软件就可以完成上面所有功能了，它也可以直接用钢笔工具画路径)

四.开始制作

1. 首先用 PS 把 Logo 图抠出来，保存成图片。

2. 然后打开 Sketch，导入刚刚的 Logo 图片。

3. 选择左上角的 “Insert”-“Vector” 钢笔工具，依次连接 Logo 图标的各个顶点

4.然后在每段顶点之间，加新的锚点，钢笔工具会出现+号。在软件的右侧，会出现下面这个面板

通过拖拉这些你加出来的点，可以使路径完全吻合 Logo 复杂的外形。拖过一番拖拽之后，就应该成下面这个图的样子了。

5. 接下来我们就选择左边面板上面有一个 Page 面板

下刚刚描出来的 Path，右下角会出现一个 Export 面板

这个时候我们选择导出SVG文件

SVG

可缩放矢量图形（Scalable Vector Graphics）是基于
可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。SVG是W3C(“World Wide Web ConSortium” 即 “ 国际互联网标准组织”)在2000年8月制定的一种新的二维矢量图形格式，也是规范中的网络矢量图形标准。SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式

其实这里有一个小插曲，绘制路径的时候，其实我用的是 AI 描点的，之后导出 SVG 给 PaintCode，居然不识别我的路径。后来网上问了问，大神要我换 Sketch 试试，然后就行了。后来我比较了一下 Sketch 和 AI 导出的 SVG 有什么不同，才发现，我之前 AI 导出的，加了几个图层，把路径盖住了。用 AI 绘制路径的方法和 Sketch 的差不多，如下图。

6.把之前导出的SVG文件导入到PaintCode中，下面会自动生成Objective-C代码

把生成的这些代码复制出来。

  1. //// Color Declarations
  2. UIColor* color1 = [UIColor colorWithRed: 0.521 green: 0.521 blue: 0.521 alpha: 1];
  4. //// Bezier Drawing
  6. //// Page-1
  7. {
  8.     //// Bezier 2 Drawing
  9.     UIBezierPath* bezier2Path = UIBezierPath.bezierPath;
  10.     [bezier2Path moveToPoint: CGPointMake(552.37, 9.09)];
  11.     [bezier2Path addCurveToPoint: CGPointMake(519.07, 26.69) controlPoint1: CGPointMake(552.37, 9.09) controlPoint2: CGPointMake(538.05, 18.98)];
  12.     [bezier2Path addCurveToPoint: CGPointMake(480.56, 38.26) controlPoint1: CGPointMake(500.1, 34.4) controlPoint2: CGPointMake(480.56, 38.26)];
  13.     [bezier2Path addCurveToPoint: CGPointMake(439.19, 9.09) controlPoint1: CGPointMake(480.56, 38.26) controlPoint2: CGPointMake(467.44, 22.55)];
  14.     [bezier2Path addCurveToPoint: CGPointMake(368.15, 2.85) controlPoint1: CGPointMake(410.93, -4.38) controlPoint2: CGPointMake(368.15, 2.85)];
  15.     [bezier2Path addCurveToPoint: CGPointMake(316.47, 30.92) controlPoint1: CGPointMake(368.15, 2.85) controlPoint2: CGPointMake(340.52, 7.85)];
  16.     [bezier2Path addCurveToPoint: CGPointMake(281.09, 86.36) controlPoint1: CGPointMake(292.42, 53.99) controlPoint2: CGPointMake(290.08, 59.09)];
  17.     [bezier2Path addCurveToPoint: CGPointMake(279.09, 144.27) controlPoint1: CGPointMake(272.1, 113.63) controlPoint2: CGPointMake(279.09, 144.27)];
  18.     [bezier2Path addCurveToPoint: CGPointMake(181.55, 124.87) controlPoint1: CGPointMake(279.09, 144.27) controlPoint2: CGPointMake(224.85, 139.76)];
  19.     [bezier2Path addCurveToPoint: CGPointMake(101.23, 83.11) controlPoint1: CGPointMake(138.25, 109.98) controlPoint2: CGPointMake(101.23, 83.11)];
  20.     [bezier2Path addLineToPoint: CGPointMake(38.19, 22.55)];
  21.     [bezier2Path addCurveToPoint: CGPointMake(21.56, 66.97) controlPoint1: CGPointMake(38.19, 22.55) controlPoint2: CGPointMake(24, 45.21)];
  22.     [bezier2Path addCurveToPoint: CGPointMake(28.04, 113.2) controlPoint1: CGPointMake(19.12, 88.74) controlPoint2: CGPointMake(28.04, 113.2)];
  23.     [bezier2Path addCurveToPoint: CGPointMake(45.34, 151.3) controlPoint1: CGPointMake(28.04, 113.2) controlPoint2: CGPointMake(34.12, 134.96)];
  24.     [bezier2Path addCurveToPoint: CGPointMake(72.71, 178.32) controlPoint1: CGPointMake(56.55, 167.65) controlPoint2: CGPointMake(72.71, 178.32)];
  25.     [bezier2Path addCurveToPoint: CGPointMake(45.34, 173.23) controlPoint1: CGPointMake(72.71, 178.32) controlPoint2: CGPointMake(57.6, 176.78)];
  26.     [bezier2Path addCurveToPoint: CGPointMake(21.56, 163.51) controlPoint1: CGPointMake(33.08, 169.68) controlPoint2: CGPointMake(21.56, 163.51)];
  27.     [bezier2Path addCurveToPoint: CGPointMake(28.04, 210.73) controlPoint1: CGPointMake(21.56, 163.51) controlPoint2: CGPointMake(20.58, 191.27)];
  28.     [bezier2Path addCurveToPoint: CGPointMake(53.47, 246.86) controlPoint1: CGPointMake(35.49, 230.2) controlPoint2: CGPointMake(53.47, 246.86)];
  29.     [bezier2Path addCurveToPoint: CGPointMake(80.14, 268.29) controlPoint1: CGPointMake(53.47, 246.86) controlPoint2: CGPointMake(65.25, 259.74)];
  30.     [bezier2Path addCurveToPoint: CGPointMake(113.46, 281.28) controlPoint1: CGPointMake(95.04, 276.83) controlPoint2: CGPointMake(113.46, 281.28)];
  31.     [bezier2Path addCurveToPoint: CGPointMake(86.11, 286.04) controlPoint1: CGPointMake(113.46, 281.28) controlPoint2: CGPointMake(98.18, 285.95)];
  32.     [bezier2Path addCurveToPoint: CGPointMake(62.93, 281.67) controlPoint1: CGPointMake(74.03, 286.13) controlPoint2: CGPointMake(62.93, 281.67)];
  33.     [bezier2Path addCurveToPoint: CGPointMake(80.14, 317.03) controlPoint1: CGPointMake(62.93, 281.67) controlPoint2: CGPointMake(71.12, 304.22)];
  34.     [bezier2Path addCurveToPoint: CGPointMake(103.91, 339.84) controlPoint1: CGPointMake(89.17, 329.83) controlPoint2: CGPointMake(103.91, 339.84)];
  35.     [bezier2Path addCurveToPoint: CGPointMake(135.88, 359.44) controlPoint1: CGPointMake(103.91, 339.84) controlPoint2: CGPointMake(119.59, 353.53)];
  36.     [bezier2Path addCurveToPoint: CGPointMake(170.93, 364.15) controlPoint1: CGPointMake(152.16, 365.34) controlPoint2: CGPointMake(170.93, 364.15)];
  37.     [bezier2Path addCurveToPoint: CGPointMake(135.88, 386.44) controlPoint1: CGPointMake(170.93, 364.15) controlPoint2: CGPointMake(153.54, 376.98)];
  38.     [bezier2Path addCurveToPoint: CGPointMake(101.13, 401.54) controlPoint1: CGPointMake(118.21, 395.9) controlPoint2: CGPointMake(101.13, 401.54)];
  39.     [bezier2Path addCurveToPoint: CGPointMake(53.47, 412.64) controlPoint1: CGPointMake(101.13, 401.54) controlPoint2: CGPointMake(81.16, 409.59)];
  40.     [bezier2Path addCurveToPoint: CGPointMake(0.29, 412.64) controlPoint1: CGPointMake(25.78, 415.7) controlPoint2: CGPointMake(0.29, 412.64)];
  41.     [bezier2Path addCurveToPoint: CGPointMake(72.71, 447.67) controlPoint1: CGPointMake(0.29, 412.64) controlPoint2: CGPointMake(36.62, 435.16)];
  42.     [bezier2Path addCurveToPoint: CGPointMake(149.39, 464.31) controlPoint1: CGPointMake(108.8, 460.17) controlPoint2: CGPointMake(149.39, 464.31)];
  43.     [bezier2Path addCurveToPoint: CGPointMake(249.01, 457.71) controlPoint1: CGPointMake(149.39, 464.31) controlPoint2: CGPointMake(196.6, 469.56)];
  44.     [bezier2Path addCurveToPoint: CGPointMake(352.07, 418.46) controlPoint1: CGPointMake(301.42, 445.86) controlPoint2: CGPointMake(352.07, 418.46)];
  45.     [bezier2Path addCurveToPoint: CGPointMake(414.45, 370.11) controlPoint1: CGPointMake(352.07, 418.46) controlPoint2: CGPointMake(388.26, 396.31)];
  46.     [bezier2Path addCurveToPoint: CGPointMake(458.34, 312.2) controlPoint1: CGPointMake(440.64, 343.92) controlPoint2: CGPointMake(458.34, 312.2)];
  47.     [bezier2Path addCurveToPoint: CGPointMake(489.68, 246.86) controlPoint1: CGPointMake(458.34, 312.2) controlPoint2: CGPointMake(476.64, 284.33)];
  48.     [bezier2Path addCurveToPoint: CGPointMake(509.39, 165.55) controlPoint1: CGPointMake(502.73, 209.38) controlPoint2: CGPointMake(509.39, 165.55)];
  49.     [bezier2Path addLineToPoint: CGPointMake(510.48, 117.41)];
  50.     [bezier2Path addCurveToPoint: CGPointMake(542.8, 90.45) controlPoint1: CGPointMake(510.48, 117.41) controlPoint2: CGPointMake(526.7, 107.34)];
  51.     [bezier2Path addCurveToPoint: CGPointMake(569.12, 56.54) controlPoint1: CGPointMake(558.9, 73.55) controlPoint2: CGPointMake(569.12, 56.54)];
  52.     [bezier2Path addLineToPoint: CGPointMake(537.79, 66.97)];
  53.     [bezier2Path addLineToPoint: CGPointMake(503.61, 73.55)];
  54.     [bezier2Path addCurveToPoint: CGPointMake(537.79, 43.14) controlPoint1: CGPointMake(503.61, 73.55) controlPoint2: CGPointMake(528.94, 56.27)];
  55.     [bezier2Path addCurveToPoint: CGPointMake(552.37, 9.09) controlPoint1: CGPointMake(546.63, 30.01) controlPoint2: CGPointMake(552.37, 9.09)];
  56.     [bezier2Path closePath];
  57.     bezier2Path.miterLimit = 4;
  59.     bezier2Path.usesEvenOddFillRule = YES;
  61.     [color1 setStroke];
  62.     bezier2Path.lineWidth = 1;
  63.     [bezier2Path stroke];
  64. }

小插曲:当我全部忙活完这些以后，我才发现PaintCode也有钢笔工具

也就是说只用一个 PaintCode 就可以完成所有想做的事情了，不需要 Sketch 或者 AI 去画路径了。PaintCode 自己就可以画路径，导出 OC 或者 Swift 代码了。

7. 现在我们回到 Xcode 工程中。添加一个 UIView 用来显示 Logo。并且把Layer加到 View 的 Layer 中

  1. -(void)addLayerToLaunchView
  2. {
  3.     //self.launchView是我添加的一个显示Logo的UIVIew
  4.     CAShapeLayer *layer = [[CAShapeLayer alloc]init];
  5.     layer.path = [self setBezierPath].CGPath;
  6.     layer.bounds = CGPathGetBoundingBox(layer.path);
  8.     self.launchView.backgroundColor = [UIColor blueColor];
  9.     layer.position = CGPointMake(self.view.layer.bounds.size.width / 2, self.view.layer.bounds.size.height/ 2);
  10.     layer.fillColor = [UIColor whiteColor].CGColor;
  11.     [self.launchView.layer addSublayer:layer];
  12. }
  1. -(UIBezierPath *)setBezierPath
  2. {
  3.     //  这里面加入的就是刚刚PaintCode粘贴出来的代码
  4. }

8. 给这个 View 添加动画。仔细观察我文章开头的那个呆萌大叔打开 Twitter 的 Gif 图，动画效果是先把鸟缩小，然后再变大

  1. - (void)startLaunch
  2. {
  3.     [UIView animateWithDuration:0.2 animations:^{
  4.         // 这里先把View缩小
  5.         self.launchView.frame = CGRectMake(0, 0, 50, 50);
  6.         self.launchView.center = self.view.center;
  7.     } completion:^(BOOL finished) {
  8.         [UIView animateWithDuration:0.3 animations:^{
  9.             // 这里要把View放大
  10.             self.launchView.frame = CGRectMake(0, 0, 5000, 5000);
  11.             self.launchView.center = self.view.center;
  12.             self.alpha = 0;
  13.         } completion:^(BOOL finished) {
  14.             [self.launchView removeFromSuperview];
  15.         }];;
  16.     }];
  17. }

接下来运行工程就可以实现应用启动的时候，让Logo”飞”起来的效果啦。

这是我把这个效果做到app中的效果：

结尾

这个效果其实适用很多 app，如果公司也没有强制要加入广告页，等等其他页面，

可以考虑在启动之后加上这些动画来增加 app 的用户体验。优秀的过场动画能让 app 更加鲜活，充满活力！

让 Logo "飞" 出屏幕的更多相关文章

  1. 【Unity3D】模仿制作“神庙逃亡”吃金币后金币飞出屏幕效果

    [前言] 玩过“神庙逃亡”的应该都知道,这款游戏不论从游戏流畅度.人物动画.场景的管理都很棒. 自己也做了一款简单的跑酷游戏,实现了简单的吃金币效果,但是发现不好看,于是就想模仿“神庙逃亡”中的这个效 ...

  2. 【全面解禁!真正的Expression Blend实战开发技巧】第十章 FluidMoveBehavior完全解析之三飞出ListBox吧

    原文:[全面解禁!真正的Expression Blend实战开发技巧]第十章 FluidMoveBehavior完全解析之三飞出ListBox吧 刚才有人说我的标题很给力,哈哈.那这个标题肯定更给力了 ...

  3. HTMO DOM部分---小练习；列表之间移动、日期选择、好友选中、滑动效果、滚动条效果、飞入飞出效果。

    一:列表之间数据移动 第一个列表里面有内容,第二个里面没有 实现功能: 点击左侧列表选中一项内容,点击按钮,复制到右侧 点击复制所有按钮,将左侧列表所有数据,复制到右侧 扩展功能:右侧列表实现去重复 ...

  4. CSS3实现Tooltip提示框飞入飞出动画

    原文:CSS3实现Tooltip提示框飞入飞出动画 我们见过很多利用背景图片制作的Tooltip提示框,但是缺点是扩展比较麻烦,要经常改动图片.还有就是利用多层CSS的叠加实现,但是效果比较生硬,外观 ...

  5. Fragment防止自动清理 (ViewPager滑动时，滑出屏幕后被清理)（转）

    原文链接:http://www.xuebuyuan.com/2231000.html 这个问题网上搜一搜发现帖子很多,但是博主试了几种好像没有说的那么好用 一. 比如给ViewPager设置长度,以增 ...

  6. 4412开发板升级4.2之后改了logo开机后屏幕闪解决办法

    荣品4412开发板升级到4.2请注意增加虚拟机内存. 问:荣品4412开发板升级到Android4.2之后,改了logo.4412板子开机后,过一会屏幕就一闪一闪,是什么原因? Android4.2编 ...

  7. android自己定义控件之飞入飞出控件

    近期呢,本人辞职了.在找工作期间.不幸碰到了这个求职淡季,另外还是大学生毕业求职的高峰期,简历发了无数份却都石沉大海.宝宝心里那是一个苦啊! 翻着过去的代码,本人偶然找到了一个有意思的控件.那时本人还 ...

  8. 解决iscroll.js上拉下拉刷新手指划出屏幕页面无法回弹问题

    博客已迁移至http://zlwis.me. 使用过iscroll.js的上拉下拉刷新效果的朋友应该都碰到过这个问题:在iOS的浏览器中,上拉或下拉刷新时,当手指划出屏幕后,页面无法弹回.很多人因为解 ...

  9. css过渡——实现元素的飞入飞出

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 【12】link与@import的区别

    [12]link与@import的区别 link是HTML方式, @import是CSS方式 link最大限度支持并行下载,@import过多嵌套导致串行下载,出现FOUC link可以通过rel=& ...

  2. sql server 2008启动时：已成功与服务器建立连接，但是在登录过程中发生错误。(provider:命名管道提供程序，error:0-管道的另一端上无任何进程。)(Microsoft SQL Server,错误:233) 然后再连接：错误：18456

    问题:sql server 2008启动时:已成功与服务器建立连接,但是在登录过程中发生错误.(provider:命名管道提供程序,error:0-管道的另一端上无任何进程.)(Microsoft S ...

  3. Relay Race （DP）

    Furik and Rubik take part in a relay race. The race will be set up on a large square with the side o ...

  4. gcc/g++ 编译时出现：“对’xxxx’未定义的引用，collect2: error: ld returned 1 exit status” 的错误

    出现的问题: 在使用 make 编译实现一个程序时,出现了下面的错误.查看程序源文件所在的目录时发现程序已经完成了编译,并生成了 list_repo.o 的文件,说明是在程序链接生成可执行文件时发生了 ...

  5. selenium 与 firefox版本不兼容报错

    org.openqa.selenium.firefox.NotConnectedException: Unable to connect to host 127.0.0.1 on port 7055 ...

  6. 简单题（bzoj 1683）

    Description 你有一个N*N的棋盘,每个格子内有一个整数,初始时的时候全部为0,现在需要维护两种操作: 命令 参数限制 内容 1 x y A 1<=x,y<=N,A是正整数 将格 ...

  7. javaweb学习总结(八)——HttpServletResponse对象(二)（转）

    (每天都会更新至少一篇以上,有兴趣的可以关注)转载自孤傲苍狼 一.HttpServletResponse常见应用——生成验证码 1.1.生成随机图片用作验证码 生成图片主要用到了一个BufferedI ...

  8. Codevs 1299 切水果 水一发

    时间限制: 1 s 空间限制: 128000 KB 题目等级 : 大师 Master 题目描述 Description 简单的说,一共N个水果排成一排,切M次,每次切[L,R]区间的所有水果(可能有的 ...

  9. [MFC] TabControl选项卡的使用

    MFC中,因项目需要使用TabControl ,使用过程中发现,MFC中的TabControl与C#的TabControl不同,不能通过属性来创建选项页,只能代码生成绑定. 以下为具体的实现方法步骤: ...

  10. Codeforces Round #287 (Div. 2) D. The Maths Lecture [数位dp]

    传送门 D. The Maths Lecture time limit per test 1 second memory limit per test 256 megabytes input stan ...