文档章节

iOS动画

云飞扬v5
 云飞扬v5
发布于 2015/08/21 20:15
字数 2007
阅读 121
收藏 3

学习一些常见的动画效果

 

 

编写自己的动画库

制作成CABasicAnimation的category

 

 

 

2.UIView动画

UIView封装的动画

    [UIView animateWithDuration:2.0 animations:^{
        NSLog(@"动画执行之前: %@",NSStringFromCGPoint(self.cutomView.center));
        // 需要执行动画的代码
        self.cutomView.center = CGPointMake(300, 300);
        
    } completion:^(BOOL finished) {
        // 动画执行完毕之后执行的代码
        NSLog(@"动画执行之后: %@",NSStringFromCGPoint(self.cutomView.center));
        
    }];

 

transform的组合效果

  __weak typeof (self) unsafeSelf=self;


    [UIView animateWithDuration:1.0 animations:^(void){
       // unsafeSelf.button.transform=CGAffineTransformMakeScale(0.8, 1.2);
        unsafeSelf.button.transform= CGAffineTransformScale(unsafeSelf.button.transform, 1.2, 1.2);
        unsafeSelf.button.transform=CGAffineTransformTranslate(unsafeSelf.button.transform, 10, 20);
        unsafeSelf.button.transform=CGAffineTransformRotate(unsafeSelf.button.transform, 0.25*M_PI);



    } completion:^(BOOL finished){

    }];

 

 

 

UIView 的动画

点击事件里面的动画,移动一个UIImageView

- (IBAction)startAnimation:(UIButton *)sender {
    [UIView beginAnimations:nil context:nil];
    //设定动画持续时间
    [UIView setAnimationDuration:2];
    //动画的内容
    self.image.frame=CGRectMake(self.image.frame.origin.x, self.image.frame.origin.y+20,
     self.image.frame.size.width, self.image.frame.size.height);


    //动画结束
    [UIView commitAnimations];

}

 

UIView中block形式的动画

 

UIView阻尼动画

 

 

  1. 播放图片的动画

给一个UIImageView播放动画

NSArray *myImages = [NSArray arrayWithObjects:
                         [UIImage imageNamed:@"1.jpg"],
                         [UIImage imageNamed:@"2.jpg"],
                          nil];
    self.image.animationImages = myImages; //animationImages属性返回一个存放动画图片的数组
    self.image.animationDuration = 1; //浏览整个图片一次所用的时间
    self.image.animationRepeatCount = 0; // 0 = loops forever 动画重复次数
    [self.image startAnimating];

 

  1. 作用在layer上的动画CAAnimation

caanimation不会改变对应的属性,只是视觉效果上有变化

CABaseAnimation

    // 1. 创建核心动画
    CABasicAnimation *anima = [CABasicAnimation animation] ;
    // 1.1设置动画类型
//    anima.keyPath = @"transform.translation.x";
    anima.keyPath = @"transform.scale";
    
    // 1.2 设置动画执行完毕之后不删除动画
    anima.removedOnCompletion = NO;
    // 1.3 设置保存动画的最新状态
    anima.fillMode = kCAFillModeForwards;
    // 1.4设置动画时间
    anima.duration = 1;
    
    // 1.5如何动画
//    anima.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeTranslation(0, 100, 1)];
//    anima.toValue = @(100);
    anima.toValue = @(1.5);
 
    
    // 2.添加核心动画到Layer
    [self.myLayer addAnimation:anima forKey:nil];
  // 1. 创建核心动画
    CABasicAnimation *anima = [CABasicAnimation animation] ;
    // 1.1告诉系统要执行什么样的动画
    anima.keyPath = @"position";
    // 设置通过动画将layer从哪
        anima.fromValue = [NSValue valueWithCGPoint:CGPointMake(0, 0)];
    // 到哪(到指定的位置)
    anima.toValue = [NSValue valueWithCGPoint:CGPointMake(200, 300)];
    //    在当前位置的基础上增加多少
    //    anima.byValue = [NSValue valueWithCGPoint:CGPointMake(0, 300)];
    
    // 设置动画时间
    anima.duration = 5;
    
    // 1.2 设置动画执行完毕之后不删除动画
    anima.removedOnCompletion = NO;
    // 1.3 设置保存动画的最新状态
    anima.fillMode = kCAFillModeForwards;
    
    // 2.添加核心动画到Layer
    [self.myLayer addAnimation:anima forKey:nil];

 

 

step1:准备演员(CALayer初始化)

CALayer *scaleLayer = [[CALayer alloc] init];
 scaleLayer.backgroundColor = [UIColor blueColor].CGColor;
 scaleLayer.frame = CGRectMake(60, 20 + kYOffset, 50, 50);
 scaleLayer.cornerRadius = 10;
 [self.view.layer addSublayer:scaleLayer];

 

step2: 准备剧本(配置CABasicAnimation)

 CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale”];
//keyPath不能填错,有特定被选值
 scaleAnimation.fromValue = [NSNumber numberWithFloat:1.0];
 scaleAnimation.toValue = [NSNumber numberWithFloat:1.5];
 scaleAnimation.autoreverses = YES;
 scaleAnimation.fillMode = kCAFillModeForwards;
 scaleAnimation.removedOnCompletion = NO;
 scaleAnimation.repeatCount = MAXFLOAT;
 scaleAnimation.duration = 0.8;

step3: 开演

[scaleLayer addAnimation:scaleAnimation forKey:@"scaleAnimation”];

  • keyPath: 决定基础动画的类型,该值不能随便取,一旦取错就达不到想要的效果。要改变位置就取position,要改变透明度就取opacity,要等比例缩放就取transform.scale...更多key请看下面的表1,要尽量能记住这些内容

  • fromValue: 动画的起始状态值,虽然iOS文档给出的类型是id,不过这里应该传NSValue对象,比如NSNumber(NSNubmer继承自NSValue)。其具体含义

  • autoreverse: 当动画执行到toValue指定的状态时是从toValue的状态逆回去,还是直接跳到fromValue的状态再执行一遍

  • fileMode: fillMode的作用就是决定当前对象过了非active时间段的行为. 非active时间段是指动画开始之前以及动画结束之后。如果是一个动画CAAnimation,则需要将其removedOnCompletion设置为NO,要不然fillMode不起作用. 下面来讲各个fillMode的意义:

  • kCAFillModeRemoved 这个是默认值,也就是说当动画开始前和动画结束后,动画对layer都没有影响,动画结束后,layer会恢复到之前的状态

  • kCAFillModeForwards 当动画结束后,layer会一直保持着动画最后的状态

  • kCAFillModeBackwards 这个和kCAFillModeForwards是相对的,就是在动画开始前,你只要将动画加入了一个layer,layer便立即进入动画的初始状态。因为有可能出现fromValue不是目前layer的初始状态的情况,如果fromValue就是layer当前的状态,则这个参数就没太大意义。

  • kCAFillModeBoth 理解了上面两个,这个就很好理解了,这个其实就是上面两个的合成.动画加入后开始之前,layer便处于动画初始状态,动画结束后layer保持动画最后的状态.

CABasicAnimation的常用keypath

 

 

CAKeyFrameAnimation

圆形轨迹运动的例子

// 1.创建核心动画
    CAKeyframeAnimation *keyAnima = [CAKeyframeAnimation animation];
    // 1.1告诉系统执行什么动画
    keyAnima.keyPath = @"position";
    
    CGMutablePathRef path = CGPathCreateMutable();
    CGPathAddEllipseInRect(path, NULL, CGRectMake(0, 100, 200, 200));
    
    keyAnima.path = path;
    CGPathRelease(path);
    
    // 1.2保存执行完之后的状态
    // 1.2.1执行完之后不删除动画
    keyAnima.removedOnCompletion = NO;
    // 1.2.2执行完之后保存最新的状态
    keyAnima.fillMode = kCAFillModeForwards;
    
    // 1.3设置动画时间
    keyAnima.duration = 2;
    // 2.观察动画什么时候开始执行, 以及什么时候执行完毕
    keyAnima.delegate = self;
    // 3.添加核心动画
    [self.customView.layer addAnimation:keyAnima forKey:@"abc"];

三角形轨迹运动

// 1.创建核心动画
    CAKeyframeAnimation *keyAnima = [CAKeyframeAnimation animation];
    // 1.1告诉系统执行什么动画
    keyAnima.keyPath = @"position";
    
    CGMutablePathRef path = CGPathCreateMutable();
    
    CGPoint lines[] = {
        CGPointMake(50, 50),
        CGPointMake(300, 50),
        CGPointMake(300, 200),
        CGPointMake(50, 50)
    
    };
    const CGAffineTransform trans[] = {
        CGAffineTransformIdentity
    };
    NSInteger size = sizeof(lines)/sizeof(lines[0]);
    
    CGPathAddLines(path, trans, lines, size);
//    CGPathMoveToPoint(path, nil, 50, 50);
//    CGPathAddLineToPoint(path, nil, 300, 50);
//    CGPathAddLineToPoint(path, nil, 300, 200);
//    CGPathCloseSubpath(path);
    
    keyAnima.path = path;
    CGPathRelease(path);
    
    // 1.2保存执行完之后的状态
    // 1.2.1执行完之后不删除动画
    keyAnima.removedOnCompletion = NO;
    // 1.2.2执行完之后保存最新的状态
    keyAnima.fillMode = kCAFillModeForwards;
    
    // 1.3设置动画时间
    keyAnima.duration = 2;
    // 2.观察动画什么时候开始执行, 以及什么时候执行完毕
    keyAnima.delegate = self;
    // 3.添加核心动画
    [self.animationLayer addAnimation:keyAnima forKey:@"abc"];
    

 

代理方法

- (void)animationDidStart:(CAAnimation *)anim
{
    NSLog(@"animationDidStart");
}

- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
{
    NSLog(@"animationDidStop");
}

 

提前结束动画

  // 停止动画
    [self.customView.layer removeAnimationForKey:@"abc"];

 

图标抖动的例子

  #define angle2Radian(angle) ((angle) / 180.0 * M_PI)   
    // 1.创建核心动画
    CAKeyframeAnimation  *keyAnima = [CAKeyframeAnimation animation];
    keyAnima.keyPath = @"transform.rotation";
    // 度数 / 180 * M_PI
    keyAnima.values = @[@(-angle2Radian(4)), @(angle2Radian(4)), @(-angle2Radian(4))];

    keyAnima.removedOnCompletion = NO;
    keyAnima.fillMode = kCAFillModeForwards;
    keyAnima.duration = 0.1;
    
    // 设置动画重复的次数
    keyAnima.repeatCount = MAXFLOAT;
    
    // 2.添加核心动画
    [self.iconView.layer addAnimation:keyAnima forKey:nil];

 

CAAnimationGroup

多种动画效果合并

 

缩放动画

 

CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    scaleAnimation.fromValue = [NSNumber numberWithFloat:1.0];
    scaleAnimation.toValue = [NSNumber numberWithFloat:1.5];
    scaleAnimation.autoreverses = YES;
    scaleAnimation.repeatCount = MAXFLOAT;
    scaleAnimation.duration = 0.8;

 

移动动画

CABasicAnimation *moveAnimation = [CABasicAnimation animationWithKeyPath:@"position"];
    moveAnimation.fromValue = [NSValue valueWithCGPoint:groupLayer.position];
    moveAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(320 - 80, groupLayer.position.y)];
    moveAnimation.autoreverses = YES;
    moveAnimation.repeatCount = MAXFLOAT;
    moveAnimation.duration = 2;

 

旋转动画

CABasicAnimation *rotateAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.x"];
    rotateAnimation.fromValue = [NSNumber numberWithFloat:0.0];
    rotateAnimation.toValue = [NSNumber numberWithFloat:6.0 * M_PI];
    rotateAnimation.autoreverses = YES;
    rotateAnimation.repeatCount = MAXFLOAT;
    rotateAnimation.duration = 2;

 

大剧本

CAAnimationGroup *groupAnnimation = [CAAnimationGroup animation];
    groupAnnimation.duration = 2;
    groupAnnimation.autoreverses = YES;
    groupAnnimation.animations = @[moveAnimation, scaleAnimation, rotateAnimation];
    groupAnnimation.repeatCount = MAXFLOAT;

 

开演

[groupLayer addAnimation:groupAnnimation forKey:@"groupAnnimation”];

 

 

 

CATransition

转场动画

    self.index++;
    if (self.index >7) {
        self.index = 1;
    }
    
    NSString *imageName = [NSString stringWithFormat:@"%d.jpg", self.index];
    UIImage *newImage = [UIImage imageNamed:imageName];
    self.iconView.image = newImage;
    
    // 1.创建核心动画
    CATransition *ca = [CATransition animation];
    // 1.1动画过渡类型
    ca.type = @"fade";//fade ,cube,reveal,push,moveIn

    // 1.2动画过渡方向
    ca.subtype =  kCATransitionFromRight;
    // 1.3动画起点(在整体动画的百分比)
//    ca.startProgress = 0.5;
//    ca.endProgress = 0.5;
    
    
    // 动画时间
    ca.duration = 1;
    
    // 2.添加核心动画
    [self.iconView.layer addAnimation:ca forKey:nil];

 

 

 

 

隐式动画

UIView内部都有一个CALayer(root layer),其他手动创建的CALayer对象,都有隐式动画。

对非root layer的属性(bounds,backgroundColor,position)做改变时,会有默认的动画效果。

position 和 anchorPoint

position (CALayer在父layer的位置)

anchorPoint

(0,0) 左上角

(0.5,0.5)中心点

   CALayer *layer=[CALayer layer];
    layer.backgroundColor=[UIColor yellowColor].CGColor;
    layer.bounds=CGRectMake( 0,  0, 100, 100);
    layer.position=CGPointMake(100, 100);
     layer.anchorPoint=CGPointMake(1, 0.5);
         [self.view.layer addSublayer:layer];
    self.layer=layer;
    
    //target action 
    self.layer.backgroundColor=[UIColor redColor].CGColor;

 

 

UIViewController转场效果

 

push的动画

 

 

 

动画效果演示

渐变出现,渐变消失

//将UILabel的位置放在视图上方
    UILabel *label=[[UILabel alloc]initWithFrame:CGRectMake(100,-100, 100, 100)];
    label.backgroundColor=[UIColor yellowColor];
    label.alpha=0;
    [self.view addSubview:label];


    //将视图的下移进入视图,并逐渐增大alpha
    [UIView animateWithDuration:2 animations:^{
        label.alpha=1;
        label.transform=CGAffineTransformTranslate(label.transform, 0, 200);

    } completion:^(BOOL finished){
        label.alpha=1;

    }];
    //延时进行第二次动画处理,逐渐减少alpha
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(3 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        [UIView animateWithDuration:2 animations:^{
            label.alpha=0;
        } completion:^(BOOL finished){

        }];
    });

 

 

 

 

几种常见的动画效果的实现

https://my.oschina.net/u/2360054/blog/785388

 

 

//TODO:

1整理成知识点

2完善git代码仓库

问题1,如何对一个UIView,编写一个CABasicAnimation 让视图不停地旋转

问题2,如何编写一个CAKeyFrameAnimation实现沿着路径运动

问题3,如何编写一个组合动画

问题4,UIViewController转场动画

问题5,自定义present的动画

问题6,

 

参考资料

 

 

http://www.cocoachina.com/ios/20160526/16456.html

 

© 著作权归作者所有

云飞扬v5
粉丝 14
博文 105
码字总数 67465
作品 0
金华
私信 提问
系统学习iOS动画之零:说明和目录

动画制作很有趣,可以为用户界面注入活力。 如果使用得当,动画可以向用户传达信息,并将用户注意力吸引到界面的重要部分。 之前也做过一些iOS动画,但一直没有系统学习过,这次我用RW网站的...

Andy_Ron
2018/12/21
0
0
iOS 11.2 首个测试版发布,修复计算器运算错误 Bug

苹果今天向开发者发布了 iOS 11.2 第一个测试版。iOS 11.2 修复了计算器应用在快速输入时,会导致运算结果出错的 Bug。计算器 Bug 在 iOS 11 测试阶段就存在,直到 iOS 11.2 发布前,一直没有...

达尔文
2017/10/31
1K
6
UIView Animations 学习笔记(二)定制动画效果及切换效果

目录 UIView Animations 学习笔记(一)简介及API说明 UIView Animations 学习笔记(二)定制动画效果及切换效果 UIView Animation 学习笔记 应用示例 二、视图切换定制 2.1 基础说明 要创建...

灰大羊
2015/08/12
188
0
ios中应用Lottie解决动画问题

作为一名iOS工程师,深知复杂动画的痛苦,下面我们来介绍下Lottie来解决日常的动画难题。 Lottie的简单介绍: 使用Lottie开发的流程是: 设计师在AE中设计完成你的动画,通过bodymoving插件导...

威廉云霄
02/20
0
0
iOS高仿QQ侧滑控件、下载框架、动画效果、扫一扫、颜色变化、K线图等源码

iOS精选源码 仿京东"加入购物车"转场动画(http://www.code4app.com/thread-28162-1-1.html) ColorTool(颜色转换)(http://www.code4app.com/thread-29256-1-1.html) Swift 专业版K线(http://w......

sunnyaigd
2018/04/17
57
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周六乱弹 —— 早上儿子问我他是怎么来的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @凉小生 :#今日歌曲推荐# 少点戾气,愿你和这个世界温柔以待。中岛美嘉的单曲《僕が死のうと思ったのは (曾经我也想过一了百了)》 《僕が死の...

小小编辑
今天
338
6
Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
今天
11
0
计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
6
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
7
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部