美文网首页
CAKeyframeAnimation基础

CAKeyframeAnimation基础

作者: c048e8b8e3d7 | 来源:发表于2017-01-12 15:22 被阅读76次

简介

CAKeyframeAnimatio可以为动画指定多个值,可以通过设置valuespath来实现。

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];

参考

参考链接

相关文章

网友评论

      本文标题:CAKeyframeAnimation基础

      本文链接:https://www.haomeiwen.com/subject/iuwdbttx.html