我們都知道 APP啟動時加載的是LaunchImage 這張靜態圖。現在好多應用啟動時都是動態的,并且右上角可選擇跳過。截圖如下:
這里介紹一下自己在做這種動畫時的一種方案。
啟動圖依然是加載的，只不過是一閃而過，這時候我想到的是拿到當前的LaunchImage圖片，然后進行處理，造成一種改變了LaunchImage動畫的假象。
思路如下:
根據UIBezierPath和CAShapeLayer自定義倒計時進度條，適用于app啟動的時候設置一個倒計時關閉啟動頁面。可以設置進度條顏色，填充顏色，進度條寬度以及點擊事件等。
一. 設置跳過按鈕
ZLDrawCircleProgressBtn.h :
// 跳過按鈕
#import <UIKit/UIKit.h>
typedef void(^DrawCircleProgressBlock)(void);
@interface ZLDrawCircleProgressBtn : UIButton
//set track color
@property (nonatomic, strong) UIColor *trackColor;
//set progress color
@property (nonatomic, strong) UIColor *progressColor;
//set track background color
@property (nonatomic, strong) UIColor *fillColor;
//set progress line width
@property (nonatomic, assign) CGFloat lineWidth;
//set progress duration
@property (nonatomic, assign) CGFloat animationDuration;
/**
* set complete callback
*
* @param lineWidth line width
* @param block block
* @param duration time
*/
- (void)startAnimationDuration:(CGFloat)duration withBlock:(DrawCircleProgressBlock )block;
@end
ZLDrawCircleProgressBtn.m :
初始化相關跳過按鈕及進度圈
#import "ZLDrawCircleProgressBtn.h"
#define degreesToRadians(x) ((x) * M_PI / 180.0)
@interface ZLDrawCircleProgressBtn ()
// 底部進度條圈
@property (nonatomic, strong) CAShapeLayer *trackLayer;
// 表層進度條圈
@property (nonatomic, strong) CAShapeLayer *progressLayer;
@property (nonatomic, strong) UIBezierPath *bezierPath;
@property (nonatomic, copy) DrawCircleProgressBlock myBlock;
@end
@implementation ZLDrawCircleProgressBtn
- (instancetype)initWithFrame:(CGRect)frame
{
if (self == [super initWithFrame:frame]) {
self.backgroundColor = [UIColor clearColor];
[self.layer addSublayer:self.trackLayer];
}
return self;
}
- (UIBezierPath *)bezierPath {
if (!_bezierPath) {
CGFloat width = CGRectGetWidth(self.frame)/2.0f;
CGFloat height = CGRectGetHeight(self.frame)/2.0f;
CGPoint centerPoint = CGPointMake(width, height);
float radius = CGRectGetWidth(self.frame)/2;
_bezierPath = [UIBezierPath bezierPathWithArcCenter:centerPoint
radius:radius
startAngle:degreesToRadians(-90)
endAngle:degreesToRadians(270)
clockwise:YES];
}
return _bezierPath;
}
- (CAShapeLayer *)trackLayer {
if (!_trackLayer) {
_trackLayer = [CAShapeLayer layer];
_trackLayer.frame = self.bounds;
// 圈內填充色
_trackLayer.fillColor = self.fillColor.CGColor ? self.fillColor.CGColor : [UIColor clearColor].CGColor ;
_trackLayer.lineWidth = self.lineWidth ? self.lineWidth : 2.f;
// 底部圈色
_trackLayer.strokeColor = self.trackColor.CGColor ? self.trackColor.CGColor : [UIColor colorWithRed:197/255.0 green:159/255.0 blue:82/255.0 alpha:0.3].CGColor ;
_trackLayer.strokeStart = 0.f;
_trackLayer.strokeEnd = 1.f;
_trackLayer.path = self.bezierPath.CGPath;
}
return _trackLayer;
}
- (CAShapeLayer *)progressLayer {
if (!_progressLayer) {
_progressLayer = [CAShapeLayer layer];
_progressLayer.frame = self.bounds;
_progressLayer.fillColor = [UIColor clearColor].CGColor;
_progressLayer.lineWidth = self.lineWidth ? self.lineWidth : 2.f;
_progressLayer.lineCap = kCALineCapRound;
// 進度條圈進度色
_progressLayer.strokeColor = self.progressColor.CGColor ? self.progressColor.CGColor : [UIColor colorWithRed:197/255.0 green:159/255.0 blue:82/255.0 alpha:1].CGColor;
_progressLayer.strokeStart = 0.f;
CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
pathAnimation.duration = self.animationDuration;
pathAnimation.fromValue = @(0.0);
pathAnimation.toValue = @(1.0);
pathAnimation.removedOnCompletion = YES;
pathAnimation.delegate = self;
[_progressLayer addAnimation:pathAnimation forKey:nil];
_progressLayer.path = _bezierPath.CGPath;
}
return _progressLayer;
}
設置代理回調
#pragma mark -- CAAnimationDelegate
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {
if (flag) {
self.myBlock();
}
}
#pragma mark ---
- (void)startAnimationDuration:(CGFloat)duration withBlock:(DrawCircleProgressBlock )block {
self.myBlock = block;
self.animationDuration = duration;
[self.layer addSublayer:self.progressLayer];
}
二. 啟動頁
ZLStartPageView.h :
露出 顯示引導頁面方法
// 啟動頁
#import <UIKit/UIKit.h>
#define kscreenWidth [UIScreen mainScreen].bounds.size.width
@interface ZLStartPageView : UIView
/**
* 顯示引導頁面方法
*/
- (void)show;
@end
ZLStartPageView.m :
1. 初始化啟動頁
#import "ZLStartPageView.h"
#import "ZLDrawCircleProgressBtn.h"
@interface ZLStartPageView ()
// 啟動頁圖
@property (nonatomic,strong) UIImageView *imageView;
// 跳過按鈕
@property (nonatomic, strong) ZLDrawCircleProgressBtn *drawCircleBtn;
@end
// 倒計時時間
static int const showtime = 3;
@implementation ZLStartPageView
- (instancetype)initWithFrame:(CGRect)frame {
if (self = [super initWithFrame:frame]) {
// 1.啟動頁圖片
_imageView = [[UIImageView alloc]initWithFrame:frame];
_imageView.contentMode = UIViewContentModeScaleAspectFill;
_imageView.image = [UIImage imageNamed:@"LaunchImage_667h"];
[self addSubview:_imageView];
// 2.跳過按鈕
ZLDrawCircleProgressBtn *drawCircleBtn = [[ZLDrawCircleProgressBtn alloc]initWithFrame:CGRectMake(kscreenWidth - 55, 30, 40, 40)];
drawCircleBtn.lineWidth = 2;
[drawCircleBtn setTitle:@"跳過" forState:UIControlStateNormal];
[drawCircleBtn setTitleColor:[UIColor colorWithRed:197/255.0 green:159/255.0 blue:82/255.0 alpha:1] forState:UIControlStateNormal];
drawCircleBtn.titleLabel.font = [UIFont systemFontOfSize:14];
[drawCircleBtn addTarget:self action:@selector(removeProgress) forControlEvents:UIControlEventTouchUpInside];
[self addSubview:drawCircleBtn];
self.drawCircleBtn = drawCircleBtn;
}
return self;
}
2. 顯示啟動頁且完成時候回調移除
- (void)show {
// progress 完成時候的回調
__weak __typeof(self) weakSelf = self;
[weakSelf.drawCircleBtn startAnimationDuration:showtime withBlock:^{
[weakSelf removeProgress];
}];
UIWindow *window = [UIApplication sharedApplication].keyWindow;
[window addSubview:self];
}
3. 移除啟動頁面
// 移除啟動頁面
- (void)removeProgress {
self.imageView.transform = CGAffineTransformMakeScale(1, 1);
self.imageView.alpha = 1;
[UIView animateWithDuration:0.3 animations:^{
self.drawCircleBtn.hidden = NO;
self.imageView.alpha = 0.05;
self.imageView.transform = CGAffineTransformMakeScale(5, 5);
} completion:^(BOOL finished) {
self.drawCircleBtn.hidden = YES;
[self.imageView removeFromSuperview];
}];
}
三. 動態啟動頁的顯示代碼放在AppDeleate中.
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
self.window.rootViewController = [[UINavigationController alloc] initWithRootViewController:[[HomeViewController alloc] init]];
[self.window makeKeyAndVisible];
[self setupStartPageView];
return YES;
}
/**
* 設置啟動頁
*/
- (void)setupStartPageView {
ZLStartPageView *startPageView = [[ZLStartPageView alloc] initWithFrame:self.window.bounds];
[startPageView show];
}
這個時候可以可以測試嘍,效果如下:
動態啟動頁.gif
如果需要啟動頁加載廣告這種啟動頁方案 ,請移步: iOS-APP啟動頁加載廣告
