动画.png
keyPath.png
CABasicAnimation：基础动画
// MARK: - 改变位置
-(void)demoBasic1{
CABasicAnimation *basic1 = [CABasicAnimation animationWithKeyPath:@"position.y"];
basic1.duration = 0.8;
basic1.fromValue = @(self.btn.center.y);
basic1.toValue = @(self.btn.center.y + 30);
basic1.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
basic1.repeatCount = HUGE_VALF;
basic1.repeatDuration = 3;
basic1.removedOnCompletion = NO;
basic1.fillMode = kCAFillModeForwards;
[self.btn.layer addAnimation:basic1 forKey:@"basic1"];
}
// MARK: - 改变圆角
-(void)demoBasic2{
CABasicAnimation *basic1 = [CABasicAnimation animationWithKeyPath:@"cornerRadius"];
basic1.duration = 3;
basic1.fromValue = @(0);
basic1.toValue = @(33);
basic1.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
//这两句代码是让视图保持在最终状态，不返回到初始状态
basic1.removedOnCompletion = NO;
basic1.fillMode = kCAFillModeForwards;
[self.btn.layer addAnimation:basic1 forKey:@"basic2"];
}
// MARK: - 改变背景色
-(void)demoBasic3{
CABasicAnimation *basic3 = [CABasicAnimation animationWithKeyPath:@"backgroundColor"];
basic3.fromValue = CFBridgingRelease([UIColor orangeColor].CGColor);
basic3.toValue = (__bridge id _Nullable)([UIColor cyanColor].CGColor);
basic3.duration = 3;
basic3.removedOnCompletion = NO;
basic3.fillMode = kCAFillModeForwards;
[self.btn.layer addAnimation:basic3 forKey:@"basic3"];
}
// MARK: - 缩放
-(void)demoBasic4{
CABasicAnimation *basic = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
basic.duration = 5;
basic.fromValue = @(0.3);
basic.toValue = @(3);
basic.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
basic.removedOnCompletion = NO;
basic.fillMode = kCAFillModeForwards;
[self.btn.layer addAnimation:basic forKey:@"transform.scale"];
}
// MARK: - 旋转
-(void)demoBasic5{
//keyPath: transform.rotation.y, transform.rotation.x, transform.rotation.z
CABasicAnimation *basic = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
basic.duration = 3;
basic.toValue = @(M_PI);
basic.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
basic.removedOnCompletion = NO;
basic.fillMode = kCAFillModeForwards;
[self.btn.layer addAnimation:basic forKey:@"transform.rotation.z"];
}
CAKeyframeAnimation:关键帧动画
// MARK: - 缩放
-(void)demoKey1{
CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale"];
animation.values = @[@(1.0),@(0.8),@(1.2),@(0.8),@(1.0)];
animation.duration = 1;
animation.keyTimes = @[@0.2,@0.4,@0.7,@0.8,@1.0];
animation.fillMode = kCAFillModeForwards;
animation.removedOnCompletion = NO;
[self.btn.layer addAnimation:animation forKey:@"transform.scale"];
}
// MARK: - 旋转
-(void)demoKey2{
CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation"];
NSArray *rotationVelues = @[@(M_PI_4), @(-M_PI_4), @(M_PI_4)];
animation.values = rotationVelues;
animation.duration = 3;
animation.repeatCount = HUGE_VALF;
animation.keyTimes = @[@0.2 ,@0.8 ,@1];
animation.rotationMode = kCAAnimationRotateAuto;
animation.fillMode = kCAFillModeForwards;
animation.removedOnCompletion = NO;
[self.btn.layer addAnimation:animation forKey:@"transform.rotation"];
}
贝塞尔曲线和基础动画
// MARK: - 贝塞尔动画1:划线
-(void)bezierAnimation{
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(0, 450)];
[path addCurveToPoint:CGPointMake(370, 500) controlPoint1:CGPointMake(350, 200) controlPoint2:CGPointMake(300, 600)];
[path setLineWidth:2];
//路径样式
[shapeLayer removeFromSuperlayer];
shapeLayer = [CAShapeLayer layer];
shapeLayer.path = path.CGPath;
shapeLayer.fillColor = [UIColor clearColor].CGColor; //填充色<默认黑色>
shapeLayer.strokeColor = [UIColor blueColor].CGColor; //线色
shapeLayer.lineWidth = 2;
//动画
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
animation.duration = 1;
animation.fromValue = @(0.0);
animation.toValue = @(1);
[shapeLayer addAnimation:animation forKey:@"strokeEnd"];
[self.view.layer addSublayer:shapeLayer];
}
// MARK: - 贝塞尔动画1:画矩形
-(void)bezierAnimation1{
UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(200, 100, 100, 100)];
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.path = path.CGPath;
shapeLayer.strokeColor = [UIColor cyanColor].CGColor;
shapeLayer.fillColor = [UIColor whiteColor].CGColor;
shapeLayer.lineWidth = 2;
shapeLayer.lineJoin = kCALineJoinRound;
//动画
/*
strokeStart:相当于倒放
strokeEnd:从开始到结束
*/
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
animation.duration = 3;
animation.fromValue = @(0.0);
animation.toValue = @(1);
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;
[shapeLayer addAnimation:animation forKey:@"strokeEnd"];
[self.view.layer addSublayer:shapeLayer];
}
CAAnimationGroup：动画组
-(void)groupBase{
CABasicAnimation *animation1 = [CABasicAnimation animationWithKeyPath:@"position"];//位置改变
CABasicAnimation *animation2 = [CABasicAnimation animationWithKeyPath:@"transform.scale"];//缩放
CABasicAnimation *animation3 = [CABasicAnimation animationWithKeyPath:@"cornerRadius"];//圆角
CABasicAnimation *animation4 = [CABasicAnimation animationWithKeyPath:@"backgroundColor"];//背景色
CABasicAnimation *animation5 = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];//旋转（绕z轴）
animation1.fromValue = [NSValue valueWithCGPoint:CGPointMake(110, 300)];
animation1.toValue = [NSValue valueWithCGPoint:CGPointMake(100, 480)];
animation2.toValue = @3.0;
animation3.toValue = @(self.btn.frame.size.width/2);
animation4.fromValue = (__bridge id _Nullable)([UIColor orangeColor].CGColor);
animation4.toValue = (__bridge id _Nullable)([UIColor redColor].CGColor);
animation5.toValue = @(M_PI);
CAAnimationGroup *group = [CAAnimationGroup animation];
group.animations = @[animation1,animation2,animation3,animation4,animation5];
group.duration = 3;
group.fillMode = kCAFillModeForwards;
group.removedOnCompletion = NO;
group.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
[self.btn.layer addAnimation:group forKey:@"group1"];
}
// MARK: - 沿着UIBezierPath曲线移动
-(void)groupBezier{
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(0, 300)];
[path addCurveToPoint:CGPointMake(375, 300) controlPoint1:CGPointMake(100, 0) controlPoint2:CGPointMake(280, 700)];
CABasicAnimation *animation1 = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
animation1.duration = 4;
animation1.fillMode = kCAFillModeForwards;
animation1.removedOnCompletion = NO;
animation1.fromValue = @0;
animation1.toValue = @1;
animation1.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.path = path.CGPath;
shapeLayer.fillColor = [UIColor clearColor].CGColor;
shapeLayer.strokeColor = [UIColor blueColor].CGColor;
shapeLayer.lineWidth = 2;
[shapeLayer addAnimation:animation1 forKey:@"strokeEnd"];
[self.view.layer addSublayer:shapeLayer];
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(4.5 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
CAKeyframeAnimation *keyAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
keyAnimation.path = path.CGPath;
CABasicAnimation *animation2 = [CABasicAnimation animationWithKeyPath:@"cornerRadius"];
animation2.toValue = @(self.btn.frame.size.width/2);
CAAnimationGroup *group = [CAAnimationGroup animation];
group.animations = @[keyAnimation,animation2];
group.duration = 4;
group.fillMode = kCAFillModeForwards;
group.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
group.removedOnCompletion = NO;
[self.btn.layer addAnimation:group forKey:@"position"];
});
}
自己总结一下，不时看一下，希望可以帮到你
