简单动画 (三)
紧接着上一讲,我们今天完成常见简单动画的另外2 部分----- CAKeyframeAnimation以及CAAnimationGroup
首先我们先总结一下: 我们添加动画 都是添加到layer 上的 方法是
[self.view.layer addAniamtionForKey:@" "];
而我们创建动画一般要设置keyPath
CAKeyframeAnimation* ani=[CAKeyframeAnimation animationWithKeyPath:@"position"];
我们常见的和动画相关的 keyPath 有如下列表
transform.rotation.x 围绕x轴翻转。y,z同理 参数：角度
transform.rotation 默认围绕z轴
transform.scale.x x方向缩放。y,z同理
transform.scale 所有方向缩放
transform.translation.x x轴方向移动,参数：x轴上的坐标。y,z同理
transform.translation 移动到的点
zPosition 平面的位置
opacity 透明度
backgroundColor 背景颜色 参数：颜色 (id)[[UIColor redColor] CGColor]
cornerRadius layer圆角
borderWidth 边框宽度
bounds 大小 参数：CGRect
contents 内容 参数：CGImage
contentsRect 可视内容 参数：CGRect 值是0～1之间的小数
position 位置,效果和transform.rotation差不多
shadowColor 阴影颜色
shadowOffset 阴影偏移
shadowOpacity 阴影透明度
shadowRadius 阴影角度
一 CAKeyframeAnimation 动画的实现
先简单解读主要的几个常用属性
@interface CAKeyframeAnimation : CAPropertyAnimation
@property(nullable, copy) NSArray *values;
@property(nullable) CGPathRef path;
@property(nullable, copy) NSArray*keyTimes;
@property(nullable, copy) NSArray*timingFunctions;
values NSArray对象，里面的元素称为”关键帧”(keyframe)。动画对象会在指定的时间(duration)内，依次显示values数组中的每一个关键帧
path 可以设置一个CGPathRef\CGMutablePathRef,让层跟着路径移动。path只对CALayer的anchorPoint和position起作用。如果你设置了path，那么values将被忽略
keyTimes 可以为对应的关键帧指定对应的时间点,其取值范围为[0,1],keyTimes中的每一个时间值都对应values中的每一帧.当keyTimes没有设置的时候,各个关键帧的时间是平分的
1 values方式实现
先上代码
#pragma mark value 实现
-(void)animationsWithValues
{
CAKeyframeAnimation* ani=[CAKeyframeAnimation animationWithKeyPath:@"position"];
CGFloat px=80;
CGFloat py=80;
NSValue* val1=[NSValue valueWithCGPoint:CGPointMake(px, py)];
NSValue* val2 =[NSValue valueWithCGPoint:CGPointMake(kScreeenWidth-px, py)];
NSValue * val3=[NSValue valueWithCGPoint:CGPointMake(kScreeenWidth-px, kScreeenHeight-py)];
NSValue* val4=[NSValue valueWithCGPoint:CGPointMake(px, kScreeenHeight-py)];
NSValue* val5=val1;
//位置
ani.values=@[val1,val2,val3,val4,val5];
//重复次数
ani.repeatCount=1000;
//完成后是否移除
ani.removedOnCompletion=NO;
ani.fillMode=kCAFillModeForwards;
//动画执行时间
ani.duration=4.0;
ani.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
[self.keyButton.layer addAnimation:ani forKey:@"values"];
}
效果图
2 path 方式实现
#pragma mark path 方式实现
-(void)keyFrameAnimationWithPath
{
CAKeyframeAnimation* ani=[CAKeyframeAnimation animationWithKeyPath:@"position"];
//绘图
CGMutablePathRef path=CGPathCreateMutable();
//路线rect 和 path
CGFloat px=80;
CGFloat py=80;
//调用CGPathde 方法
CGPathAddRect(path, NULL, CGRectMake(px, py, kScreeenWidth-2*px, kScreeenHeight-2*py));
ani.path=path;
CGPathRelease(path);
ani.repeatCount=1000;
ani.removedOnCompletion=NO;
ani.fillMode=kCAFillModeForwards;
ani.duration=8.0;
ani.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
[self.keyButton.layer addAnimation:ani forKey:@"path"];
}
效果图
3 keyTimes 实现
pragma mark keyTimes 实现
-(void)keyFrameAniamtionWithKeyTimes
{
CAKeyframeAnimation* animation=[CAKeyframeAnimation animationWithKeyPath:@"position.x"];
//animation.keyPath=@"transform.translation.x";
animation.values=@[@10,@100, @(-100),@100,@0];
//关键帧指定对应的时间点
animation.keyTimes=@[@0 ,@(1/6),@(3/6),@(5/6),@(1)];
animation.duration=6;
animation.additive=YES;
animation.repeatCount=1000;
[self.keyButton.layer addAnimation:animation forKey:@"keyTimes"];
}
2 CAAnimationGroup
简单的理解就是动画组合,也就是一次执行多个动画
#pragma mark 动画组合
-(void)animationGroup
{
//动画1 旋转
CABasicAnimation* animation1=[CABasicAnimation animationWithKeyPath:@"transform.rotation"];
animation1.toValue=@(M_PI/2);
//缩放动画
CABasicAnimation* aniamtion2=[CABasicAnimation animationWithKeyPath:@"transform.scale"];
aniamtion2.toValue=@(2);
//创建动画组
CAAnimationGroup* group=[[CAAnimationGroup alloc]init];
group.duration=4;
group.fillMode=kCAFillModeForwards;
group.repeatCount=1000;
group.removedOnCompletion=NO;
group.animations=@[animation1,aniamtion2];
[self.keyButton.layer addAnimation:group forKey:nil];
}
动画效果
几种简单的动画就介绍完了,以后有更多发现楼主会更新的,另外推荐一款录制动画gif的利器LICEcap,录制gif灰常好用 ,实在是程序员展现动画的必备神器.....
