天天看点

iOS开发UI篇—核心动画(关键帧动画)

一、简单介绍

是capropertyanimation的子类,跟cabasicanimation的区别是:cabasicanimation只能从一个数值(fromvalue)变到另一个数值(tovalue),而cakeyframeanimation会使用一个nsarray保存这些数值

属性解析:

values:就是上述的nsarray对象。里面的元素称为”关键帧”(keyframe)。动画对象会在指定的时间(duration)内,依次显示values数组中的每一个关键帧

path:可以设置一个cgpathref\cgmutablepathref,让层跟着路径移动。path只对calayer的anchorpoint和position起作用。如果你设置了path,那么values将被忽略

keytimes:可以为对应的关键帧指定对应的时间点,其取值范围为0到1.0,keytimes中的每一个时间值都对应values中的每一帧.当keytimes没有设置的时候,各个关键帧的时间是平分的

说明:cabasicanimation可看做是最多只有2个关键帧的cakeyframeanimation

二、代码示例

第一种方式:

代码:

iOS开发UI篇—核心动画(关键帧动画)
iOS开发UI篇—核心动画(关键帧动画)

说明:这个项目在storyboard中拖入了一个view,并和控制器中的custom进行了关联。

效果和打印结果:

iOS开发UI篇—核心动画(关键帧动画)

补充:设置动画的节奏

iOS开发UI篇—核心动画(关键帧动画)

第二种方式(使用path)让layer在指定的路径上移动(画圆):

iOS开发UI篇—核心动画(关键帧动画)
iOS开发UI篇—核心动画(关键帧动画)

说明:可以通过path属性,让layer在指定的轨迹上运动。

停止动画:

iOS开发UI篇—核心动画(关键帧动画)
iOS开发UI篇—核心动画(关键帧动画)
iOS开发UI篇—核心动画(关键帧动画)

点击停止动画,程序内部会调用 [self.customview.layer removeanimationforkey:@"wendingding"];停止self.customview.layer上名称标示为wendingding的动画。

三、图标抖动

代码示例:

iOS开发UI篇—核心动画(关键帧动画)
iOS开发UI篇—核心动画(关键帧动画)

说明:图标向左向右偏转一个弧度(4),产生抖动的视觉效果。

程序界面:

iOS开发UI篇—核心动画(关键帧动画)