隱式動畫
//開始動畫事務
[CATransaction begin];
//動畫執行時間
[CATransaction setAnimationDuration:5];
//設置動畫代碼塊
layer.backgroundColor = [UIColor greenColor].CGColor;
//動畫完成時機
[CATransaction setCompletionBlock:^{
NSLog(@"動畫完成");
}];
//提交動畫事務,begin和commit之間改變的CALayer屬性,如果為Animatable,就會執行動畫
[CATransaction commit];
CABaseAnimation
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
//動畫執行時間
animation.duration = 1;
//執行時間
animation.fromValue = @0;
//目標值
animation.toValue = @1;
//動畫時間的消耗曲線
//1.慢-快-慢
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
//2.默認為勻速
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
//貝茲曲線
animation.timingFunction = [CAMediaTimingFunction functionWithControlPoints:.25 :.1 :.25 :.1];
[shaperLayer addAnimation:animation forKey:@"animation"];
坐標繪制
繪制工具: Paint Code
CAShapeLayer *shaperLayer = [CAShapeLayer layer];
shaperLayer.strokeColor = [UIColor redColor].CGColor;
shaperLayer.frame = self.view.frame;
shaperLayer.fillColor = [UIColor clearColor].CGColor;
shaperLayer.lineWidth = 10;
[self.view.layer addSublayer:shaperLayer];
//// Star Drawing
UIBezierPath* starPath = UIBezierPath.bezierPath;
[starPath moveToPoint: CGPointMake(203, 122)];
[starPath addLineToPoint: CGPointMake(234.74, 173.72)];
[starPath addLineToPoint: CGPointMake(288.6, 191.44)];
[starPath addLineToPoint: CGPointMake(254.36, 241.13)];
[starPath addLineToPoint: CGPointMake(255.9, 303.81)];
[starPath addLineToPoint: CGPointMake(203, 282.8)];
[starPath addLineToPoint: CGPointMake(150.1, 303.81)];
[starPath addLineToPoint: CGPointMake(151.64, 241.13)];
[starPath addLineToPoint: CGPointMake(117.4, 191.44)];
[starPath addLineToPoint: CGPointMake(171.26, 173.72)];
[starPath closePath];
shaperLayer.path = starPath.CGPath;
CAKeyFrameAnimation
CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"backgroundColor"];
//動畫執行時間
animation.duration = 5;
id color1 = (__bridge id)[UIColor redColor].CGColor;
id color2 = (__bridge id)[UIColor greenColor].CGColor;
id color3 = (__bridge id)[UIColor blueColor].CGColor;
//關鍵幀的值
animation.values = @[color1,color2,color3];
//關鍵幀出現的時刻
animation.keyTimes = @[@0.2,@0.6,@0.8];
[layer addAnimation:animation forKey:@""];
CALayer *demoLayer = [CALayer layer];
demoLayer.backgroundColor = [UIColor redColor].CGColor;
demoLayer.frame = CGRectMake(100, 100, 30, 30);
[self.view.layer addSublayer:demoLayer];
CAShapeLayer *shaperLayer = [CAShapeLayer layer];
shaperLayer.strokeColor = [UIColor greenColor].CGColor;
shaperLayer.frame = self.view.frame;
shaperLayer.fillColor = [UIColor clearColor].CGColor;
shaperLayer.lineWidth = 4;
[self.view.layer addSublayer:shaperLayer];
CAKeyframeAnimation *aniamtion = [CAKeyframeAnimation animationWithKeyPath:@"position"];
aniamtion.duration = 5;
//// Bezier Drawing
UIBezierPath* bezierPath = UIBezierPath.bezierPath;
[bezierPath moveToPoint: CGPointMake(59.5, 82.5)];
[bezierPath addCurveToPoint: CGPointMake(320.5, 119.5) controlPoint1: CGPointMake(59.5, 82.5) controlPoint2: CGPointMake(303.5, -47.5)];
[bezierPath addCurveToPoint: CGPointMake(45.5, 675.5) controlPoint1: CGPointMake(337.5, 286.5) controlPoint2: CGPointMake(-27.5, 543.5)];
[bezierPath addCurveToPoint: CGPointMake(267.5, 646.5) controlPoint1: CGPointMake(118.5, 807.5) controlPoint2: CGPointMake(209.5, 754.5)];
shaperLayer.path = bezierPath.CGPath;
//設置動畫的路徑
aniamtion.path = bezierPath.CGPath;
//讓圖像的頭部隨著動畫變化而變化
aniamtion.rotationMode = kCAAnimationRotateAuto;
//設置動畫自動回到回復為YES,且完成之后回到原點
aniamtion.autoreverses = YES;
//動畫執行次數為2次
aniamtion.repeatCount = 2;
//表現層停留在動畫完成狀態
aniamtion.fillMode = kCAFillModeForwards;
//動畫完成后不移除,一直處于最后狀態
aniamtion.removedOnCompletion = NO;
[demoLayer addAnimation:aniamtion forKey:@""];
CAAnimationGroup
CAAnimationGroup *group = [CAAnimationGroup animation];
group.animations = @[animation, animation1];
group.duration = 10;
[_animationLayer addAnimation:group forKey:@"group"];
切換動畫CATransition(酷炫效果,網上搜索)
CATransition *transition = [CATransition animation];
//動畫類型
transition.type = kCATransitionReveal;
// 子類型
transition.subtype = kCATransitionFromBottom;
transition.duration = 10;
[_animationLayer addAnimation:transition forKey:@"xx"];