QIY.gif
從今天起demo的代碼分OC和Swift兩種，以便滿足所有同學的需求蜀踏，但是講解代碼還是OC
突然發(fā)現(xiàn)愛奇藝的視頻加載動畫可以用CAShapeLayer做出來梦谜，之前在提交動畫里已經(jīng)詳細介紹過CAShapeLayer用法及其屬性，不懂得請看iOS動畫之CAShapeLayer(一)提交動畫
任何動畫都是一步步完成的波闹，所以以后遇到復(fù)雜的動畫不要著急一喘，把動畫拆分了驱还，就不難了。
拆分動畫
- 一個圓慢慢畫出來凸克；
- 圓慢慢的消失议蟆；
- 圓消失的同時三角形旋轉(zhuǎn)360度。
一個圓慢慢畫出來
還記得上個文章里的話嗎：理論上萎战，所有描線的動畫你都可以用這種方式先指定一個 path 然后改變 strokeEnd, strokeStart 來實現(xiàn)咐容。
那么一個圓慢慢出來怎么做，首先需要一個path蚂维，path其實是個圓
//畫一個圓
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:self.bounds];
CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.fillColor=[UIColor clearColor].CGColor;
//將路徑賦值給CAShapeLayer
maskLayer.path = path.CGPath;
//設(shè)置路徑的顏色
maskLayer.strokeColor=[UIColor colorWithRed:0.52f green:0.76f blue:0.07f alpha:1.00f].CGColor;
//設(shè)置路徑的寬度
maskLayer.lineWidth=1;
maskLayer.lineCap=kCALineCapRound;
[self.layer addSublayer:maskLayer];
接下來要開始動畫了
self.maskLayer.strokeStart=0;
//設(shè)置strokeEnd的最終值戳粒，動畫的fromValue為0，strokeEnd的最終值為0.98
self.maskLayer.strokeEnd=0.98;
CABasicAnimation *BasicAnimation=[CABasicAnimation animationWithKeyPath:@"strokeEnd"];
BasicAnimation.fromValue=@(0);
BasicAnimation.duration=NSTimeInterval;
BasicAnimation.delegate=self;
[BasicAnimation setValue:@"BasicAnimationEnd" forKey:@"animationName"];
[self.maskLayer addAnimation:BasicAnimation forKey:@"BasicAnimationEnd"];
這樣完成后一個圓就慢慢出現(xiàn)
setup1.gif
圓慢慢的消失
怎么讓一個圓慢慢消失呢虫啥，那請問你怎么讓一個圓出的蔚约？是通過改變strokeEnd從0->0.98
畫圓結(jié)束后strokeEnd為0.98
那么讓strokeStart從0->0.98 strokeStart與strokeEnd一樣那么圓不就消失了嗎
self.maskLayer.strokeStart=0.98;
CABasicAnimation *BasicAnimation=[CABasicAnimation animationWithKeyPath:@"strokeStart"];
BasicAnimation.fromValue=@(0);
BasicAnimation.duration=NSTimeInterval;
BasicAnimation.delegate=self;
[BasicAnimation setValue:@"BasicAnimationStart" forKey:@"animationName"];
[self.maskLayer addAnimation:BasicAnimation forKey:@"BasicAnimationStart"];
setup2.gif
代碼和畫圓差不多，就不多解釋了
圓消失的同時三角形旋轉(zhuǎn)360度
//開始三角形旋轉(zhuǎn)
CABasicAnimation *BasicAnimation=[CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
BasicAnimation.toValue=@(M_PI*2);
BasicAnimation.duration=NSTimeInterval;
BasicAnimation.delegate=self;
[BasicAnimation setValue:@"BasicAnimationRotation" forKey:@"animationName"];
[self.centerImage.layer addAnimation:BasicAnimation forKey:@"BasicAnimationRotation"];
最基本的CABasicAnimation真的不需要多解釋了
如果感覺這篇文章對您有所幫助涂籽，順手點個喜歡苹祟，謝謝啦
代碼放在了GitHub上大家可以下載。
