让 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代码

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

//// Color Declarations
UIColor* color1 = [UIColor 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 addCurveToPoint: 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: CGPointMake(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 addCurveToPoint: 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 addCurveToPoint: 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 addCurveToPoint: 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: CGPointMake(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: CGPointMake(458.34, 312.2) controlPoint2: CGPointMake(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: CGPointMake(510.48, 117.41) controlPoint2: CGPointMake(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) controlPoint1: CGPointMake(503.61, 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;
   [bezier2Path stroke];
}

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

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

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

-(void)addLayerToLaunchView
{
   //self.launchView是我添加的一个显示Logo的UIVIew
   CAShapeLayer *layer = [[CAShapeLayer alloc]init];
   layer.path = [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
{
   //  这里面加入的就是刚刚PaintCode粘贴出来的代码
}

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

- (void)startLaunch
{
   [UIView animateWithDuration:0.2 animations:^{
       // 这里先把View缩小
       self.launchView.frame = CGRectMake(0, 0, 50, 50);
       self.launchView.center = self.view.center;
   } completion:^(BOOL finished) {
       [UIView animateWithDuration:0.3 animations:^{
           // 这里要把View放大
           self.launchView.frame = CGRectMake(0, 0, 5000, 5000);
           self.launchView.center = self.view.center;
           self.alpha = 0;
       } completion:^(BOOL finished) {
           [self.launchView removeFromSuperview];
       }];;
   }];
}

接下来运行工程就可以实现应用启动的时候,让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. 【LeetCode】Roman to Integer(罗马数字转整数)

    这道题是LeetCode里的第13道题. 题目说明: 罗马数字包含以下七种字符: I, V, X, L,C,D 和 M. 字符 数值 I 1 V 5 X 10 L 50 C 100 D 500 M 1 ...

  2. zoj2112 主席树动态第k大 (主席树&&树状数组)

    Dynamic Rankings Time Limit: 10 Seconds      Memory Limit: 32768 KB The Company Dynamic Rankings has ...

  3. MySQL5.7 服务 crash 后无法启动

    事发背景 测试环境更换数据盘,直接采取在线将数据目录暴力拷贝到新盘,然后将原服务关闭,启用新盘. 服务是可以正常启动的,但是没多会开发就反应服务down了,错误日志输出 -- :: InnoDB: F ...

  4. 注册苹果开发者账号和iOS9打包上线

    链接: http://www.jianshu.com/p/507ca4e5fde0 http://blog.csdn.net/a283127993/article/details/45828175 i ...

  5. SPOJ GSS5 Can you answer these queries V ——线段树

    [题目分析] GSS1上增加区间左右端点的限制. 直接分类讨论就好了. [代码] #include <cstdio> #include <cstring> #include & ...

  6. 【深度学习一】tensorflow安装

    一. 安装Anaconda https://mirrors.tuna.tsinghua.edu.cn/help/anaconda/ 二.安装tensorflow conda install --cha ...

  7. Java的反射机制和动态代理

    介绍Java注解的时候,多次提到了Java的反射API.与javax.lang.model不同的是,通过反射API可以获取程序在运行时刻的内部结构.反射API中提供的动态代理也是非常强大的功能,可以原 ...

  8. ORACLE:除去回车符,换行符

    ORACLE:除去回车符,换行符 replace(fa,chr(),'') ; --- 除去回车符 replace(fa,chr(),'') ; --- 除去换行符  

  9. c/s委托练习

    今天玩了玩C/S开发,也随便练习了很久不用的委托 父窗体中写的代码 #region 委托与事件传递    public delegate void TextChangedHandler(string ...

  10. POJ2560 Freckles

    Time Limit: 1000MS   Memory Limit: 65536KB   64bit IO Format: %lld & %llu Description In an epis ...