【原】iOS动画系列教程(一):CoreAnimation动画形象教程【包会】

在iOS中,图形可分为以下几个层次:

越上层,封装程度越高,动画实现越简洁越简单,但是自由度越低;反之亦然。本文着重介绍Core Animation层的基本动画实现方案。

在iOS中,展示动画可以类比于显示生活中的“拍电影”。拍电影有三大要素:演员+剧本+开拍,概念类比如下:

演员--->CALayer,规定电影的主角是谁
剧本--->CAAnimation,规定电影该怎么演,怎么走,怎么变换
开拍--->AddAnimation,开始执行

一、概念介绍

1.1CALayer是什么呢?

CALayer是个与UIView很类似的概念,同样有layer,sublayer...,同样有backgroundColor、frame等相似的属性,我们可以将UIView看做一种特殊的CALayer,只不过UIView可以响应事件而已。一般来说,layer可以有两种用途,二者不互相冲突:一是对view相关属性的设置,包括圆角、阴影、边框等参数,更详细的参数请点击这里;二是实现对view的动画操控。因此对一个view进行core animation动画,本质上是对该view的.layer进行动画操纵。

1.2CAAnimation是什么呢?

CAAnimation可分为四种:

  • 1.CABasicAnimation
  • 通过设定起始点,终点,时间,动画会沿着你这设定点进行移动。可以看做特殊的CAKeyFrameAnimation
  • 2.CAKeyframeAnimation
  • Keyframe顾名思义就是关键点的frame,你可以通过设定CALayer的始点、中间关键点、终点的frame,时间,动画会沿你设定的轨迹进行移动
  • 3.CAAnimationGroup
  • Group也就是组合的意思,就是把对这个Layer的所有动画都组合起来。PS:一个layer设定了很多动画,他们都会同时执行,如何按顺序执行我到时候再讲。
  • 4.CATransition
  • 这个就是苹果帮开发者封装好的一些动画

二、动手干活

实践出真知,看个例子就知道:

比如我们想实现一个类似心跳的缩放动画可以这么做,分为演员初始化、设定剧本、电影开拍三个步骤:

- (void)initScaleLayer
{
    //演员初始化
    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];
    [scaleLayer release];

    //设定剧本
    CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    scaleAnimation.fromValue = [NSNumber numberWithFloat:1.0];
    scaleAnimation.toValue = [NSNumber numberWithFloat:1.5];
    scaleAnimation.autoreverses = YES;
    scaleAnimation.fillMode = kCAFillModeForwards;
    scaleAnimation.repeatCount = MAXFLOAT;
    scaleAnimation.duration = 0.8;

    //开演
    [scaleLayer addAnimation:scaleAnimation forKey:@"scaleAnimation"];
}
- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view from its nib.
    [self initScaleLayer];
}

效果请参考附图中的绿色方块(我不懂在mac下怎么录制gif图,先借用kk的图)。其他效果可以依葫芦画瓢轻松实现。想要实现不同的效果,最关键的地方在于CABasicAnimation对象的初始化方式中keyPath的设定。在iOS中有以下几种不同的keyPath,代表着不同的效果:

此外,我们还可以利用GroupAnimation实现多种动画的组合,在GroupAnimation中的各个动画类型是同时进行的。

 1 - (void)initGroupLayer
 2 {
 3     //演员初始化
 4     CALayer *groupLayer = [[CALayer alloc] init];
 5     groupLayer.frame = CGRectMake(60, 340+100 + kYOffset, 50, 50);
 6     groupLayer.cornerRadius = 10;
 7     groupLayer.backgroundColor = [[UIColor purpleColor] CGColor];
 8     [self.view.layer addSublayer:groupLayer];
 9     [groupLayer release];
10
11     //设定剧本
12     CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
13     scaleAnimation.fromValue = [NSNumber numberWithFloat:1.0];
14     scaleAnimation.toValue = [NSNumber numberWithFloat:1.5];
15     scaleAnimation.autoreverses = YES;
16     scaleAnimation.repeatCount = MAXFLOAT;
17     scaleAnimation.duration = 0.8;
18
19     CABasicAnimation *moveAnimation = [CABasicAnimation animationWithKeyPath:@"position"];
20     moveAnimation.fromValue = [NSValue valueWithCGPoint:groupLayer.position];
21     moveAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(320 - 80,
22                                                                   groupLayer.position.y)];
23     moveAnimation.autoreverses = YES;
24     moveAnimation.repeatCount = MAXFLOAT;
25     moveAnimation.duration = 2;
26
27     CABasicAnimation *rotateAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.x"];
28     rotateAnimation.fromValue = [NSNumber numberWithFloat:0.0];
29     rotateAnimation.toValue = [NSNumber numberWithFloat:6.0 * M_PI];
30     rotateAnimation.autoreverses = YES;
31     rotateAnimation.repeatCount = MAXFLOAT;
32     rotateAnimation.duration = 2;
33
34     CAAnimationGroup *groupAnnimation = [CAAnimationGroup animation];
35     groupAnnimation.duration = 2;
36     groupAnnimation.autoreverses = YES;
37     groupAnnimation.animations = @[moveAnimation, scaleAnimation, rotateAnimation];
38     groupAnnimation.repeatCount = MAXFLOAT;
39     //开演
40     [groupLayer addAnimation:groupAnnimation forKey:@"groupAnnimation"];
41 }
- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view from its nib.
    [self initGroupLayer];
} 

完整的demo工程点CAAnimationDemo.zip下载

=======================================================

转载请注明 编程小翁@博客园,邮件[email protected],欢迎各位与我在C/C++/Objective-C/机器视觉等领域展开交流!

时间: 2024-10-13 11:24:58

【原】iOS动画系列教程(一):CoreAnimation动画形象教程【包会】的相关文章

【iOS开发系列】物理仿真动画UIDynamic (1)

iOS开发拓展篇-UIDynamic(简单介绍) [一]简单介绍 1.什么是UIDynamic UIDynamic是从iOS 7开始引入的一种新技术,隶属于UIKit框架 可以认为是一种物理引擎,能模拟和仿真现实生活中的物理现象 如:重力.弹性碰撞等现象 2.物理引擎的价值 广泛用于游戏开发,经典成功案例是"愤怒的小鸟" 让开发人员可以在远离物理学公式的情况下,实现炫酷的物理仿真效果 提高了游戏开发效率,产生更多优秀好玩的物理仿真游戏 3.知名的2D物理引擎 Box2d Chipmun

【原】iOSCoreAnimation动画系列教程(二):CAKeyFrameAnimation【包会】

======================================================= 转载请注明 编程小翁@博客园,邮件[email protected],欢迎各位与我在C/C++/Objective-C/机器视觉等领域展开交流! ======================================================= 在上一篇专题文章[原]iOSCoreAnimation动画系列教程(一):CABasicAnimation[包会]中我们学习了iO

【原】Github系列之二:开源 支持多种形式多种动画风格的推送小红点WZLBadge(iOS)

概述 今天我们来实现一个在iOS中让人又爱又恨的推送“小红点”WZLBadge.那什么是badge呢?当后台有数据更新需要让用户知道时,在按钮或者其他控件上显示一个“小红点”提醒用户.注意,这里的“小红点”仅仅是泛指,实际的视图可以天马行空,在这个版本中我们先实现以下几种: 小红点 红底白字“new” 红底白字数字 为了让小红点显示后更加醒目,在这个版本中我又实现了三种不同的状态动画(status animation): 心脏跳动效果(WBadgeAnimTypeScale) 呼吸灯效果(WBa

"MindManager"学习iOS系列之"CAAnimation-核心动画"详解,让你的应用“动”起来。

"MindManager"学习iOS系列之"CAAnimation-核心动画"详解,思维导图内展示了CAAnimation-核心动画的大多数基本功能和知识,每个part都有代码讲解,展示出CAAnimation-核心动画的清晰轮廓,编者提供了"JPG"."SWF"."PDF"."Word"."Mmap"格式的源文件供给使用.注意:JPG格式仅为图片总览,SWF格式使用

Vue.js 系列教程 5:动画

原文:intro-to-vue-5-animations 译者:nzbin 译者的话:经过两周的努力,终于完成了这个系列的翻译,由于时间因素及个人水平有限,并没有详细的校对,其中仍然有很多不易理解的地方.我和原作者的初衷一样,希望大家能够通过这个系列文章有所收获,至少可以增加学习的乐趣,我也在学习的路上,所学心得必将与大家共勉. 这是 JavaScript 框架 Vue.js 五篇教程的第五部分.在这个系列的最后一部分,我们将学习动画(如果你了解我,你知道这一章迟早会来).这不是一个完整的指南,

iOS关于CoreAnimation动画知识总结

一:UIKit动画 在介绍CoreAnimation动画前先简单介绍一下UIKit动画,大部分简单的动画都可以使用UIKit动画实现,如果想实现更复杂的效果,则需要使用Core Animation了:UIKit动画有两种写法:它不仅可以针对视图还可以针对其它控件: 1:第一种写法是利用属性,结合beginAnimations.commitAnimations -(void)animationOfUIKit { UIView *redView=[[UIView alloc]initWithFram

IOS开发系列 --- 核心动画

原始地址:http://www.cnblogs.com/kenshincui/p/3972100.html 概览 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌.在这里你可以看到iOS中如何使用图层精简非交互式绘图,如何通过核心动画创建基础动画.关键帧动画.动画组.转场动画,如何通过UIView的装饰方法对这些动画操作进行简化等.在今天的文章里您可以看到动画操作在iOS中是如何简单和高效,很多原来想做但是苦于没有思路的动画在iOS中将变得越发简

iOS关于CoreAnimation动画知识总结(转)

一:UIKit动画 在介绍CoreAnimation动画前先简单介绍一下UIKit动画,大部分简单的动画都可以使用UIKit动画实现,如果想实现更复杂的效果,则需要使用Core Animation了:UIKit动画有两种写法:它不仅可以针对视图还可以针对其它控件: 1:第一种写法是利用属性,结合beginAnimations.commitAnimations -(void)animationOfUIKit { UIView *redView=[[UIView alloc]initWithFram

iOS开发系列-动画绘图CALayer

代码下载地址:https://github.com/wwpeter/WW-MotionDemo.git 概览 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌.在这里你可以看到iOS中如何使用图层精简非交互式绘图,如何通过核心动画创建基础动画.关键帧动画.动画组.转场动画,如何通过UIView的装饰方法对这些动画操作进行简化等.在今天的文章里您可以看到动画操作在iOS中是如何简单和高效,很多原来想做但是苦于没有思路的动画在iOS中将变得越发简单:

影视动画 Premiere视频教程 AE CS5专业入门教程 绘声绘影X6入门提高 3DS MAX三维动画教程

热门推荐电脑办公计算机基础知识教程 Excel2010基础教程 Word2010基础教程 PPT2010基础教程 五笔打字视频教程 Excel函数应用教程 Excel VBA基础教程 WPS2013表格教程 更多>平面设计PhotoshopCS5教程 CorelDRAW X5视频教程 Photoshop商业修图教程 Illustrator CS6视频教程 更多>室内设计3Dsmax2012教程 效果图实例提高教程 室内设计实战教程 欧式效果图制作实例教程 AutoCAD2014室内设计 Aut