前言
相信大家都見過Twitter APP的加載界面，logo飛出屏幕的感覺很是生動(dòng)。可能你會(huì)說不就是一張圖片的縮放嗎？沒錯(cuò)放一張圖片確實(shí)可以實(shí)現(xiàn)，但是會(huì)不會(huì)覺得用代碼將logo畫出來會(huì)更優(yōu)化呢？更加減少APP的體積，純天然無添加有沒有？可能你會(huì)覺得代碼勾畫太麻煩了，其實(shí)不然，PaintCode這款軟件可以自動(dòng)生成你的圖案代碼，簡直厲害到飛起。如圖是模仿Twitter的加載界面。
正文
1、Sketch
在運(yùn)用PaintCode之前呢，需要先用到Sketch這款軟件，目的是制作SVG格式的文件導(dǎo)入到PaintCode，不多說直接上工具。
SVG （可縮放矢量圖形）
SVG可縮放矢量圖形（Scalable Vector Graphics）是基于可擴(kuò)展標(biāo)記語言（XML），用于描述二維矢量圖形的一種圖形格式。SVG是W3C("World Wide Web ConSortium" 即 " 國際互聯(lián)網(wǎng)標(biāo)準(zhǔn)組織")在2000年8月制定的一種新的二維矢量圖形格式，也是規(guī)范中的網(wǎng)絡(luò)矢量圖形標(biāo)準(zhǔn)。SVG嚴(yán)格遵從XML語法，并用文本格式的描述性語言來描述圖像內(nèi)容，因此是一種和圖像分辨率無關(guān)的矢量圖形格式。
首先將原圖導(dǎo)入Sketch，如圖：
接著在我們左上角選用insert->vector，我們的鋼筆工具，在圖片的各個(gè)頂點(diǎn)處鏈接起來，鏈接完成后就是我們?nèi)鐖D的樣子：
然后雙擊我們?nèi)我庖粋€(gè)頂點(diǎn)的時(shí)候，右邊一欄會(huì)出現(xiàn)如圖的工具，我們選用Mirrored將四邊做調(diào)節(jié)以貼合logo的軌跡。
最后調(diào)節(jié)后的效果：
最后點(diǎn)擊我們的路徑，右下角會(huì)有Export板，選擇SVG格式后保存即可，到此為止Sketch已經(jīng)完成他的使命了，下面該我們的PaintCode上場(chǎng)了。
2、PaintCode
PaintCode的用法很簡單，直接將上面保存的SVG圖片扔給他就好了，他會(huì)自動(dòng)生成代碼，包括swift和oc，直接將生成的代碼復(fù)制即可。
3、xcode
這時(shí)候回到我們的xcode項(xiàng)目中來，我新建了一個(gè)繼續(xù)于UIView的LaunchViewTwitter類作為整個(gè)啟動(dòng)界面的版面，又添加了launchView屬性，作為顯示logo的view。
我先將PaintCode生成的代碼放進(jìn)bezierPath方法中：
-(UIBezierPath *)bezierPath
{
//PaintCode生成的代碼
}
接著添加launchView和layer：
-(void)addLayerToLaunchView
{
//添加launchView
self.launchView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 150, 150)];
self.launchView.backgroundColor = [UIColor clearColor];
self.launchView.center = self.center;
[self addSubview:self.launchView];
添加layer
CAShapeLayer *layer = [[CAShapeLayer alloc]init];
layer.path = [self bezierPath].CGPath;
layer.bounds = CGPathGetBoundingBox(layer.path);
self.backgroundColor = [UIColor colorWithRed:0.18 green:0.70 blue:0.90 alpha:1.0];
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];
//執(zhí)行動(dòng)畫
[self performSelector:@selector(startLaunch) withObject:nil afterDelay:1.0];
}
為launchView添加動(dòng)畫：
- (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];
}];;
}];
}
此時(shí)加載LaunchViewTwitter的類就寫完了，回到我們主控制器，添加繼承與LaunchViewTwitter的launchView屬性，在viewDidAppear方法中，加載動(dòng)畫類：
- (void)launchAnimation
{
//獲取到LaunchScreen控制器(不要忘記id)
UIViewController *viewController = [[UIStoryboard storyboardWithName:@"LaunchScreen" bundle:nil] instantiateViewControllerWithIdentifier:@"LaunchScreen"];
//獲取LaunchScreen的view
UIView *launchView = viewController.view;
UIWindow *mainWindow = [UIApplication sharedApplication].keyWindow;
launchView.frame = [UIApplication sharedApplication].keyWindow.frame;
[mainWindow addSubview:launchView];
//添加launchView類
self.launchView = [[LaunchViewTwitter alloc]initWithFrame:[UIScreen mainScreen].bounds];
[self.launchView addLayerToLaunchView];
[launchView addSubview:self.launchView];
//最后移除
[UIView animateWithDuration:0.5f delay:2.5f options:UIViewAnimationOptionBeginFromCurrentState animations:^{
launchView.alpha = 0.0f;
} completion:^(BOOL finished) {
[launchView removeFromSuperview];
}];
}
到這里加載界面就做完了，就是我們前言的demo動(dòng)畫。
4、寫在最后
確實(shí)在UI/UE如此豐富的今天，很多時(shí)候一些人性化或者較有設(shè)計(jì)感的界面或動(dòng)畫會(huì)大幅度的提升用戶的好感度，可以讓自己的APP更加充滿活力，畢竟人人看臉的時(shí)代，我們的APP也絕不例外，如果APP太丑的話用戶可能直接就卸了。另外文中的測(cè)試demo在這里同時(shí)如果有什么不清楚的歡迎留言或者到我的github討論。
最后祝大家晚安，老樣子送上一首歌曲【張國榮--心跳呼吸正常】
