CABasicAnimation是放在layer上面的,首先我们先了解一下层的概念.
CALayer的介绍。
CALayer是个与UIView很类似的概念,同样有layer,sublayer、backgroundColor、frame等属性,所以说只在渲染的层次上考虑,他们两者是相同的,唯独一点:UIView可以添加通过方法选择器等添加响应事件。
因为每个UIView都有自己的layer属性,而这个属性的用途有两个:1、设置View的圆角、阴影、边框等,具体属性如下:
1. shadowPath : 设置 CALayer 背景(shodow)的位置
2. shadowOffset : shadow 在 X 和 Y 轴 上延伸的方向,即 shadow 的大小
3. shadowOpacity : shadow 的透明效果
4. shadowRadius : shadow 的渐变距离,从外围开始,往里渐变 shadowRadius 距离
5. masksToBounds : 很重要的属性,可以用此属性来防止子元素大小溢出父元素,如若防止溢出,请设为 true
6. borderWidth 和 boarderColor : 边框颜色和宽度,很常用
7. bounds : 对于我来说比较难的一个属性,测了半天也没完全了解,只知道可以用来控制 UIView 的大小,但是不能控制 位置
8. opacity : UIView 的透明效果
9. cornerRadius : UIView 的圆角
2、设置View的动画。因此对一个UIView进行animation动画,实际上就是对View的layer进行操控的。
而小编下面说的就是如何对其动画进行操控——CAAnimation。
CAAnimation的介绍
CAAnimation可分为四种:
1、CABasicAnimation:通过设定起始点,终点,时间,动画会沿着你这设定点进行移动。可以看做特殊的CAKeyFrameAnimation。
2、CAKeyframeAnimation:Keyframe顾名思义就是关键点的frame,你可以通过设定CALayer的始点、中间关键点、终点的frame,时间,只不过你可以定义它的移动轨迹。
3、CAAnimationGroup:Group也就是组合的意思,就是把对这个Layer的所有动画都组合起来。PS:一个layer设定了很多动画,他们都会同时执行,如何按顺序执行我到时候再讲。
4、CATransition:这个就是苹果帮开发者封装好的一些动画
这里我们拿一个Demo来详细说明,在列举例子之前,我们先看一组key值:就是在初始化CAAnimation的时候用到animationWithKeyPath:(NSString *)key中的key都有哪些.在这里我列举一些我们日常开发常用的key.
transform.rotation.x :延X轴坐标旋转 类型:CGFloat或float * M_PI。
transform.rotation.y:延Y轴坐标旋转 类型:CGFloat或float * M_PI。
transform.rotation.z:延Z轴坐标旋转 类型:CGFloat或float * M_PI。。
transform.rotation:这个与rotation.z是相同的 类型:CGFloat或float * M_PI。
transform.scale:整个layer的比例 类型:CGFloat。
transform.scale.x:x轴坐标比例变化 类型:CGFloat。
transform.scale.y:y轴坐标比例变化 类型:CGFloat。
transform.scale.z:z轴坐标比例变化 类型:CGFloat。
opacity : 透明度,闪烁等动画用 类型:CGFloat 1.0或0.0。
backgroundColor 背景颜色 类型:CGColor。
cornerRadius 圆角 类型:CGFloat。
transform.translation.y:纵向移动 类型:CGMutablePathRef 可自定义
transform.translation.x:横向移动 类型:CGMutablePathRef 可自定义
在设置Animation的属性的时候会有一个属性为fillMode,首先声明若使用此属性,必须先写这写:animation.removedOnCompletion=NO;下面介绍fillMode的各个值:
kCAFillModeRemoved :这个是默认值,也就是说当动画开始前和动画结束后,动画对layer都没有影响,动画结束后,layer会恢复到之前的状态
kCAFillModeForwards :当动画结束后,layer会一直保持着动画最后的状态
kCAFillModeBackwards :这个和kCAFillModeForwards是相对的,就是在动画开始前,你只要将动画加入了一个layer,layer便立即进入动画的初始状态并等待动画开始.你可以这样设定测试代码,将一个动画加入一个layer的时候延迟5秒执行.然后就会发现在动画没有开始的时候,只要动画被加入了layer,layer便处于动画初始状态
kCAFillModeBoth :理解了上面两个,这个就很好理解了,这个其实就是上面两个的合成.动画加入后开始之前,layer便处于动画初始状态,动画结束后layer保持动画最后的状态.
除此之外timingFunction这个属性也是很重要的,有关他的属性如下
kCAMediaTimingFunctionLinear(线性):匀速,给你一个相对静态的感觉
kCAMediaTimingFunctionEaseIn(渐进):动画缓慢进入,然后加速离开
kCAMediaTimingFunctionEaseOut(渐出):动画全速进入,然后减速的到达目的地
kCAMediaTimingFunctionEaseInEaseOut(渐进渐出):动画缓慢的进入,中间加速,然后减速的到达目的地。 这个是默认的动画行为。
各种动画的demo
1 永久闪烁的动画.
+(CABasicAnimation *)opacityForever_Animation:(float)time
{
CABasicAnimation *animation=[CABasicAnimation animationWithKeyPath:@"opacity"];//key 为opacity
animation.fromValue=[NSNumber numberWithFloat:1.0];
animation.toValue=[NSNumber numberWithFloat:0.0];
animation.autoreverses=YES;
animation.duration=time;
animation.repeatCount=FLT_MAX;
animation.removedOnCompletion=NO;
animation.fillMode=kCAFillModeForwards;
return animation;
}
2 有闪烁次数的动画
+(CABasicAnimation *)opacityTimes_Animation:(float)repeatTimes durTimes:(float)time
{
CABasicAnimation *animation=[CABasicAnimation animationWithKeyPath:@"opacity"];
animation.fromValue=[NSNumber numberWithFloat:1.0];
animation.toValue=[NSNumber numberWithFloat:0.4];
animation.repeatCount=repeatTimes;
animation.duration=time;
animation.removedOnCompletion=NO;
animation.fillMode=kCAFillModeForwards;
animation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
animation.autoreverses=YES;
return animation;
}
3 横向和纵向移动
+(CABasicAnimation *)moveX:(float)time X:(NSNumber *)x //横向移动
{
CABasicAnimation *animation=[CABasicAnimation animationWithKeyPath:@"transform.translation.x"];
animation.toValue=x;
animation.duration=time;
animation.removedOnCompletion=NO;
animation.fillMode=kCAFillModeForwards;
return animation;
}
+(CABasicAnimation *)moveY:(float)time Y:(NSNumber *)y //纵向移动
{
CABasicAnimation *animation=[CABasicAnimation animationWithKeyPath:@"transform.translation.y"];
animation.toValue=y;
animation.duration=time;
animation.removedOnCompletion=NO;
animation.fillMode=kCAFillModeForwards;
return animation;
}
4 缩放
+(CABasicAnimation *)scale:(NSNumber *)Multiple orgin:(NSNumber *)orginMultiple durTimes:(float)time Rep:(float)repeatTimes //缩放
{
CABasicAnimation *animation=[CABasicAnimation animationWithKeyPath:@"transform.scale"];
animation.fromValue=orginMultiple;
animation.toValue=Multiple;
animation.duration=time;
animation.autoreverses=YES;
animation.repeatCount=repeatTimes;
animation.removedOnCompletion=NO;
animation.fillMode=kCAFillModeForwards;
return animation;
}
5 group组合动画
+(CAAnimationGroup *)groupAnimation:(NSArray *)animationAry durTimes:(float)time Rep:(float)repeatTimes //组合动画
{
CAAnimationGroup *animation=[CAAnimationGroup animation];
animation.animations=animationAry;
animation.duration=time;
animation.repeatCount=repeatTimes;
animation.removedOnCompletion=NO;
animation.fillMode=kCAFillModeForwards;
return animation;
}
6 旋转
+(CABasicAnimation *)rotation:(float)dur degree:(float)degree direction:(int)direction repeatCount:(int)repeatCount //旋转
{
CATransform3D rotationTransform = CATransform3DMakeRotation(degree, 0, 0,direction);
CABasicAnimation* animation;
animation = [CABasicAnimation animationWithKeyPath:@"transform"];
animation.toValue= [NSValue valueWithCATransform3D:rotationTransform];
animation.duration= dur;
animation.autoreverses= NO;
animation.cumulative= YES;
animation.removedOnCompletion=NO;
animation.fillMode=kCAFillModeForwards;
animation.repeatCount= repeatCount;
animation.delegate= self;
return animation;
}
网友评论