iOS动画

1.UIView动画

UIView动画可以改变的属性:坐标尺寸、视图显示、形态变化

坐标尺寸类
bounds:修改这个属性会结合center属性重新计算frame。建议通过这个属性修改尺寸
frame:修改这个属性通常会导致视图形变的同时也发生移动,然后会重新设置center跟bounds属性
center: 设置后视图会移动到一个新位置,修改后会结合bounds重新计算frame

视图显示类
backgroundColor: 修改这个属性会产生颜色渐变过渡的效果,本质上是系统不断修改了tintColor来实现的
alpha:修改这个属性会产生淡入淡出的效果
hidden:修改这个属性可以制作翻页隐藏的效果

形态变化类
transform:修改这个属性可以实现旋转、形变、移动、翻转等动画效果,其通过矩阵运算的方式来实现,因此更加强大

UIView动画函数
UIView动画总结

2.UIView动画 方法

NSIndexPath *indexPaths = [NSIndexPath indexPathForRow:8 inSection:0];
 [UIView performWithoutAnimation:^{
   [self.collectionView reloadItemsAtIndexPaths:@[indexPaths]];
}];

[self.collectionView performBatchUpdates:^{
        __strong typeof(self) strongSelf = weakSelf;
        [strongSelf reloadData];
    } completion:^(BOOL finished) {}];

3.CALayer动画

4.CoreAnimation 问题不在动画代码上,在动画算法上

核心方法  [CALayer addAnimation:CAAnimation forKey:@""];
/*
 核心动画的几个类:                                                            
                                                        CABasicAnimation [基础]   ->CASpringAnimation
                                    CAPropertyAnimation   
                                                        CAKeyframeAnimation [关键帧]
 CAMediaTiming  ->  CAAnimation  -> CATransition
 
                                    CAAnimationGroup
 */

    ///>  CAMediaTiming
    /*
     CAMediaTiming 协议中定义了时间,速度,重复次数等。属性定义如下:
     beginTime -> 用来设置动画延时,若想延迟1秒,就设置为CACurrentMediaTime()+1,其中CACurrentMediaTime()为图层当前时间。
     duration -> 动画的持续时间。
     speed -> 动画速率,决定动画时间的倍率。当speed为2时,动画时间为设置的duration的1/2。
     timeOffset -> 动画时间偏移量。比如设置动画时长为3秒,当设置timeOffset为1.5时,当前动画会从中间位置开始,并在到达指定位置时,走完之前跳过的前半段动画。
     repeatCount -> 动画的重复次数。
     repeatDuration -> 动画的重复时间。
     autoreverses -> 动画由初始值到最终值后,是否反过来回到初始值的动画。如果设置为YES,就意味着动画完成后会以动画的形式回到初始值。
     fillMode -> 决定当前对象在非动画时间段的行为.比如动画开始之前,动画结束之后。
     ??:其实不只是CAAnimation遵循CAMediaTiming协议,熟悉底层结构的小伙伴们应该知道CALayer也遵循这个协议,所有在一定程度上我们可以通过控制layer本身的协议属性来控制动画节奏。
     */
    
    CAAnimation *animation = [CAAnimation animation]; //1
    
    /*
     CAAnimation 核心动画基础类,不能直接使用。除了CAMediaTiming协议中的方法,增加了CAAnimationDelegate的代理属性等。具体如下:
     timingFunction -> 控制动画的节奏。系统提供的包括:kCAMediaTimingFunctionLinear (匀速),kCAMediaTimingFunctionEaseIn (慢进快出),kCAMediaTimingFunctionEaseOut (快进慢出),kCAMediaTimingFunctionEaseInEaseOut (慢进慢出,中间加速),kCAMediaTimingFunctionDefault (默认),当然也可通过自定义创建CAMediaTimingFunction。
     delegate -> 代理。
     removedOnCompletion -> 是否让图层保持显示动画执行后的状态,默认为YES,也就是动画执行完毕后从涂层上移除,恢复到执行前的状态,如果设置为NO,并且设置fillMode为kCAFillModeForwards,则保持动画执行后的状态。
     */
    
    
    CAPropertyAnimation *propertyAnima = [CAPropertyAnimation animationWithKeyPath:@""]; //2
    CAKeyframeAnimation *frame = [CAKeyframeAnimation animationWithKeyPath:@""]; //3
    CABasicAnimation *baseAnimation = [CABasicAnimation animationWithKeyPath:@""]; //3
    /*
     CAPropertyAnimation 属性动画,针对对象的可动画属性进行效果的设置,不可直接使用。添加属性具体如下:
     keyPath -> CALayer的某个属性名,并通过这个属性的值进行修改,达到相应的动画效果。
     additive -> 属性动画是否以当前动画效果为基础,默认为NO。
     cumulative -> 指定动画是否为累加效果,默认为NO。
     valueFunction -> 此属性配合CALayer的transform属性使用。
     */
    
    /*
     CAKeyframeAnimation 关键帧动画,同样通过keyPath对应属性进行控制,但它可以通过values或者path进行多个阶段的控制。属性如下:
     values -> 关键帧组成的数组,动画会依次显示其中的每一帧。
     path -> 关键帧路径,动画进行的要素,优先级比values高,但是只对CALayer的anchorPoint和position起作用。
     keyTimes -> 每一帧对应的时间,如果不设置,则各关键帧平分设定时间。
     timingFunctions -> 每一帧对应的动画节奏。
     calculationMode -> 动画的计算模式,系统提供了对应的几种模式。
     tensionValues -> 动画张力控制。
     continuityValues -> 动画连续性控制。
     biasValues -> 动画偏差率控制。
     rotationMode -> 动画沿路径旋转方式,系统提供了两种模式。
     */
    
    /*
     CABasicAnimation基础动画,通过keyPath对应属性进行控制,需要设置fromValue以及toValue。添加属性如下:
     fromValue -> keyPath相应属性的初始值。
     toValue -> keyPath相应属性的结束值。
     byValue -> 在不设置toValue时,toValue = fromValue + byValue,也就是在当前的位置上增加多少。
     */
    
    
    CASpringAnimation *springAnima = [CASpringAnimation animationWithKeyPath:@""]; //4
    /*
     继承与 CABasicAnimation
     CASpringAnimation 带有初始速度以及阻尼指数等物理参数的属性动画。我们可以把它看成在不绝对光滑的地面上,一个弹簧拴着别小球,那么我们可以这么理解他的属性(物理知识请问一下牛顿大叔):
     mass -> 小球质量,影响惯性。
     stiffness -> 弹簧的劲度系数。
     damping -> 阻尼系数,地面的摩擦力。
     initialVelocity -> 初始速度,相当于给小球一个初始速度(可正可负,方向不同)
     settlingDuration -> 结算时间,根据上述参数计算出的预计时间,相对于你设置的时间,这个时间比较准确。
     */
    CATransition * transition = [CATransition animation]; //2
    /*
     CATransition 转场动画,系统提供了很多酷炫效果。属性如下:
     type -> 转场动画类型。
     subtype -> 转场动画方向。
     startProgress -> 动画起点进度(整体的百分比)。
     endProgress -> 动画终点进度(整体的百分比)。
     filter -> 自定义转场。
     */
    
    
    CAAnimationGroup *animationGroup = [CAAnimationGroup animation]; //2
    /*
     CAAnimationGroup 动画组,方便对于多动画的统一控制管理。
     animations -> 所有动画效果元素的数组。
     */


@[@"位移",@"缩放",@"透明度",@"旋转",@"圆角",@"spring动画",@"关键帧抖动",@"valueFunction",@"关键帧曲线",@"过渡转场动画",@"动画组"]
设置动画的代码
 [_aniLayer addAnimation:basicAni forKey:NSStringFromSelector(_cmd)];

KeyPath:

/*
 opacity 透明度
 backgroundColor 背景颜色
 cornerRadius 圆角
 borderWidth 边框宽度
 contents 内容
 shadowColor 阴影颜色
 shadowOffset 阴影偏移量
 shadowOpacity 阴影透明度
 shadowRadius 阴影圆角
 ...
 rotation 旋转
 transform.rotation.x
 transform.rotation.y
 transform.rotation.z
 ...
 scale 缩放
 transform.scale.x
 transform.scale.y
 transform.scale.z
 ...
 translation 平移
 transform.translation.x
 transform.translation.y
 transform.translation.z
 ...
 position 位置
 position.x
 position.y
 ...
 bounds
 bounds.size
 bounds.size.width
 bounds.size.height
 bounds.origin
 bounds.origin.x
 bounds.origin.y
 ...
 ...
 */

CATransition *transtion = [CATransition animation];
    transtion.type = @"pageUnCurl";
/*
 fade, 上一张透明度减小 出现下一张
 reveal, 上传一张从左往右消失
 moveIn, 下传一张从原来的左面出现
 push, 推出效果
 
 下面是私有的api 注意使用的话小心审核不过
 cube,立体翻转效果
 suckEffect,收缩效果
 oglFlip,翻转效果
 rippleEffect,水滴波纹效果
 cameraIrisHollowOpen,摄像头打开效果
 cameraIrisHollowClose,摄像头关闭效果
 pageUnCurl,向下翻页效果
 pageCurl,向上翻页效果

 kCATransitionFade 渐变效果
 kCATransitionMoveIn 进入覆盖效果
 kCATransitionPush 推出效果
 kCATransitionReveal 揭露离开效果
 
 subtype : 过渡动画的动画方向
 kCATransitionFromRight 从右侧进入
 kCATransitionFromLeft 从左侧进入
 kCATransitionFromTop 从顶部进入
 kCATransitionFromBottom 从底部进入
 
 */

CoreAnimation(超详细解析核心动画)
CoreAnimation之CALayer基础

4.CALayer动画 transform属性: CGAffineTransform和CATransform3D

核心方法:
[UIView animateWithDuration:1.25f animations:^{
        CGAffineTransform transform = CGAffineTransformMakeRotation(45.0f/180.0f*M_PI);
        layerView.layer.affineTransform = transform;
    }];

    [UIView animateWithDuration:1.25f animations:^{
        CATransform3D transform = CATransform3DIdentity;
        transform = CATransform3DRotate(transform, -(45.0f/180.0f*M_PI), 0.0f, 1.0f, 0.0f);
        layerView.layer.transform = transform;
    }];

仿射变换 - CGAffineTransform
1.CGAffineTransformMakeRotation(angle)旋转 
    CGAffineTransformRotate
2. CGAffineTransformMakeTranslation(tx,ty)移动
     CGAffineTransformTranslate
3.CGAffineTransformMakeScale(sx,sy)缩放 
    CGAffineTransformScale

CoreAnimation之变换
两者的关系

5.贝塞尔曲线。注意主要是画图

keyFrameAni.path = bezierPath.CGPath;
 CAKeyframeAnimation* keyFrameAni = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    keyFrameAni.repeatCount = NSIntegerMax;
    keyFrameAni.path = bezierPath.CGPath;
    keyFrameAni.duration = 15;
    keyFrameAni.beginTime = CACurrentMediaTime() + 1;
    [aniLayer addAnimation:keyFrameAni forKey:@"keyFrameAnimation"];

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1 CALayer IOS SDK详解之CALayer(一) http://doc.okbase.net/Hell...
    Kevin_Junbaozi阅读 5,216评论 3 23
  • iOS核心动画 CoreAnimation框架是基于OpenGL与CoreGraphics图像处理框架的一个跨平台...
    林风098阅读 20,068评论 1 50
  • 前言 最近在尝试一个翻页的动画效果,看了一些资料后,对苹果的动画实现这部分有了一个比较清楚的了解,仅仅止于比较清楚...
    BigDaddy_阅读 7,080评论 1 26
  • 目录 ** UIView 动画 ** ** Core Animation ** ** FaceBook POP动画...
    方向_4d0d阅读 1,678评论 0 3
  • 小区楼下的几株海棠树,多年过去了,已是枝繁叶茂,高耸入云。每年一季的花开似锦,花绽成海,是居所最美的风景。 粉白渐...
    月亭阅读 829评论 13 11