iOS Animation

原文

http://www.cocoachina.com/ios/20160517/16290.html

概念

Core Animation(核心动画)是一组功能强大、效果华丽的动画API,无论在iOS系统或者在你开发的App中,都有大量应用。
核心动画位于UIKit的下一层,相比UIView动画,它可以实现更复杂的动画效果。
核心动画作用在CALayer(Core animation layer)上,CALayer从概念上类似UIView,我们可以将UIView看成是一种特殊的CALayer(可以响应事件)。
实际上,每一个view都有其对应的layer,这个layer是root layer:

 @property(nonatomic,readonly,strong)                 CALayer  *layer;

给view加上动画,本质上是对其layer进行操作,layer包含了各种支持动画的属性,动画则包含了属性变化的值、变化的速度、变化的时间等等,两者结合产生动画的过程。
核心动画和UIView动画的对比:UIView动画可以看成是对核心动画的封装,和UIView动画不同的是,通过核心动画改变layer的状态(比如position),动画执行完毕后实际上是没有改变的(表面上看起来已改变)。
总体来说核心动画的优点有:

  • 性能强大,使用硬件加速,可以同时向多个图层添加不同的动画效果
  • 接口易用,只需要少量的代码就可以实现复杂的动画效果。
  • 运行在后台线程中,在动画过程中可以响应交互事件(UIView动画默认动画过程中不响应交互事件)。
使用实例
- (void)startAnimation
{
    CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    anim.duration = 1.5; // 动画持续1.5s

    anim.repeatCount = HUGE_VALF; //动画重复次数 default is 1

    //    anim.beginTime = 1.0f;// 动画延迟时间 default is 0

    //动画执行的过程中 先快后慢  先慢后快  匀速 等方式完成动画
    //    anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

    anim.autoreverses = YES; //动画结束的时候是否要按原来返回到原来的状态


    anim.fromValue = @1.0f; //动画改变起始值

    anim.toValue = @0.5; //动画改变结束值

    //    anim.byValue  和初始状态相比的改变量


    //    anim.delegate = self;//delegate 可以监听到动画开始和动画结束

    // 动画结束的时候,保持结束时的状态
    anim.removedOnCompletion = NO;
    // 始终保持最新的效果
    anim.fillMode = kCAFillModeForwards;

    [self.tipImageView.layer addAnimation:anim forKey:@"key"];
}
核心动画类的常用属性

keyPath:可以指定keyPath为CALayer的属性值,并对它的值进行修改,以达到对应的动画效果,需要注意的是部分属性值是不支持动画效果的。

CATransform3D Key Paths : (example)transform.rotation.z
     //rotation.x 上下翻转
     //rotation.y  左右翻转
     //rotation.z  中心点旋转
     //rotation 旋轉
     //scale.x 
     //scale.y
     //scale.z
     //scale 缩放
     //translation.x
     //translation.y
     //translation.z
     //translation 平移
     //CGPoint Key Paths : (example)position.x
     //x 横向平移
     //y 纵向平移
     //CGRect Key Paths : (example)bounds.size.width
     //origin.x 
     //origin.y
     //origin
     //size.width 宽度变化
     //size.height 高度变化
     //size 大小变化
     //opacity 透明度
     //backgroundColor 背景色渐变
     //cornerRadius 变为圆角
     //borderWidth 边框
     //contents 内容替换(view1变为view2)
     //Shadow Key Path:
     //shadowColor 加阴影颜色
     //shadowOffset 加阴影大小
     //shadowOpacity 加阴影透明度
     //shadowRadius  加阴影圆角

duration:动画的持续时间
repeatCount:动画的重复次数,default is 1,始终播放使用HUGE_VALF
beginTime:动画延迟执行时间,default is 0
timingFunction:动画的时间节奏控制,使用[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]创建实例

timingFunctionName的enum值如下:
     kCAMediaTimingFunctionLinear 匀速
     kCAMediaTimingFunctionEaseIn 慢进
     kCAMediaTimingFunctionEaseOut 慢出
     kCAMediaTimingFunctionEaseInEaseOut 慢进慢出
     kCAMediaTimingFunctionDefault 默认值(慢进慢出)

fillMode:视图在非Active时的行为,重要,某些情况下动画不运行的原因

CA_EXTERN NSString * const kCAFillModeForwards
    CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAFillModeBackwards
    CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAFillModeBoth
    CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAFillModeRemoved
    CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);

key:[self.tipImageView.layer addAnimation:anim forKey:@"key"];key值在某些情况下必填,出现过在collectionViewCell中添加动画时因为key值为空造成的个别cell动画停止。
delegate:可以监听到动画开始和动画结束

代理方法如下:
     - (void)animationDidStart:(CAAnimation *)anim;  //动画开始
     - (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag; //动画结束
CABasicAnimation

CABasicAnimation可以设定keyPath的起点,终点的值,动画会沿着设定点进行移动,CABasicAnimation可以看成是只有两个关键点的特殊的CAKeyFrameAnimation。

- (void)position {
    CABasicAnimation * ani = [CABasicAnimation animationWithKeyPath:@"position"];
    ani.toValue = [NSValue valueWithCGPoint:self.centerShow.center];
    ani.removedOnCompletion = NO;
    ani.fillMode = kCAFillModeForwards;
    ani.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    [self.cartCenter.layer addAnimation:ani forKey:@"PostionAni"];
}

CABasicAnimation只能实现系统定义的一些简单动画。

实例,一组绕某一点旋转的动画实现:

- (void)addAnimation
{
    CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
    anim.toValue = [NSNumber numberWithFloat:-M_PI_4 / 2];
    anim.duration = 10;
    anim.autoreverses = YES;
    anim.removedOnCompletion = NO;
    anim.fillMode = kCAFillModeForwards;
    anim.repeatCount = MAXFLOAT; //如果这里想设置成一直自旋转,可以设置为MAXFLOAT,否则设置具体的数值则代表执行多少次
    [self setAnchorPoint:CGPointMake(0.84, 0.186) forView:self.sunshineView];
    [self.sunshineView.layer addAnimation:anim forKey:@"anim"];
}

其中,绕某一点旋转要设置该点为AnchorPoint(锚点),锚点范围为(0.0, 0.0)--(1.0,1.0),在IOS中右上为(1.0,0.0)。同时,在设置锚点的同时,会造成原视图的位移,原因未明,所以要手动偏移回去。使用如下代码手动设置锚点。

- (void)setAnchorPoint:(CGPoint)anchorPoint forView:(UIView *)view
{
    CGPoint oldOrigin = view.frame.origin;
    view.layer.anchorPoint = anchorPoint;
    CGPoint newOrigin = view.frame.origin;

    CGPoint transition;
    transition.x = newOrigin.x - oldOrigin.x;
    transition.y = newOrigin.y - oldOrigin.y;

    view.center = CGPointMake(view.center.x - transition.x, view.center.y - transition.y);
}
CAKeyframeAnimation

可以设定keyPath起点、中间关键点(不止一个)、终点的值,每一帧所对应的时间,动画会沿着设定点进行移动。
CAKeyframeAnimation的重要属性:
values:关键帧数组对象,里面每一个元素即为一个关键帧,动画会在对应的时间段内,依次执行数组中每一个关键帧的动画。包括起始点和终点,对象类型。
path:动画路径对象,可以指定一个路径,在执行动画时路径会沿着路径移动,Path在动画中只会影响视图的Position。
keyTimes:设置关键帧对应的时间点,范围:0-1。如果没有设置该属性,则每一帧的时间平分。进度0到0.2到0.6到1.0,类似这样
实现轮播的一段简易代码:

    CAKeyframeAnimation *anim1 = [CAKeyframeAnimation animationWithKeyPath:@"position.x"];
    anim1.repeatCount = HUGE_VALF;
    anim1.duration = animtionDuration;
    anim1.values = @[@(self.frame.size.width/2),@(- self.frame.size.width/2),@(self.frame.size.width*1.5),@(self.frame.size.width/2)];
    anim1.keyTimes = @[[NSNumber numberWithFloat:0.0],[NSNumber numberWithFloat:0.5],[NSNumber numberWithFloat:0.5],[NSNumber numberWithFloat:1.0]];
    anim1.removedOnCompletion = NO;
    // 始终保持最新的效果
    anim1.fillMode = kCAFillModeForwards;
    [self.cloudyView1.layer addAnimation:anim1 forKey:@"anim1"];
    
    CABasicAnimation *anim2 = [CABasicAnimation animationWithKeyPath:@"position.x"];
    anim2.repeatCount = HUGE_VALF;
    anim2.toValue = @(- self.frame.size.width);
    anim2.duration = animtionDuration;
    anim2.autoreverses = YES;
    anim2.removedOnCompletion = NO;
    // 始终保持最新的效果
    anim2.fillMode = kCAFillModeForwards;
    [self.cloudyView2.layer addAnimation:anim2 forKey:@"anim2"];

抖动动画

+ (void)shakeView:(UIView*)viewToShake
{
    CGFloat t =4.0;
    CGAffineTransform translateRight  =CGAffineTransformTranslate(CGAffineTransformIdentity, t,0.0);
    CGAffineTransform translateLeft =CGAffineTransformTranslate(CGAffineTransformIdentity,-t,0.0);
    viewToShake.transform = translateLeft;
    
    [UIView animateWithDuration:0.07 delay:0.0 options:UIViewAnimationOptionAutoreverse | UIViewAnimationOptionRepeat animations:^{
        if (@available(iOS 12.0, *)) { //从顶部开始
            [UIView modifyAnimationsWithRepeatCount:4.0 autoreverses:YES animations:^{
                viewToShake.transform = translateRight;
            }];
        } else {
            [UIView setAnimationRepeatCount:4.0];
            viewToShake.transform = translateRight;
        }
    } completion:^(BOOL finished){
        if(finished){
            [UIView animateWithDuration:0.05 delay:0.0 options:UIViewAnimationOptionBeginFromCurrentState animations:^{
                viewToShake.transform =CGAffineTransformIdentity;
            } completion:NULL];
        }
    }];
}

重要:
+ (void)setAnimationRepeatCount:(float)repeatCount API_DEPRECATED("Use the block-based animation API instead", ios(2.0, 13.0));
iOS13开始放弃使用repeatCount等方法。使用:
modifyAnimationsWithRepeatCount(iOS12+)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 160,706评论 4 366
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 68,002评论 1 301
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 110,462评论 0 250
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,375评论 0 216
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,763评论 3 294
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,849评论 1 224
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 32,033评论 2 317
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,768评论 0 204
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,490评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,734评论 2 253
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,204评论 1 264
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,566评论 3 260
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,227评论 3 241
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,137评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,934评论 0 201
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,926评论 2 283
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,774评论 2 274

推荐阅读更多精彩内容