iOS之动画学习笔记一

iOS复杂动画都是和贝塞尔曲线结合在一起的。因此要学会iOS动画,必须先理解贝塞尔曲线。贝塞尔曲线的教程网上很多,这里就不过多的阐述。主要还是来讲讲有关动画方面的东西。

一、画一条简单的曲线

我们先准备一条波浪形的贝塞尔曲线:

CGPoint startPoint =
CGPointMake(50,
300);

CGPoint endPoint =
CGPointMake(300,
300);

CGPoint onePoint =
CGPointMake(150,
200);

CGPoint twoPoint =
CGPointMake(200,
400);

UIBezierPath *path = [UIBezierPath
bezierPath];

path.lineWidth =
10.0f;

path.lineCapStyle =
kCGLineCapRound;

[path moveToPoint:startPoint];

[path addCurveToPoint:endPoint
controlPoint1:onePoint controlPoint2:twoPoint];

但是贝塞尔曲线是一个抽象的对象。它的显示是要基于CALayer的。而CALayer的子类CAShapeLayer就是专门用于显示一条曲线的一个图层类。

CAShapeLayer *layer = [CAShapeLayer
layer];

layer.path = [path CGPath];

layer.strokeColor = [[UIColor
redColor] CGColor];

layer.fillColor = [[UIColor
clearColor] CGColor];

[self.view.layer
addSublayer:layer];

二、给layer层添加动画

这个时候其实已经画好了一条曲线。但是它是静态的,要给它加动画就必须与CAAnimation一起使用。CAAnimation是一个抽象的动画类。下面我拿苹果文档中的一张图来展示Core
Animation的层级关系,它是一个对OpenGL和Core Grapgics的封装。

用给这条曲线添加一个逐渐出现的动画,就要使用CABasicAnimation。其中CABasicAnimation是继承自CAPropertyAnimation的,

CAPropertyAnimation是继承自CAAnimation的。CABasicAnimation就只有三个属性,分别是(id)fromValue、(id)toValue、(id)byValue。

先来看一段代码:

CABasicAnimation *anim = [CABasicAnimation
animation];

anim.keyPath =
@"strokeEnd";

anim.fromValue =
@(0);

anim.toValue =
@(1);

anim.duration =
2;

anim.removedOnCompletion =
NO;

anim.fillMode =
kCAFillModeForwards;

[layer addAnimation:anim
forKey:@"basicAnim"];

此时,我们已经可以动态的画出一段曲线啦。

那么,其中的两个属性fromValue和toValue分别是什么,有什么作用呢?

首先,我们注意到这个三个属性都是id类型的,也就是后面可以跟任何形式的值。

例如,缩放动画:

scaleAnimation.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];

scaleAnimation.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.1,
0.1, 1.0)];

透明度变化:

opacityAnimation.fromValue = [NSNumber numberWithFloat:1.0];

opacityAnimation.toValue = [NSNumber numberWithFloat:0.1];

旋转动画:

tranformAnimation.fromValue = [NSNumber numberWithFloat:0.f];

tranformAnimation.toValue = [NSNumber numberWithFloat:M_PI];

从上我们可以知道,fromValue代表着一个动画的初始状态,toValue代表着一个动画的结束状态。

时间: 2024-10-10 18:02:16

iOS之动画学习笔记一的相关文章

iOS之动画学习笔记二

今天,我趁着项目空暇之余,把有关CAAnimation以及它的子类的相关属性和方法都罗列一遍.以便将来在忘记的时候能够快速拾起. 一.CAAnimation(The base animation class) 它有两个私有属性: void *_attr; uint32_t _flags; // 暂时不知道它的用途 -.- 以后补上. + (instancetype)animation; // 创建动画实例对象的工厂方法 + (nullable id)defaultValueForKey:(NSS

绘图与动画学习笔记(一)

1. 处理图形与动画的框架有 UIKit 高层次的框架,允许开发人员创建视图.窗口.按钮和其他UI相关的组件.它还将一些低级别的API引入到易于使用的高级别API中 Quartz 2D iOS上绘图的主要引擎:UIKit就使用Quartz. Core Graphics 它支持图形上下文.加载图像.绘制图像,等等. Core Animation 顾名思义,是一个帮助开发者在IOS上实现动画的框架 2. UIColor的set方法可设置Graphical context的颜色 - (void)dra

IOS图层Layer学习笔记(二)—— CALayer(上)

IOS图层Layer学习笔记(二)-- CALayer(上) 简介 CALayer是所有图层的基类.主要是一些基本显示属性(位置.锚点.颜色.透明度等).层次关系(子图层和父图层).基本动画等. 接下来分别从常用属性.类方法和实例方法来介绍CALayer的使用.顺序是按头文件的排序来. 常用属性 bounds CGRect,Animatable.控制layer的大小,其中x和y无效果,默认是(0,0). position CGPoint,Animatable.控制layer锚点在父图层的位置.

iOS核心动画工作笔记

1.图层和UIVIew的区别:图层不能和用户进行交互,图层性能高 2.imageVIew的图片显示是在图层上面的子层.用maskBounds剪切时剪的是图层,用户看不到是因为子层挡住了 3.CAlayer的代理方法没有协议,任何对象都能成为他的代理,即NSObject的方法 4.UIVIew内部的根图层的代理就是View本身,所以在UIVIew中的drawRect方法绘图.一个view不能设置代理.因为已经是它图层的代理 5.Core Animation直接作用于CALayer,缺点是动画后图片

Silverlight动画学习笔记(三):缓动函数

(一)定义: 缓动函数:可以将自定义算术公式应用于动画 (二)为什么要用缓动函数: 您可能希望某一对象逼真地弹回或其行为像弹簧一样.您可以使用关键帧动画甚至 From/To/By 动画来大致模拟这些效果,但可能需要执行大量的工作,并且与使用算术公式相比动画的精确性将降低. (三)实例讲解: 1 <UserControl x:Class="AnimationStudy.EasingFunctionAnimation" 2 xmlns="http://schemas.mic

绘图与动画学习笔记(四)

ContextRef 详解 Graphics Context是图形上下文,可以将其理解为一块画布,我们可以在上面进行绘画操作,绘制完成后,将画布放到我们的view中显示即可,view看作是一个画框. Quartz提供了以下几种类型的Graphics Context: Bitmap Graphics Context PDF Graphics Context Window Graphics Context Layer Context Post Graphics Context 先熟悉下CGConte

iOS核心动画学习整理

最近利用业余时间终于把iOS核心动画高级技巧(https://zsisme.gitbooks.io/ios-/content/chapter1/the-layer-tree.html)看完,对应其中一些知识做了相应的整理,整理为demo(https://github.com/PurpleSweetPotatoes/Layer_learn).此demo中都是基于教程书籍中的编程示例,并加上了注解以方便各位iOS爱好者学习使用. 在这里利用此教程中的基础知识做了2个小demo,活动指示器效果和火焰效

iOS Code Signing 学习笔记&lt;转写&gt;

最近看了objc.io上第17期中的文章 <Inside Code Signing> 对应的中文翻译版 <代码签名探析> ,受益颇深,对iOS代码签名机制有了进一步的认识.想了解详细内容建议大家还是去看原文好了. 下面是对此文章的理解再结合自己之前对该部分的认识写出的学习笔记.本文的前提是已经对非对称加密有了一定的了解. 一.数字签名(digital signature) 对指定信息使用哈希算法,得到一个固定长度的信息摘要,然后再使用 私钥 (注意必须是私钥)对该摘要加密,就得到了

Windows Phone 7 ListBox 列表项渐显加载动画学习笔记

在wp7程序中,当程序功能越来越复杂时,性能问题是我们不得不考虑的一个问题.在聊天列表中,如果聊天项过多,而且项目UI组件足够复杂时, 我们不得不想尽办法让UI尽快加载.所以有一种可行的方案,就是像QQ聊天列表一样,从上至下,列表项逐一加载(加载完第一项,再加载第二项,再加载第三项,给用户尽快的UI响应,也不至于等待到显示所有的列表项. 在我们的例子中,我还给每个列表项显示的过程中加入了渐显动画,这样当列表项足够复杂时,也能表现出比较好的展示效果. 实现的基本原理: 实现的原理也不难,主要的思路