iOS 之动画

一. UIImageView实现动画效果

UIImageView可以添加一组不同帧的图片,来进行播放动画效果.具体源码如下方法所示:

// imageView使用懒加载方式进行初始化,在ViewDidLoad方法中将其添加在View上即可
- (UIImageView *)imageView {
    if (!_imageView) {
        // 初始化imageView设定其frame
        _imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 200, 200)];
        // 保存图片的可变数据
        NSMutableArray *imageArr = [[NSMutableArray alloc] init];
        // 获取图片
        for (int i = 1; i < 17; i++) {
            // 获取照片名称
            NSString *imageStr = [NSString stringWithFormat:@"gua%d.tiff",i];
            // 获取照片
            UIImage *image = [UIImage imageNamed:imageStr];
            // 添加到可变数组中
            [imageArr addObject:image];
        }
        // 设置imageView的动画组图片
        _imageView.animationImages = imageArr;
        // 设置ImageView的动画时长
        _imageView.animationDuration = 0.5;
        // 设置ImageView的动画播放次数
        _imageView.animationRepeatCount = 100;
        // 开启动画
        [_imageView startAnimating];
    }
    return _imageView;
}

二. UIView基础动画实现方式1

UIKit直接将动画集成到UIView类中,当内部的一些属性发生变化的改变的时候,UIView将为这些改变提供动画支持
执行动画的工作由UIView类自动完成,但仍希望在执行动画时通知视图,为此需要将属性的代码放在
[UIView beginAnimations:nil context:nil]与[UIView commitAnimations]之间.
例如:

    // 开始设置UIView基础动画
    [UIView beginAnimations:@"大小" context:nil];
    // 设置动画时长
    [UIView setAnimationDuration:0.5];
    // 设置动画次数
    [UIView setAnimationRepeatCount:5];
    // 动画反转
    [UIView setAnimationRepeatAutoreverses:YES]; 
    // 改变redview的frame
    self.redView.frame = CGRectMake(0, 0, kScreenWidth, kScreenHight);
    // 确认动画并开始
    [UIView commitAnimations];

注意: UIView的基础动画设置代理之后,要实现两个代理方法1.动画即将开始;2.动画结束.(此两个代理方法需要手动填写)

    // 设置动画的代理
    [UIView setAnimationDelegate:self];
    // 代理方法中动画开始时的回调方法
    [UIView setAnimationWillStartSelector:@selector(animationWillStart:context:)];
    // 代理方法中动画结束时的回调方法
    [UIView setAnimationDidStopSelector:@selector(animationDidStop:context:)];

总结:

    [UIView beginAnimations:nil context:nil];
    //  设置UIView的动画的属性
    [UIView commitAnimations];

三. UIView基础动画实现方式2

UIView的Block实现动画是从iOS 4.0以后才支持的.

  • Block简单动画
    // Duration:为动画的总时长
    [UIView animateWithDuration:3 animations:^{
        // 需要修改的属性
    } completion:^(BOOL finished) {
        // 通过finished的值来进行判断动画是否停止
    }];
  • Block复杂动画
// Duration:动画总时长 delay:动画的延迟播放时间 options:动画的效果(例如:淡入,淡出,等)
    [UIView animateWithDuration:(NSTimeInterval) delay:(NSTimeInterval) options:(UIViewAnimationOptions) animations:^{
        // UIView需要修改的属性
    } completion:^(BOOL finished) {
        // 通过finished的值来判断动画是否停止
    }];
  • Block关键帧动画
    // Duration:为动画的总时长
    // delay:为延迟播放的时间
    // options:为可选项
    // animations:需要执行的动画
    [UIView animateKeyframesWithDuration:4.0 delay:0.0 options:UIViewKeyframeAnimationOptionRepeat animations:^{
        // StarTime:帧动画开始的时间
        // relativeDuration的时间为Duration的百分比,取值在0~1之间
        [UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:0.25 animations:^{
        }];
    } completion:^(BOOL finished) {
        // 判断动画是否结束
        if (finished) {
        }
    }];

注意:UIView的addKeyframeWithRelativeStartTime:的方法必须实现在UIView的animateKeyframesWithDuration的animations的参数中.

  • Spring动画

Spring Animation是一种特殊的动画曲线,自从iOS7开始被广泛运用在系统动画中.

    [UIView animateWithDuration:4.0 // 动画时长
                          delay:2.0 // 动画延迟播放时间
         usingSpringWithDamping:0.5 // 阻尼系数 0.0~1.0
          initialSpringVelocity:40.0// 初始速度
                        options:UIViewAnimationOptionRepeat // 可选项,动画播放方式
                     animations:^{
                         // 需要修改的属性
                     } completion:^(BOOL finished) {
                         // 判断动画是否结束
                         if (finished) {
                         }
                     }];
  • 总结
    Block简单动画,Block复杂动画,Block关键帧动画与Spring动画都是通过Block的闭包完成动画的回调设置;Spring Animation是一种特殊的动画曲线,自从iOS 7开始被广泛运用.

四. CoreAnimation实现方式

  • CoreAnimation简介

CoreAnimation动画位于iOS中的Media层
CoreAnimation动画实现需要添加QuartzCore.Framework
CoreAnimation动画实现基本都是Layer Animation

iOS系统层级划分
Cocoa Touch--------UIKit
Media--------------Core Graphics,Open GL ES, Core Animation
Core Services--------Core Data, Foundation
Core OS

CALayer负责绘制,提供UIView需要展示的内容,不能交互.
UIView负责交互,显示CALayer绘制内容.
CALayer(层)是屏幕上的一个矩形区域,在每一个UIView中都包含一个根CALayer,UIView上的所有视觉效果都是在这个Layer上进行的.
CALayer的外形特征包括.

  1. 尺寸的大小
  2. 背景色
  3. 内容 (可以填充图片或者使用Core Graphics绘制的内容)
  4. 矩形是否有圆角
  5. 矩形是否有阴影

CALayer的常用属性
1.cornerRadius 设置圆角
2.shadowColor 阴影颜色
3.shadowOffset 阴影偏移量
4.shadowRadius阴影模糊程度
5.shadowOpacity 阴影的透明度
6.anchorPoint 锚点 (锚点的中心点始终与position的中心点重合)
7.position 位置信息
8.borderWidth 描边粗细
9.borderColor 描边颜色
10.transform 使CALayer产生3D空间内的平移,缩放,旋转等变化.

  • CABasicAnimation
    示例代码:
CABasicAnimation *basic = [CABasicAnimation animationWithKeyPath:@"opacity"];
    // 是原来的2PI倍
    basic.byValue = @(2 * M_PI);
    // 动画时长
    basic.duration = 4.0;
    // 动画重复次数
    basic.repeatCount = 50;
    // 添加动画
        // forkey为添加标记,删除动画的时候可以通过标记删除.
    [self.greenView.layer addAnimation:basic forKey:@"basic"];
  • CAFrameAnimation
    示例代码:
    CAKeyframeAnimation *keyFrame = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    // layer最初的position值
    float position_x = self.greenView.layer.position.x;
    float position_y = self.greenView.layer.position.y;
    // layer向左晃动的偏移量
    NSValue *leftValue = [NSValue valueWithCGPoint:CGPointMake(position_x - 20, position_y)];
    // layer的原始位置
    NSValue *originValue = [NSValue valueWithCGPoint:CGPointMake(position_x, position_y)];
    // layer向右晃动的偏移量
    NSValue *rightValue = [NSValue valueWithCGPoint:CGPointMake(position_x + 20, position_y)];
    // 添加每一帧的value值(因为参数为对象类型,所以要将CGPoint类的对象转化成为NSValue类型)
    [keyFrame setValues:@[rightValue,originValue,leftValue]];
    // 动画播放次数
    keyFrame.repeatCount = 40;
    // 动画的时长
    keyFrame.repeatDuration = 100.0;
    // 为layer层添加动画
    [self.greenView.layer addAnimation:keyFrame forKey:@"keyframe"];
  • CAAnimationGroup 组合动画
    创建一个组合动画对象,可以将CABasicAnimation于CAFrameAnimation结合.通过设置CAAnimationGroup的重复次数,动画时长来反映出组合动画的效果.

  • CASpringAnimation

简单属性:
1.mass 质量,值越大,弹簧拉伸与压缩的幅度越大
2.stiffness 刚度系数
3.damping 阻尼系数
4.initialVelocity 初始速度
5.settlingDuration 动画时长

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

推荐阅读更多精彩内容

  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥ios动画全貌。在这里你可以看...
    每天刷两次牙阅读 8,480评论 6 30
  • 在iOS实际开发中常用的动画无非是以下四种:UIView动画,核心动画,帧动画,自定义转场动画。 1.UIView...
    请叫我周小帅阅读 3,088评论 1 23
  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌。在这里你可以看...
    F麦子阅读 5,107评论 5 13
  • Core Animation Core Animation,中文翻译为核心动画,它是一组非常强大的动画处理API,...
    45b645c5912e阅读 3,023评论 0 21
  • 1.隐式动画 1.1.什么是隐式动画? 了解什么是隐式动画之前,要先了解是什么根层和非根层.根层:UIView内部...
    GSChan阅读 349评论 0 0