我们先来看看核心动画的组成,或者说事分类:如下图
核心动画简介:
核心动画:
1、在iOS中核心动画分为几类:基础动画(CABasicAnimation)、关键帧动画(CAKeyframeAnimation)、动画组(CAAnimationGroup)、转场动画(CATransition)
2、CAAnimation:核心动画的基础类,不能直接使用,负责动画的运行时间、速度的控制,本身实现了CAMediaTiming协议。
3、 基础动画(CABasicAnimation) 关键帧动画(CAKeyframeAnimation)区别:
基础动画,只能从一个点到另一个点;关键帧动画可以从一个点到多个点
4、 CAPropertyAnimation:属性动画也是基类(通过属性进行动画设置,注意是动画属性),不能直接使用。
CABasicAnimation:基础动画,通过属性修改进行动画参数控制,只有初始状态和结束状态。
CAKeyframeAnimation:关键帧动画,同样是通过属性进行动画参数控制,但是同基础动画不同的是它可以有多个状态控制。
CAAnimationGroup:动画组,动画组是一种组合模式设计,可以通过动画组来进行所有动画行为的统一控制,组中所有动画效果可以并发执行。
CATransition:转场动画,主要通过滤镜进行动画效果设置。
5、基础动画、关键帧动画都属于属性动画,就是通过修改属性值产生动画效果,开发人员只需要设置初始值和结束值,中间的过程动画(又叫“补间动画”)由系统自动计算产生。和基础动画不同的是关键帧动画可以设置多个属性值,每两个属性中间的补间动画由系统自动完成,因此从这个角度而言基础动画又可以看成是有两个关键帧的关键帧动画
一、CABasicAnimation:
1>、创建基础动画,需要通过fromValue 和toValue 属性来指定一个开始值和结束值,当添加基础动画到图层中的时候,它才会发生变化
2>、autoreverse :当设定这个属性为YES 的时候,在它到达目的地之后,会以动画的方式返回到开始的值
3>、duration:设定开始值到结束值话费的时间 ,期间会被速度的属性影响
4>、speed: 默认的值为 1.0.这意味着动画播放按照默认的速度。如果你改变这个值为 2.0,动画会用 2 倍的速度播放。 这样的影响就是使持续时间减半。如果你指定的持续时间为 6 秒,速度为 2.0,动画就会播放 3 秒钟---一半的 持续时间
把速度设置成0 就可以暂停动画
5>、repeatCount 默认的是 0,意味着动画只会播放一次 这个不应该和 repeatDration 属性一块使用。(负数不是无限循环)
6>、repeatDuration 这个属性指定了动画应该被重复多久。动画会一直重复,直到设定的时间流逝完。它不应该和 repeatCount 一起使用
7>、removedOnCompletion 默认为YES,代表动画执行完毕后就从图层上移除,图形会恢复到动画执行前的状态。如果想让图层保持显示动画执行后的状态,那就设置为NO,不过还要设置fillMode为kCAFillModeForwards
fillMode 设置当前对象在非活动时间段的行为 比如动画开始之前或者动画结束之后
fillMode属性值(上面提到过 要想fillMode有效,需要设置removedOnCompletion = NO)
kCAFillModeRemoved 这个是默认值,也就是说当动画开始前和动画结束后,动画对layer都没有影响,动画结束后,layer会恢复到之前的状态
kCAFillModeForwards 当动画结束后,layer会一直保持着动画最后的状态
kCAFillModeBackwards 在动画开始前,只需要将动画加入了一个layer,layer便立即进入动画的初始状态并等待动画开始。
kCAFillModeBoth 这个其实就是上面两个的合成.动画加入后开始之前,layer便处于动画初始状态,动画结束后layer保持动画最后的状态
CABasicAnimation
1、初始化一个CALayer,给它附一张图
showLayer = [[CALayer alloc]init];
UIImage *image = [UIImage imageWithContentsOfFile:[[NSBundle mainBundle]pathForResource:@"105.jpg" ofType:nil]];
showLayer.contents = (id)image.CGImage;
showLayer.bounds = CGRectMake(0, 0, image.size.width/10, image.size.height/10);
showLayer.position = self.view.center;
[self.view.layer addSublayer:showLayer];
2、写两个方法-- CABasicAnimation实现的方法
#pragma mark ----------------改变position --------
- (void)animation1
{
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position"];
// 设置动画要到哪个位置
animation.toValue = [NSValue valueWithCGPoint:CGPointMake(370, showLayer.position.y)];
animation.duration = 2;
// 使用fillMode的时候必须禁用 removedOnCompletion
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeBoth;
// 设置快进快出,慢进慢出等属性
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
// 添加动画到图层
[showLayer addAnimation:animation forKey:@"move"];
}
#pragma mark ----------------改变bounds --------
- (void)animation2
{
UIImage *image = [UIImage imageWithContentsOfFile:[[NSBundle mainBundle]pathForResource:@"105.jpg" ofType:nil]];
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"bounds"];
animation.toValue = [NSValue valueWithCGRect:CGRectMake(0, 0, image.size.width/5, image.size.height/5)];
animation.duration = 0.5;
animation.autoreverses = YES;
animation.repeatDuration = 5;
[showLayer addAnimation:animation forKey:@"big"];
}
3、只要在我们开始触摸屏幕的时候分别调用这两个方法,我们就可以看出效果图了
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
[self animation2];
}
效果展示:
这是我们定义的Layer,当我们在触摸屏幕的时候调用第一个方法的时候,图片会在两秒的时间内往右移动到width = 370得位置
当我们调用第二个方法的时候,图片会在中心放大缩小放大缩小--,就像心跳一样 ;