閑來無事,狂進(jìn)了materialup網(wǎng)站,不經(jīng)意間瞅見一個(gè)下載的小動(dòng)畫,覺得很是有趣.于是,我就它給實(shí)現(xiàn)一下~
設(shè)計(jì)靈感
設(shè)計(jì)此效果的作者 Nick;
開始之前你需要了解的
先上一張CAAnimation層次圖:
圖上只是一些類的常用屬性,后邊更多代碼會(huì)講到.
怎樣分解動(dòng)畫
關(guān)于分解gif,其實(shí)用mac 預(yù)覽 開發(fā)gif文件,就可以看到所有幀的圖片.
選取其中幾張動(dòng)畫節(jié)點(diǎn)的圖片存好備用.比如:
考慮到適配問題service類里已經(jīng)提取好了.
怎樣連貫動(dòng)畫
連貫動(dòng)畫是展示你做的效果流暢不流暢,看著舒服不舒服的能力.其實(shí)我是也是嘗試很多遍,讓很多人看了這個(gè)效果,有說別扭的咱就改,咋順咋來.所以讓動(dòng)畫連貫起來尤為重要.
第一,就是要?jiǎng)赢嫻?jié)點(diǎn)要選準(zhǔn)確,定位好動(dòng)畫與動(dòng)畫的銜接處.
第二,讓動(dòng)畫結(jié)束時(shí),恢復(fù)自然狀態(tài),而不是默認(rèn)狀態(tài).盡量不要有太大的差異和不規(guī)整的地方
第三,使用組合動(dòng)畫,掐好時(shí)間節(jié)點(diǎn).
簡單的就說就說這么多,下面我們開始演練代碼~~~~~~
代碼實(shí)現(xiàn)
基本實(shí)現(xiàn)想法
1.自定義UIControl類,因?yàn)樗旧砭褪荱IView子類,做點(diǎn)擊事件的View再好不過.(另一種方式用block點(diǎn)擊回調(diào))
1.使用代理,繼承UIView.
2.點(diǎn)擊區(qū)域是否在圓內(nèi)判斷
3.兩個(gè)CAShapeLayer圓環(huán)+(一個(gè)CAShapeLayer箭頭和CAShapeLayer豎線)組合成箭頭+label
4.一個(gè)service類管理創(chuàng)建所用到的path和animation
service 類
service屬性
@property (nonatomic , assign) CGRect viewRect;
@property (nonatomic, strong) UIBezierPath *progressPath;
/** 關(guān)鍵幀 **/
@property (nonatomic, strong) UIBezierPath *arrowStartPath;
@property (nonatomic, strong) UIBezierPath *arrowDownPath;
@property (nonatomic, strong) UIBezierPath *arrowMidtPath;
@property (nonatomic, strong) UIBezierPath *arrowEndPath;
@property (nonatomic, strong) UIBezierPath *arrowWavePath;
@property (nonatomic, strong) UIBezierPath *verticalLineStartPath;
@property (nonatomic, strong) UIBezierPath *verticalLineEndPath;
@property (nonatomic, strong) UIBezierPath *succesPath;
service方法
/**
* 線到點(diǎn)動(dòng)畫
*
* @param values 關(guān)鍵幀
*
* @return 動(dòng)畫組
*/
- (CAAnimationGroup *)getLineToPointUpAnimationWithValues:(NSArray *)values;
/**
* 箭頭到線的動(dòng)畫
*
* @param values 關(guān)鍵幀
*
* @return 動(dòng)畫組
*/
- (CAAnimationGroup *)getArrowToLineAnimationWithValues:(NSArray *)values;
/**
* 獲取圓圈進(jìn)度
*
* @param progress 當(dāng)前進(jìn)度值
*
* @return path
*/
- (UIBezierPath *)getCirclePathWithProgress:(CGFloat)progress;
/**
* 繪制波浪線
*
* @param offset 偏移量
* @param height 浪高
* @param curvature 浪曲
*
* @return path
*/
- (UIBezierPath *)getWavePathWithOffset:(CGFloat)offset
WaveHeight:(CGFloat)height
WaveCurvature:(CGFloat)curvature;
/**
* 是否顯示進(jìn)度label
*
* @param isShow YES/NO
*
* @return 彈性動(dòng)畫
*/
- (CASpringAnimation *)getProgressAnimationShow:(BOOL)isShow;
/**
* 線變成功動(dòng)畫
*
* @param values 關(guān)鍵幀
*
* @return 動(dòng)畫組
*/
- (CAAnimationGroup *)getLineToSuccessAnimationWithValues:(NSArray *)values;
/**
* 獲取進(jìn)度label Rect
*
* @return Rect
*/
- (CGRect)getProgressRect;
service key
/* animation key */
static NSString * kLineToPointUpAnimationKey = @"kLineToPointUpAnimationKey";
static NSString * kArrowToLineAnimationKey = @"kArrowToLineAnimationKey";
static NSString * kProgressAnimationKey = @"kProgressAnimationKey";
static NSString * kSuccessAnimationKey = @"kSuccessAnimationKey";
service 比例系數(shù)
//箭頭比例
static const double arrowHScale = 130.00/250.00;
//箭頭頭部高比例
static const double arrowTWScale = 96.00/250.00;
static const double arrowTHScale = 50.00/250.00;
//
static const double lineWScale = 176.00/250.00;
static const double pointSpacingScale = 16.00/250.00;
static const double successPoint1ScaleX = 90.00/250.00;
static const double successPoint1ScaleY = 126.00/250.00;
static const double successPoint2ScaleX = 120.00/250.00;
static const double successPoint2ScaleY = 160.00/250.00;
static const double successPoint3ScaleX = 177.00/250.00;
static const double successPoint3ScaleY = 95.00/250.00;
static const NSInteger kSpacing = 2;
download 類
屬性
/**
* 進(jìn)度:0~1
*/
@property (nonatomic, assign) CGFloat progress;
/**
* 進(jìn)度寬
*/
@property (nonatomic, assign) CGFloat progressWidth;
/**
* 是否下載成功
*/
@property (nonatomic, assign) BOOL isSuccess;
/**
* 委托代理
*/
@property (nonatomic, weak) id<JSDownloadAnimationDelegate> delegate;
所有方法預(yù)覽
代理
@protocol JSDownloadAnimationDelegate <NSObject>
@required
- (void)animationStart;
@optional
- (void)animationSuspend;
- (void)animationEnd;
@end
方法比較多,在這不一一展示了,有感興趣的童鞋可以直接去github下載,記得點(diǎn)個(gè)星星哦~~~??
調(diào)用
使用全真網(wǎng)絡(luò)下載
- (void)downTask{
//1M
// NSString*url = @"http://obh6cwxkc.bkt.clouddn.com/146621166967.jpg";
//26M
NSString*url = @"http://obh6cwxkc.bkt.clouddn.com/iStat%20Menus.app.zip";
//文件比較大 200M
// NSString*url = @"http://obh6cwxkc.bkt.clouddn.com/Command_Line_Tools_OS_X_10.11_for_Xcode_7.3.1.dmg";
[self.manager downloadWithURL:url
progress:^(NSProgress *downloadProgress) {
dispatch_async(dispatch_get_main_queue(), ^{
NSString *progressString = [NSString stringWithFormat:@"%.2f",1.0 * downloadProgress.completedUnitCount / downloadProgress.totalUnitCount];
self.downloadView.progress = progressString.floatValue;
});
}
path:^NSURL *(NSURL *targetPath, NSURLResponse *response) {
//
NSString *cachesPath = [NSSearchPathForDirectoriesInDomains(NSCachesDirectory, NSUserDomainMask, YES) lastObject];
NSString *path = [cachesPath stringByAppendingPathComponent:response.suggestedFilename];
return [NSURL fileURLWithPath:path];
}
completion:^(NSURLResponse *response, NSURL *filePath, NSError *error) {
//此時(shí)已在主線程
self.downloadView.isSuccess = YES;
NSString *path = [filePath path];
NSLog(@"************文件路徑:%@",path);
}];
}
最終效果
現(xiàn)實(shí)與理想還是有些差距,希望不是很大,在此分享一下自己研究的經(jīng)驗(yàn),有任何問題都可以Issues我,
Release notes
Version 1.1.0
- 使用代理委托,取消繼承uicontro,利用代理觀察事件觸發(fā)
- 優(yōu)化動(dòng)畫,抽離波浪動(dòng)畫,單獨(dú)利用定時(shí)器動(dòng)畫.
- 真實(shí)模擬網(wǎng)絡(luò)數(shù)據(jù)下載
Version 1.0
- 1.0版下載動(dòng)畫
MIT License
MIT License
Copyright (c) 2016 喬同X
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
