知识架构

  1. CALayer 图层类
  2. CABasicAnimation 基础动画
  3. CAKeyFrameAnimation 帧动画
  4. CATransition 转场动画
  5. CAAnimationGroup 动画组
  •   layer的基本概念

  其实UIView之所以能显示在屏幕上,完全是因为它内部的一个图层,在创建UIView对象时,UIView内部会自动创建一个图层(CALyer对象),通过UIView的layer属性可以访问这个层。

  •   基本属性

    Bounds;position;frame;backgroundColor; opacity;cornerRadius;borderWidth; borderColor;shadowOffset; shadowColor; shadowOpacity;

    我写了一些简单的demo,大家可以看看.......

//

//  ViewController.m

//  简单的动画

//

//  Created by 李盼盼 on 16/5/16.

//  Copyright © 2016年 李盼盼. All rights reserved.

//

#import "ViewController.h"

@interface ViewController ()

@property (strong, nonatomic) CALayer *subLayer;

@property (strong, nonatomic) UIView *redView;

@property (strong, nonatomic) CALayer *subLayer2;

@property (weak, nonatomic) IBOutlet UIImageView *imageView;

@property (assign, nonatomic) NSInteger currentIndex;

@end

@implementation ViewController

- (void)viewDidLoad {

self.view.backgroundColor = [UIColor colorWithRed:234/255.0f green:234/255.0f blue:234/255.0f alpha:1];

[super viewDidLoad];

//    行走的方块

_subLayer = [[CALayer alloc]init];

_subLayer.frame = CGRectMake(50, 50, 50, 50);

_subLayer.backgroundColor = [UIColor redColor].CGColor;

[self.view.layer addSublayer:_subLayer];

//    旋转放大的方块

_redView = [[UIView alloc]initWithFrame:CGRectMake(200, 100, 50, 50)];

_redView.backgroundColor = [UIColor yellowColor];

[self.view addSubview:_redView];

//    慢慢放大的方块

_subLayer2 = [[CALayer alloc]init];

_subLayer2.frame = CGRectMake(50, 250, 50, 50);

_subLayer2.backgroundColor = [UIColor grayColor].CGColor;

[self.view.layer addSublayer:_subLayer2];

//    仿真翻页

_imageView.image = [UIImage imageNamed:@"a0.jpg"];

_currentIndex = 0;

}

#pragma mark ---- 上一张

- (IBAction)Last:(UIButton *)sender {

if (_currentIndex == 0) {

_currentIndex = 12;

}else{

_currentIndex--;

}

_imageView.image = [UIImage imageNamed:[NSString  stringWithFormat:@"a%ld.jpg",_currentIndex]];

//    转场动画

CATransition *anim = [CATransition animation];

//    过度类型

anim.type = @"pageUnCurl";

//    动画过渡方向

anim.subtype = @"fromTop";

anim.duration = 0.8;

[_imageView.layer addAnimation:anim forKey:nil];

}

#pragma mark ---- 下一张

- (IBAction)next:(UIButton *)sender {

if (_currentIndex == 12) {

_currentIndex = 0;

}else{

_currentIndex++;

}

_imageView.image = [UIImage imageNamed:[NSString  stringWithFormat:@"a%ld.jpg",_currentIndex]];

CATransition *anim = [CATransition animation];

anim.type = @"pageCurl";

anim.subtype = kCATransitionFromBottom;

anim.duration = 0.8;

[_imageView.layer addAnimation:anim forKey:nil];

}

-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{

#pragma mark ---- 旋转放大的动画

CABasicAnimation *rotationAnim = [CABasicAnimation animation];

//    rotationAnim.duration = 2;

rotationAnim.keyPath = @"transform.rotation.z";

rotationAnim.toValue = @(3.14);

rotationAnim.repeatCount = MAXFLOAT;

CABasicAnimation *scaleAnim = [CABasicAnimation animation];

scaleAnim.duration = 2;

scaleAnim.keyPath = @"transform";

scaleAnim.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(2, 2, 0)];

scaleAnim.repeatCount = MAXFLOAT;

CAAnimationGroup *group = [CAAnimationGroup animation];

group.animations = @[rotationAnim,scaleAnim];

group.duration = 5;

group.fillMode = kCAFillModeForwards;

group.removedOnCompletion = NO;

[_redView.layer addAnimation:group forKey:nil];

}

-(void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{

#pragma mark ---- 行走的方块

CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];

anim.keyPath = @"position";

anim.duration = 5.0;

NSValue *value = [NSValue valueWithCGPoint:CGPointMake(50, 50)];

NSValue *value1 = [NSValue valueWithCGPoint:CGPointMake(50, 100)];

NSValue *value2 = [NSValue valueWithCGPoint:CGPointMake(100, 100)];

NSValue *value3 = [NSValue valueWithCGPoint:CGPointMake(100, 150)];

NSValue *value4 = [NSValue valueWithCGPoint:CGPointMake(100, 150)];

NSValue *value5 = [NSValue valueWithCGPoint:CGPointMake(50, 50)];

anim.values = @[value,value1,value2,value3,value4,value5];

// 设置动画的执行节奏

// kCAMediaTimingFunctionEaseInEaseOut:开始较慢,中间会加速,结束会减速

anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];

[self.subLayer addAnimation:anim forKey:nil];

#pragma mark ---- 慢慢放大的方块

CABasicAnimation *anim1 = [CABasicAnimation animation];

//   动画执行是我时候修改属性

anim1.keyPath = @"bounds";

//    起始值

//    anim1.fromValue = [NSValue valueWithCGRect:CGRectMake(50, 250, 50, 50)];

//    目标值

anim1.toValue = [NSValue valueWithCGRect:CGRectMake(50, 250, 100, 100)];

anim1.delegate = self;

anim1.duration = 5;

[_subLayer2 addAnimation:anim1 forKey:@"animation"];

/**不删除动画,同时保存动画最终效果**/

// 动画结束后自动删除动画

anim.removedOnCompletion = NO;

// 默认保存原来的样式:设置为使用最新的样式

anim.fillMode = kCAFillModeForwards;

}

- (IBAction)removeAnim:(UIButton *)sender {

[_subLayer2 removeAnimationForKey:@"animation"];

}

#pragma mark ---- 动画的代理

-(void)animationDidStart:(CAAnimation *)anim{

NSLog(@"%s",__func__);

}

-(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{

NSLog(@"%s",__func__);

}

@end

效果如下:

iOS简单动画的更多相关文章

  1. IOS 简单动画 首尾式动画

    首尾式动画 首尾式动画即通过实现控件由初始状态到结束状态的过程.(主要表现在控件的Frame 透明度 ) // // ViewController.m // CX 简单动画 // // Created ...

  2. iOS 简单动画 序列帧动画

    - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{ NSLog(@"旭宝爱吃 ...

  3. iOS 简单动画 block动画

    - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{ UIView * view = [ ...

  4. iOS简单动画效果:闪烁、移动、旋转、路径、组合

    #define kDegreesToRadian(x) (M_PI * (x) / 180.0) #define kRadianToDegrees(radian) (radian*180.0)/(M_ ...

  5. iOS CAReplicatorLayer 简单动画

    代码地址如下:http://www.demodashi.com/demo/11601.html 写在最前面,最近在看学习的时候,偶然间发现一个没有用过的Layer,于是抽空研究了下,本来应该能提前记录 ...

  6. iOS block-base 动画简单用法+关键帧动画设置线性变化速度的问题

    本文转载至 http://www.tuicool.com/articles/aANBF3m 时间 2014-12-07 20:13:37  segmentfault-博客原文  http://segm ...

  7. IOS 核心动画之CAKeyframeAnimation - iBaby

    - IOS 核心动画之CAKeyframeAnimation - 简单介绍 是CApropertyAnimation的子类,跟CABasicAnimation的区别是:CABasicAnimation ...

  8. Swift 实现iOS Animation动画教程

    这是一篇翻译文章.原文出处:http://www.raywenderlich.com/95910/uiview-animation-swift-tutorial 动画( animation)是iOS用 ...

  9. iOS 开发--动画

    在iOS开发中,制作动画效果是最让开发者享受的环节之一.一个设计严谨.精细的动画效果能给用户耳目一新的效果,吸引他们的眼光 —— 这对于app而言是非常重要的.我们总是追求更为酷炫的实现,如果足够仔细 ...

随机推荐

  1. 初学者对于MVC架构模式学习与理解

    理解MVC的工作原理,明白一个网页是如何显示出来的 之前一直盲目的在慕课上看视频,脑袋里想着要理解mvc,看了mvc相关的视频,看完之后就觉得空白白的,M,V,C各代表什么我知道,但是这个究竟有啥意思 ...

  2. 【整理】深入理解拉格朗日乘子法(Lagrange Multiplier) 和KKT条件

    在求解最优化问题中,拉格朗日乘子法(Lagrange Multiplier)和KKT(Karush Kuhn Tucker)条件是两种最常用的方法.在有等式约束时使用拉格朗日乘子法,在有不等约束时使用 ...

  3. .net core 1.0 中的asp.net identity 的基本使用 序言

    2016年6月底,微软发不了vs2015 up3,在这个版本中,微软做了一些改变,本人目前也尚在学习使用之中,现把学习和使用的心得写出来,错误之处请大家指正. 开发环境:vs2015 UP3   项目 ...

  4. mvc学习(二)

    1.后台foreach 与 html的关系 <table border="1">@for (var i = 0; i < 10; i++){@Html.Raw(i ...

  5. 关于iPhone设备不同显示尺寸适配的一些方法

    关于iPhone设备不同显示尺寸适配的一些方法   ------关于适配的理解------ 1.什么是适配? 适配是对不同硬件和系统软件的适应,硬件包括屏幕显示,处理器,内存等等(目前主要是屏幕适配, ...

  6. 微信小程序wafer

    1.Centos 重启nginx systemctl restart|stop|start|status nginx.service status是状态,可以看出nginx是否正在运行! system ...

  7. IOS 绘图教程Quartz2D

    http://www.cocoachina.com/industry/20140115/7703.html http://www.cnblogs.com/wendingding/p/3803020.h ...

  8. 另一种在WINFORM中使用XNA的方法

    之前在写化学分子模型制作程序的时候,使用一种方法,将WINFORM控件嵌入到XNA窗体中,从而实现了即使用WINFORM窗体控件又使用XNA.最近在写另一个物理运动学课件制作程序,同样使用XNA,但从 ...

  9. [原创]Hadoop默认设置导致NameNode启动失败一例

    看到市面上很多书在讲解Hadoop的时候都轻描淡写的提到了HDFS的设置问题.大多采取的是默认设置,最多也就是设置一些副本数量之类. 笔者在工作中遇到了这样一种情况:每次重启系统之后,NameNode ...

  10. Linux服务器上监控网络带宽的18个常用命令

    [51CTO精选译文]本文介绍了一些可以用来监控网络使用情况的Linux命令行工具.这些工具可以监控通过网络接口传输的数据,并测量目前哪些数据所传输的速度.入站流量和出站流量分开来显示. 一些命令可以 ...