- 需求：
实现注册抽奖页面下边的🎁绕顶点左右摆动，看到这个需求首先想到的肯定是用Core Animation（核心动画），那么什么是核心动画呢？点我
图1.png
首先实现往左👈摆动
- (void)startLeftAnnimation{
/// 左边👈
//初始化一个动画
CABasicAnimation *baseAnimation = [CABasicAnimation animation];
//动画运动的方式，现在指定的是围绕Z轴旋转
baseAnimation.keyPath = @"transform.rotation.z";
//动画持续时间
baseAnimation.duration = 0.5;
//开始的角度
baseAnimation.fromValue = [NSNumber numberWithFloat:0];
//结束的角度
baseAnimation.toValue = [NSNumber numberWithFloat:M_PI/8];
//动画的运动方式
baseAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
//是否反向移动动画
baseAnimation.autoreverses = YES;
//动画的代理
baseAnimation.delegate = self;
//动画结束后的状态
baseAnimation.fillMode = kCAFillModeForwards;
[baseAnimation setValue:@"left" forKey:@"left"];
[self.layer addAnimation:baseAnimation forKey:@"left"];
}
同样的道理实现往右👉摆动
- (void)startRightAnnimation{
/// 右边👉
//初始化一个动画
CABasicAnimation *baseAnimation2 = [CABasicAnimation animation];
//动画运动的方式，现在指定的是围绕Z轴旋转
baseAnimation2.keyPath = @"transform.rotation.z";
//动画持续时间
baseAnimation2.duration = 0.5;
//开始的角度
baseAnimation2.fromValue = [NSNumber numberWithFloat:0];
//结束的角度
baseAnimation2.toValue = [NSNumber numberWithFloat:-M_PI/8];
//动画的运动方式
baseAnimation2.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
//是否反向移动动画
baseAnimation2.autoreverses = YES;
//动画的代理
baseAnimation2.delegate = self;
//动画结束后的状态
baseAnimation2.fillMode = kCAFillModeForwards;
[baseAnimation2 setValue:@"right" forKey:@"right"];
[self.layer addAnimation:baseAnimation2 forKey:@"right"];
}
最后根据在代理方法中实现连续的左右摆动
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {
if (flag) {
if ([[anim valueForKey:@"left"] isEqualToString:@"left"]) {
//检测到左边结束后,开始右边的动画
[self startRightAnnimation];
}else if ([[anim valueForKey:@"right"] isEqualToString:@"right"]) {
self.count++;
if (self.count <= 2) {
//检测到右边动画的时候,开始左边的动画
[self startLeftAnnimation];
}else {
if (self.finishBlock) {
self.finishBlock();
}
/// 移除很重要 要不然不会调用dealloc
[self.layer removeAllAnimations];
}
}
}
}
本来以为这样就可以就没有问题了，但是测试之后， 大失所望。 是因为我们忘记了最终要的一个anchorPoint（锚点）,这是个什么玩意，举个例子，桌子上有一张纸，你用一个手指头按着他，当他不动的时候，他就在那里，不增不减，当你要旋转他的时候，那就要看你按住的那个点的位置。动画中的旋转也是这个样子，这个锚点，决定了你的旋转。
图2.png
在这个图中我们可以看到，默认的锚点是（0.5，0.5），也就是layer的中心位置，锚点的取值范围是0-1 ，当围绕着锚点旋转的时候，不同的锚点，旋转效果是不一样的。
所以我们要设置一下anchorPoint
// 锚点（0 - 1）
self.layer.anchorPoint = CGPointMake(0.5, 0);
最终实现的效果（模拟器上边看着不太流畅，真机是没问题的）
图片3.gif
网友评论