Question

我正在尝试使用动画遮罩制作圆圈遮罩的图像视图，并使用不同的解决方案。以下示例完成了这项工作，但我遇到了两个问题：

1）为什么我无法使图像可以播放？添加例如。 UITapGestureRecognizer不起作用。我的猜测是掩码会阻止触摸操作传播到视图层次结构中的较低级别。

2）使用UIView块动画
动画蒙版运行速度非常快，我无法调整持续时间
我该如何解决这些问题？

- (void) addCircle { // this is the encapsulating view // base = [[UIView alloc] init]; // // this is the button background // base_bgr = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"c1_bgr.png"]]; base_bgr.center = CGPointMake(60, 140); [base addSubview:base_bgr]; // // icon image // base_icon = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"c1_ico.png"]]; base_icon.center = CGPointMake(186*0.3/2, 182*0.3/2); base_icon.transform = CGAffineTransformMakeScale(0.3, 0.3); [base addSubview:base_icon]; // // the drawn circle mask layer // circleLayer = [CAShapeLayer layer]; // Give the layer the same bounds as your image view [circleLayer setBounds:CGRectMake(0.0f, 0.0f, [base_icon frame].size.width, [base_icon frame].size.height)]; // Position the circle [circleLayer setPosition:CGPointMake(186*0.3/2-7, 182*0.3/2-10)]; // Create a circle path. UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect: CGRectMake(0.0f, 0.0f, 70.0f, 70.0f)]; // Set the path on the layer [circleLayer setPath:[path CGPath]]; [[base layer] setMask:circleLayer]; [self.view addSubview:base]; base.center = CGPointMake(100, 100); base.userInteractionEnabled = YES; base_bgr.userInteractionEnabled = YES; base_icon.userInteractionEnabled = YES; // // NOT working: UITapGestureRecognizer // UITapGestureRecognizer *tapgesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapit:)]; [base_icon addGestureRecognizer:tapgesture]; // // BAD but WORKS :) properly positioned UIButton over the masked image // base_btn = [UIButton buttonWithType:UIButtonTypeCustom]; base_btn.frame = CGRectMake(base.frame.origin.x, base.frame.origin.y, base_icon.frame.size.width, base_icon.frame.size.height); [base_btn addTarget:self action:@selector(tapit:) forControlEvents:UIControlEventTouchUpInside]; [self.view addSubview:base_btn]; }

这是点击处理程序，这是掩码动画。无论我在持续时间内尝试过什么数字，它都是快速动画 - 大约0.25秒，我无法调整它。

- (void) tapit:(id) sender { //... [UIView animateWithDuration:1.0 delay:0.0 options:UIViewAnimationOptionCurveEaseOut animations:^ { [circleLayer setTransform:CATransform3DMakeScale(10.0, 10.0, 1.0)]; } completion:^(BOOL finished) { // it is not necessary if I manage to make the icon image tappable base_btn.frame = [base convertRect:base_icon.frame toView:self.view]; }]; } }

Answer 1

1）触摸不会从base向下传播，因为它是在没有帧的情况下启动的，所以它的帧将是CGRectZero。视图不会触发超出其范围的触摸事件。只需在base上设置一个包含整个点击目标的有效框架。

2）图层上的setTransform:调用隐式动画，该动画使用Core Animation的默认持续时间0.25（你猜对了:)）。最好的解决方案是使用CABasicAnimation而不是基于UIView的动画。像这样：

CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
scaleAnimation.toValue = @(10.0f);
scaleAnimation.duration = 2;
[circleLayer addAnimation:scaleAnimation forKey:nil];

注意：默认情况下，CABasicAnimation会在完成后从图层中删除自身，图层将快照回旧值。您可以通过将动画的removedOnCompletion属性设置为NO并稍后使用CALayer的{{1}}方法自行删除它来阻止它（只需设置一个键而不是传递{ {1}}添加动画），但这取决于你想用这个完成什么。

圆圈蒙面视图动画太快，而且无法点击

1 个答案: