美文网首页
iOS 之动画

iOS 之动画

作者: CarsonChen | 来源:发表于2016-04-22 22:36 被阅读184次

    一. 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 动画时长

    相关文章

      网友评论

          本文标题:iOS 之动画

          本文链接:https://www.haomeiwen.com/subject/rcpxrttx.html