Synacast,乡村春潮全文阅读,生辰八字免费算命
ios开发ui篇—核心动画(关键帧动画)
一、简单介绍
cakeyframeanimation是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
二、代码示例
第一种方式：
代码：
我要评论
9 #import "yyviewcontroller.h"
10
11 @interface yyviewcontroller ()
12 @property (weak, nonatomic) iboutlet uiview *customview;
13
14 @end
15
16 @implementation yyviewcontroller
17
18
19 -(void)touchesbegan:(nsset *)touches withevent:(uievent *)event
20 {
21 //1.创建核心动画
22 cakeyframeanimation *keyanima=[cakeyframeanimation animation];
23 //平移
24 keyanima.keypath=@"position";
25 //1.1告诉系统要执行什么动画
26 nsvalue *value1=[nsvalue valuewithcgpoint:cgpointmake(100, 100)];
27 nsvalue *value2=[nsvalue valuewithcgpoint:cgpointmake(200, 100)];
28 nsvalue *value3=[nsvalue valuewithcgpoint:cgpointmake(200, 200)];
29 nsvalue *value4=[nsvalue valuewithcgpoint:cgpointmake(100, 200)];
30 nsvalue *value5=[nsvalue valuewithcgpoint:cgpointmake(100, 100)];
31 keyanima.values=@[value1,value2,value3,value4,value5];
32 //1.2设置动画执行完毕后，不删除动画
33 keyanima.removedoncompletion=no;
34 //1.3设置保存动画的最新状态
35 keyanima.fillmode=kcafillmodeforwards;
36 //1.4设置动画执行的时间
37 keyanima.duration=4.0;
38 //1.5设置动画的节奏
39 keyanima.timingfunction=[camediatimingfunction functionwithname:kcamediatimingfunctioneaseineaseout];
40
41 //设置代理，开始—结束
42 keyanima.delegate=self;
43 //2.添加核心动画
44 [self.customview.layer addanimation:keyanima forkey:nil];
45 }
46
47 -(void)animationdidstart:(caanimation *)anim
48 {
49 nslog(@"开始动画");
50 }
51
52 -(void)animationdidstop:(caanimation *)anim finished:(bool)flag
53 {
54 nslog(@"结束动画");
55 }
56 @end
说明：这个项目在storyboard中拖入了一个view，并和控制器中的custom进行了关联。
效果和打印结果：
补充：设置动画的节奏
第二种方式（使用path）让layer在指定的路径上移动（画圆）：
代码：
#import "yyviewcontroller.h"
@interface yyviewcontroller ()
@property (weak, nonatomic) iboutlet uiview *customview;
@end
@implementation yyviewcontroller
-(void)touchesbegan:(nsset *)touches withevent:(uievent *)event
{
//1.创建动画对象
cakeyframeanimation *anim = [cakeyframeanimation animation];
anim.duration = 2;
uibezierpath *path = [uibezierpath bezierpath];
[path movetopoint:cgpointmake(50, 50)];
[path addlinetopoint:cgpointmake(300, 50)];
[path addlinetopoint:cgpointmake(300, 400)];
anim.keypath = @"position";
anim.path = path.cgpath;
//设置代理，开始—结束
keyanima.delegate=self;
[self.imagev.layer addanimation:anim forkey:nil];
}
-(void)animationdidstart:(caanimation *)anim42
{
nslog(@"开始动画");
}
-(void)animationdidstop:(caanimation *)anim finished:(bool)flag47
{
nslog(@"结束动画");
}
@end
说明：可以通过path属性，让layer在指定的轨迹上运动。
停止动画：
40 - (ibaction)stoponclick:(uibutton *)sender {
41 //停止self.customview.layer上名称标示为wendingding的动画
42 [self.customview.layer removeanimationforkey:@"wendingding"];
43 }
点击停止动画，程序内部会调用? [self.customview.layer removeanimationforkey:@"wendingding"];
停止self.customview.layer上名称标示为wendingding的动画。
三、图标抖动
代码示例：
9 #import "yyviewcontroller.h"
10 #define angle2radian(angle) ((angle)/180.0*m_pi)
11
12 @interface yyviewcontroller ()
13 @property (weak, nonatomic) iboutlet uiimageview *iconview;
14
15 @end
16
17
18 @implementation yyviewcontroller
19
20 -(void)touchesbegan:(nsset *)touches withevent:(uievent *)event
21 {
22 //1.创建核心动画
23 cakeyframeanimation *keyanima=[cakeyframeanimation animation];
24 keyanima.keypath=@"transform.rotation";
25 //设置动画时间
26 keyanima.duration=0.1;
27 //设置图标抖动弧度
28 //把度数转换为弧度 度数/180*m_pi
29 keyanima.values=@[@(-angle2radian(4)),@(angle2radian(4)),@(-angle2radian(4))];
30 //设置动画的重复次数(设置为最大值)
31 keyanima.repeatcount=maxfloat;
32
33 keyanima.fillmode=kcafillmodeforwards;
34 keyanima.removedoncompletion=no;
35 //2.添加动画
36 [self.iconview.layer addanimation:keyanima forkey:nil];
37 }
38
39 @end
说明：图标向左向右偏转一个弧度（4），产生抖动的视觉效果。
程序界面：
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
网友评论