简介
CAKeyframeAnimatio
可以为动画指定多个值,可以通过设置values
或path
来实现。
values
有一个输入框,当输入框的内容不符合要求的时候,实现一个抖动的动画,用来提示用户
CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];
animation.keyPath = @"position.x";
animation.values = @[ @0, @10, @-10, @10, @0 ];
animation.keyTimes = @[ @0, @(1 / 6.0), @(3 / 6.0), @(5 / 6.0), @1 ];
animation.duration = 0.4;
animation.additive = YES;
[self.textField.layer addAnimation:animation forKey:nil];
path(CGPathRef)
沿着path
路径的动画
CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
CGMutablePathRef path = CGPathCreateMutable();
CGPathAddArc(path, NULL, SCREEN_WIDTH / 2.0f, 250, 150, -M_PI_2, M_PI * 3 / 2.0f, NO);
animation.path = path;
CGPathRelease(path);
animation.duration = 4;
animation.repeatCount = HUGE_VALF;
animation.calculationMode = kCAAnimationPaced;
animation.rotationMode = kCAAnimationRotateAuto;
[self.spaceView.layer addAnimation:animation forKey:nil];
additive
官方的解释
When true the value specified by the animation will be "added"
to the current presentation value of the property to
produce the new presentation value.
我的理解是:(假设origin.x = 100, value = -10)
如果设置为YES,那么路径上的点都是相对于动画执行者而言的相对
值,转换成屏幕上的点就是origin.x = 100 + (-10) = 90;
如果设置为NO(默认值),那么路径上的点代表的是屏幕上的绝对
点,origin.x = -10;
所以如果指定了path,则最好设置additive为NO
rotationMode
rotationMode
如果设为nil
,那么在动画过程中动画执行者的外观不会发生变化。
如果设置为kCAAnimationRotateAuto
,那么在动画过程中会出现一定程度的倾斜,倾斜的程度与当前路径有关,是会时刻变化的。
在第二个示例中,如果设置additive为YES,则可以这么处理
CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
CGMutablePathRef path = CGPathCreateMutable();
// 1
CGPoint center = self.spaceView.center;
// 2
CGAffineTransform transform = CGAffineTransformMakeTranslation(-center.x, -center.y);
//3
CGPathAddArc(path, &transform, SCREEN_WIDTH / 2.0f, 250, 150, -M_PI_2, M_PI * 3 / 2.0f, NO);
animation.path = path;
CGPathRelease(path);
animation.duration = 4;
animation.repeatCount = HUGE_VALF;
animation.additive = YES;
animation.calculationMode = kCAAnimationCubicPaced;
animation.rotationMode = kCAAnimationRotateAuto;
[self.spaceView.layer addAnimation:animation forKey:nil];