前言
這段時間雙十一雙十二小伙伴們都在瘋狂購物，天貓APP應(yīng)該是用得不少，但是天貓加載數(shù)據(jù)的時候不知道大家有沒有注意長什么樣。下面我會簡單的教大家怎么使用Paintcode2.0繪出圖形以及實(shí)現(xiàn)動畫
效果圖
Paintcode繪制路徑
首先打開Panitcode把畫布width設(shè)為54 height設(shè)為27
寬高
然后使用鋼筆工具畫出路徑，或者直接導(dǎo)入Ai文件
鋼筆工具
完成之后直接拷貝下面的路徑代碼
路徑代碼
代碼
- 背景路徑
剛才我們已經(jīng)有了路徑，這個路徑我們要同時作為背景路徑和小圓點(diǎn)運(yùn)動的軌跡所以我寫成了一個方法- (UIBezierPath *)path背景我使用CAShaplayer繪制
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.path = [self path].CGPath;
shapeLayer.fillColor = [UIColor clearColor].CGColor;
shapeLayer.strokeColor = [UIColor grayColor].CGColor;
self.shapeLayer = shapeLayer;
[self.layer addSublayer:shapeLayer];
然后添加了一個小圓點(diǎn)待會按照背景的軌跡運(yùn)動
UIView *ovalView = [[UIView alloc]init];
ovalView.backgroundColor = [UIColor blackColor];
ovalView.ai_viewSize = CGSizeMake(5, 5);
ovalView.layer.cornerRadius = ovalView.ai_width * .5;
ovalView.center = CGPointMake(13.5, 2.5);
self.ovalView = ovalView;
- 動畫
動畫選擇CAKeyframeAnimation
- (void)animationWithLayer:(CALayer*)layer path:(UIBezierPath *)path {
CAKeyframeAnimation *keyAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
[keyAnimation setValue:layer forKey:@"layer"];
keyAnimation.path = path.CGPath;
keyAnimation.repeatCount = MAXFLOAT;
keyAnimation.duration = 5.;
keyAnimation.removedOnCompletion = NO;
keyAnimation.fillMode = kCAFillModeForwards;
[layer addAnimation:keyAnimation forKey:nil];
}
還沒有Paintcode2.0的小伙伴點(diǎn)擊這里破解版
查看完整的源碼第18個cell喜歡的點(diǎn)個star
