CAKeyframeAnimation动画开始没有第一帧(路径)
CAKeyframeAnimation animation starts without the first frame(path)
我想用不同的贝塞尔曲线形状制作蒙版动画。我的动画开始了,但我看不到第一条路径。代码如下:
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
_shapeLayer = [CAShapeLayer layer];
[self drawParentLayer];
}
- (void)drawParentLayer {
_shapeLayer.frame = CGRectMake(0, 0, 350, 500);
_shapeLayer.lineWidth = 3;
_shapeLayer.strokeColor = [UIColor blackColor].CGColor;
_shapeLayer.fillColor = UIColor.whiteColor.CGColor;
_shapeLayer.path = [UIBezierPath bezierPathWithRect:_shapeLayer.bounds].CGPath;
_shapeLayer.masksToBounds = NO;
[self.view.layer addSublayer:_shapeLayer];
}
然后我创建我的遮罩层,但在触摸的位置。
如何获取接触点:
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
UITouch *touch = [touches anyObject];
CGPoint location = [touch locationInView:self.view];
CGPoint locationInLayer = CGPointMake(location.x - _shapeLayer.frame.origin.x, location.y - _shapeLayer.frame.origin.y);
_shapeLayer.fillColor = UIColor.yellowColor.CGColor;
[self createBezierLayerInPoint:locationInLayer];
}
触摸点的贝塞尔图层:
- (void)createBezierLayerInPoint:(CGPoint)point {
CAShapeLayer *layer = [CAShapeLayer layer];
layer.fillColor = UIColor.whiteColor.CGColor;
layer.shadowColor = [[UIColor whiteColor] CGColor];
layer.shadowOffset = CGSizeMake(0.0, 0.0);
layer.shadowOpacity = 0.8;
layer.shadowRadius = 20.0;
layer.lineWidth = 0;
UIBezierPath *bezier = [BezierObject createBezierObject1];
layer.bounds = bezier.bounds;
layer.path = bezier.CGPath;
layer.position = point;
// my bezier objects are big so I decided to scale
layer.transform = CATransform3DMakeScale(0.2, 0.2, 1);
_shapeLayer.mask = layer;
[self animate:layer];
}
下一张是bezier1到bezier3的图片:
mask(bezier) 图层的动画:
- (void)animate:(CAShapeLayer *)layer {
CAKeyframeAnimation *frameA = [CAKeyframeAnimation animation];
[frameA setKeyPath:@"path"];
frameA.values = @[(id)[BezierObject createBezierObject1].CGPath, (id)[BezierObject createBezierObject2].CGPath, (id)[BezierObject createBezierObject3].CGPath];
frameA.keyTimes = @[@0, @(1/3), @1];
frameA.additive = YES;
frameA.removedOnCompletion = NO;
frameA.fillMode = kCAFillModeForwards;
frameA.duration = 3;
[layer addAnimation:frameA forKey:@"path"];
}
正如我之前提到的,动画从 object2 开始。所以,也许这只是一个简单的错误,但我看不到它。
谢谢!
问题是 keyTimes
数组中的第二个值。由于分子和分母都是整数,因此结果为零。你应该像这样强制进行浮点除法:
frameA.keyTimes = @[@0.0, @(1.0/3.0), @1.0];
我想用不同的贝塞尔曲线形状制作蒙版动画。我的动画开始了,但我看不到第一条路径。代码如下:
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
_shapeLayer = [CAShapeLayer layer];
[self drawParentLayer];
}
- (void)drawParentLayer {
_shapeLayer.frame = CGRectMake(0, 0, 350, 500);
_shapeLayer.lineWidth = 3;
_shapeLayer.strokeColor = [UIColor blackColor].CGColor;
_shapeLayer.fillColor = UIColor.whiteColor.CGColor;
_shapeLayer.path = [UIBezierPath bezierPathWithRect:_shapeLayer.bounds].CGPath;
_shapeLayer.masksToBounds = NO;
[self.view.layer addSublayer:_shapeLayer];
}
然后我创建我的遮罩层,但在触摸的位置。 如何获取接触点:
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
UITouch *touch = [touches anyObject];
CGPoint location = [touch locationInView:self.view];
CGPoint locationInLayer = CGPointMake(location.x - _shapeLayer.frame.origin.x, location.y - _shapeLayer.frame.origin.y);
_shapeLayer.fillColor = UIColor.yellowColor.CGColor;
[self createBezierLayerInPoint:locationInLayer];
}
触摸点的贝塞尔图层:
- (void)createBezierLayerInPoint:(CGPoint)point {
CAShapeLayer *layer = [CAShapeLayer layer];
layer.fillColor = UIColor.whiteColor.CGColor;
layer.shadowColor = [[UIColor whiteColor] CGColor];
layer.shadowOffset = CGSizeMake(0.0, 0.0);
layer.shadowOpacity = 0.8;
layer.shadowRadius = 20.0;
layer.lineWidth = 0;
UIBezierPath *bezier = [BezierObject createBezierObject1];
layer.bounds = bezier.bounds;
layer.path = bezier.CGPath;
layer.position = point;
// my bezier objects are big so I decided to scale
layer.transform = CATransform3DMakeScale(0.2, 0.2, 1);
_shapeLayer.mask = layer;
[self animate:layer];
}
下一张是bezier1到bezier3的图片:
mask(bezier) 图层的动画:
- (void)animate:(CAShapeLayer *)layer {
CAKeyframeAnimation *frameA = [CAKeyframeAnimation animation];
[frameA setKeyPath:@"path"];
frameA.values = @[(id)[BezierObject createBezierObject1].CGPath, (id)[BezierObject createBezierObject2].CGPath, (id)[BezierObject createBezierObject3].CGPath];
frameA.keyTimes = @[@0, @(1/3), @1];
frameA.additive = YES;
frameA.removedOnCompletion = NO;
frameA.fillMode = kCAFillModeForwards;
frameA.duration = 3;
[layer addAnimation:frameA forKey:@"path"];
}
正如我之前提到的,动画从 object2 开始。所以,也许这只是一个简单的错误,但我看不到它。
谢谢!
问题是 keyTimes
数组中的第二个值。由于分子和分母都是整数,因此结果为零。你应该像这样强制进行浮点除法:
frameA.keyTimes = @[@0.0, @(1.0/3.0), @1.0];