1.动画是基于layer实现的。layer为视图层,无交互动作,uiview基于UIResponder(有交互事件)将layer封装,这样uiview既有交互事件又可展示了,即管理layer与交互。动画是视觉上的,因此它是基于视图层layer实现的;
2.层级:多值动画只是自己的为了理解:面试说关键帧动画
? ? ? ? ? ? ? ?单值动画:面试时说基础动画;
3.动画实现步骤:
?(1).初始化动画对象;
?(2).设置需要修改的动画属性的值;
?(3).把动画添加到layer(所有的动画都是添加在layer上,不是view,第一点已讲述);
4.需要注意的点:
(1).动画属性animation.keyPath = @"position";这个值相当于设置center;
(2).若不设置动画时间,默认0.25秒;
(3).隐式动画:(位置,颜色,大小),必须是独立的layer才有隐式动画,uiview(根layer)
(4).锚点anchorPoint:在父视图的相对比例位置,所以范围为0-1;通过锚点做参考实现动画,如设置一个不在中心的锚点做旋转,默认值在中心即(0.5, 0.5);
(5).CALayer的presentationLayer展示层(界面展示)和ModelLayer模型层(存取值):动画中presentationLayer显示动画的值,但此时ModelLayer并未将值存下来,还是旧值。若视图移动到另一个位置时,视图的fram等还是在原来的位置,它的点击交互事件等还是在原来的位置。需要给动画加上animation.removedOnCompletion = NO;animation.fillMode = kCAFillModeForwards;(保持结束状态);
(6).动画有delegate,两个方法一个开始animationDidStart,一个结束animationDidStop。
5.代码-就第二点的类分别做阐述:
(1).简单单值动画CABasicAnimation:
CABasicAnimation * animaiton = [CABasicAnimation animationWithKeyPath:@"position.y"];
? ? //? ? position center
?? ?animaiton.removedOnCompletion = NO;
? ? //? ? kCAFillModeForwards//保持结束时状态
? ? //? ? kCAFillModeBackwards//保持开始时状态
? ? //? ? kCAFillModeBoth//保持两者,我没懂两者是什么概念,实际使用中与kCAFillModeBackwards相同
? ? //? ? kCAFillModeRemoved//移除
? ? animaiton.fillMode = kCAFillModeForwards;
? ? animaiton.repeatCount=MAXFLOAT;//重复次数
? ? animaiton.autoreverses=YES;//是否执行反向动画
? ? animaiton.duration=2;
? ? animaiton.toValue=@400.;
? ? animaiton.delegate=self;
? ? [_rootView.layer addAnimation:animaiton forKey:nil];//所有设置需要在这之前,后面再添加不会被copy到动画里了
(2).多值动画CAKeyframeAnimation:
CAKeyframeAnimation * animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
//? ? animation.values = @[[NSValue valueWithCGPoint:CGPointMake(0, 0)],[NSValue valueWithCGPoint:CGPointMake(100, 100)],[NSValue valueWithCGPoint:CGPointMake(0, 200)]];//指定多值
? ? UIBezierPath *path = [UIBezierPath new];
? ? [pathmoveToPoint:CGPointMake(150, 110)];//第一点终点,后两点为控制点
? ? [pathaddCurveToPoint:CGPointMake(300, 500) controlPoint1:CGPointMake(50, 250) controlPoint2:CGPointMake(400, 300)];
? ?animation.path= path.CGPath;//指定曲线、直线等路径
? ? animation.duration=2;
? ? animation.removedOnCompletion = NO;
? ? animation.fillMode = kCAFillModeForwards;
? ? animation.repeatCount=YES;
? ? animation.autoreverses=NO;
? ? [_rootView.layeraddAnimation:animationforKey:@"keyframe"];
(3).动画组CAAnimationGroup多个动画有相同的设置可不用单独写,写在动画组里,代码更简洁:
CAKeyframeAnimation * animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
? ? UIBezierPath *path = [UIBezierPath new];
? ? //第一点终点,后两点为控制点
? ? [pathmoveToPoint:CGPointMake(150, 110)];
? ? [pathaddCurveToPoint:CGPointMake(300, 500) controlPoint1:CGPointMake(50, 250) controlPoint2:CGPointMake(400, 300)];
? ? CAShapeLayer *lineLayer = [CAShapeLayer layer];
? ? lineLayer.lineWidth=1;
? ? lineLayer.strokeColor = [UIColor greenColor].CGColor;
? ? lineLayer.path= path.CGPath;
? ? lineLayer.fillColor=nil;// 默认为blackColor
? ? [self.view.layeraddSublayer:lineLayer];
? ? animation.path= path.CGPath;//指定路径
? ? CABasicAnimation * animaiton1 = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
? ? animaiton1.toValue=@2.;
? ? CAAnimationGroup *animaGroup = [CAAnimationGroup new];
? ? animaGroup.animations=@[animation,animaiton1];
? ? animaGroup.removedOnCompletion = NO;
? ? animaGroup.fillMode = kCAFillModeForwards;
? ? animaGroup.repeatCount=MAXFLOAT;//重复次数
? ? animaGroup.autoreverses=YES;
? ? animaGroup.duration=2;
? ? animaGroup.delegate=self;
? ? [_rootView.layeraddAnimation:animaGroupforKey:nil];
(4).转场动画CATransition:封装了转场动画类型,如需可直接复制或参考
NSString*constkCATransitionTypeCube =@"cube";//立体翻转
NSString*constkCATransitionTypeOglFlip =@"oglFlip";//平面翻转
NSString*constkCATransitionTypeSuckEffect =@"suckEffect";//右上角扯桌布效果
NSString*constkCATransitionTypeRippleEffect =@"rippleEffect";//很快-视觉上没啥效果
NSString*constkCATransitionTypePageCurl =@"pageCurl";//翻书页效果
NSString*constkCATransitionTypePageUnCurl =@"pageUnCurl";//合单个书页效果
NSString*constkCATransitionTypeCameraIrisHollowOpen =@"cameraIrisHollowOpen";//圆形从里到外
NSString*constkCATransitionTypeCameraIrisHollowClose =@"cameraIrisHollowClose";//圆形从外到里
NSString*constkCATransitionTypeFade =@"fade";//颜色渐变效果
NSString*constkCATransitionTypePush =@"push";//另生成一个渐拉
NSString*constkCATransitionTypeMoveIn =@"moveIn";//另生成一个叠加
NSString*constkCATransitionTypeReveal =@"reveal";//另生成一个发射
以下是代码:
CGFloatr =arc4random()%100/100.f;
? ? CGFloatg =arc4random()%100/100.f;
? ? CGFloatb =arc4random()%100/100.f;
? ? UIColor*color = [UIColorcolorWithRed:rgreen:gblue:balpha:1];
? ? _rootView.backgroundColor = color;
? ? //只能固定方向
? ? CATransition *transition = [CATransition animation];
? ? transition.type = kCATransitionTypeReveal;//动画类型
? ? transition.subtype = kCATransitionFromTop;//动画方向
? ? transition.duration=1.f;
? ? [_rootView.layeraddAnimation:transitionforKey:nil];