- UIView 动画
- CALay 动画
image.png
UIView 动画:
UIView 动画:UIView的属性动画 就是在一定时间内改变其属性值从而达到动画的效果
[UIView animateWithDuration:0.3 delay:0.3 options:UIViewAnimationOptionCurveEaseOut animations:^{
[self.progressV setAlpha:0.0f];
} completion:^(BOOL finished) {
[self.progressV setProgress:0.0f animated:YES];
}];
CALay 动画:
相关类结构图:
image.png
对一个view进行core animation动画，本质上是对该view的.layer进行动画操纵
1.CABasicAnimation动画:
- 通过设定起始点，终点，时间，动画会沿着你这设定点进行移动。
- 可以实现如:旋转,翻转,位移,缩放,颜色变化,内容变化等动画.
常用KeyPath总结
KeyPath值 说明 使用形式- swift 3.0
transform.scale 比例缩放 0.8
transform.scale.x 缩放宽的比例 0.8
transform.scale.y 缩放高的比例 0.8
transform.rotation.x 围绕x轴旋转 2 * M_PI
transform.rotation.y 围绕y轴旋转 2 * M_PI
transform.rotation.z 围绕z轴旋转 2 * M_PI
backgroundColor 背景颜色的变化 UIColor.red.cgColor
bounds 大小缩放，中心不变 NSValue(cgRect: CGRect(x: 800, y: 500, width: 90, height: 30))
position 位置(中心点的改变) NSValue(cgPoint: CGPoint(x: 40, y: 240))
contents 内容，比如UIImageView的图片 UIImage(named: "to")?.cgImage
opacity 透明度 0.4
contentsRect.size.width 横向拉伸缩放 0.6
contentsRect.size.height 纵向拉伸缩放 0.5
2.CAKeyframeAnimation :
关键帧动画其实通过一组动画类型的值（或者一个指定的路径）和这些值对应的时间节点以及各时间节点的过渡方式来控制显示的动画。关键帧动画可以通过path属性和values属性来设置动画的关键帧。
- 通过path设置动画
path只能控制CGPoint类型的动画属性。如position、anchorPoint、transform.translation等 - 通过values设置动画
values指定了一组离散的关键帧，这些关键帧之间的需要通过插值来进行过渡。这些插值计算方式calculationMode设置
例子:
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:_layer.position];
//确定抛物线的最高点位置 controlPoint
[path addQuadCurveToPoint:finishPoint controlPoint:CGPointMake(ScreenWidth/2 , rect.origin.y-80)];
//关键帧动画
CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
pathAnimation.path = path.CGPath;
- (void)setValuesAnimation
{
CGPoint center = self.view.center;
CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];
animation.keyPath = @"position";
animation.duration = 4;
animation.repeatCount = CGFLOAT_MAX;
animation.delegate = self;
// 计算方式1: kCAAnimationLinear 直线相连进行插值计算
animation.calculationMode = kCAAnimationLinear;
animation.values = @[[NSValue valueWithCGPoint:CGPointMake(center.x-100, center.y-100)],
[NSValue valueWithCGPoint:CGPointMake(center.x+100, center.y-100)],
[NSValue valueWithCGPoint:CGPointMake(center.x+100, center.y+100)],
[NSValue valueWithCGPoint:CGPointMake(center.x-100, center.y+100)],
[NSValue valueWithCGPoint:CGPointMake(center.x-100, center.y-100)]];
animation.keyTimes = @[@(0),@(0.25),@(0.5),@(0.75),@(1)];
animation.timingFunctions = @[[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear],
[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn],
[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut],
[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionDefault]];
[self.layer addAnimation:animation forKey:@""];
if (!_displayLink) {
[self.displayLink addToRunLoop:[NSRunLoop currentRunLoop] forMode:NSDefaultRunLoopMode];
}
}
3.CATrasition(转场动画):
用于做过渡动画或者转场动画，能够为层提供移出屏幕和移入屏幕的动画效果。 其中最主要的就是 type 和 subType 这两个属性。
- 公共Type（官方的SDK其实只提供了四种过渡效果）:
CA_EXTERN NSString * const kCATransitionFade; 淡出效果
CA_EXTERN NSString * const kCATransitionMoveIn; 新视图移动到旧视图上
CA_EXTERN NSString * const kCATransitionPush; 新视图推出旧视图
CA_EXTERN NSString * const kCATransitionReveal; 移开旧视图显示新视图
- 私有 type:
NSString *const kCATransitionCube = @"cube";
NSString *const kCATransitionSuckEffect = @"suckEffect";
NSString *const kCATransitionOglFlip = @"oglFlip";
NSString *const kCATransitionRippleEffect = @"rippleEffect";
NSString *const kCATransitionPageCurl = @"pageCurl";
NSString *const kCATransitionPageUnCurl = @"pageUnCurl";
NSString *const kCATransitionCameraIrisHollowOpen = @"cameraIrisHollowOpen";
NSString *const kCATransitionCameraIrisHollowClose = @"cameraIrisHollowClose";
- SubType： 动画类型的方向
CA_EXTERN NSString * const kCATransitionFromRight;
CA_EXTERN NSString * const kCATransitionFromLeft;
CA_EXTERN NSString * const kCATransitionFromTop;
CA_EXTERN NSString * const kCATransitionFromBottom;
- 例子:
CATransition *animation = [CATransition animation];
animation.type = kCATransitionPush;//设置动画的类型
animation.subtype = kCATransitionFromRight; //设置动画的方向
animation.duration = 1.0f;
[testView.layer addAnimation:animation forKey:@"pushAnimation"];
4.CAAnimationGroup (动画组):
Group也就是组合的意思，就是把对这个Layer的所有动画都组合起来。
例子:
CAAnimationGroup *groups = [CAAnimationGroup animation];
groups.animations = @[animation,rotateAnimation];
groups.duration = 2.0f;
groups.removedOnCompletion=NO;
groups.fillMode=kCAFillModeForwards;
groups.delegate = self;
[layer addAnimation:groups forKey:@"group"];
5.CASpringAnimation:
弹簧动画
6.加入购物车动画效果
见 demo