我正在努力实现以下目标: 用户点击一个 View ,一个圆形 View 会弹出到它的左侧,其中包含一些图像内容。 View 应该从触摸点开始动画到触摸 View 之外的最后一帧并向左移动。在动画期间它应该是一个圆圈,增长到正确的位置和大小
下面的代码一切正常,只是在动画期间,圆形边界只在左边。就像CALayer
形状正在滑入其最终框架。
看起来有点像这样。
动画完成后,我得到了预期的完整圆圈。
CGFloat w = 300;
CGRect frame = CGRectMake(myX, myY, w, w);
CGPoint p = [touch locationInView:self.imageView];
CGRect initialFrame = CGRectMake(p.x, p.y, 0,0);
UIImageView *circle = [[UIImageView alloc] initWithFrame:frame];
circle.image = [UIImage imageNamed:@"china"];
circle.contentMode = UIViewContentModeScaleAspectFill;
circle.backgroundColor = [UIColor clearColor];
circle.layer.borderWidth = 1;
circle.layer.borderColor = [UIColor grayColor].CGColor;
circle.layer.masksToBounds = YES;
CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
CGRect maskRect = CGRectMake(0, 0, w, w);
CGMutablePathRef path = CGPathCreateMutable();
CGPathAddEllipseInRect(path, nil, maskRect);
maskLayer.path = path;
CGPathRelease(path);
circle.layer.mask = maskLayer;
circle.frame = initialFrame;
[self.imageView addSubview:circle];
[UIView animateWithDuration:1.0 animations:^{
circle.frame = frame;
}];
我尝试只使用 CALayer
的 cornerRadius
,但这也不会导致令人满意的结果,因为半径必须随着帧大小而改变
最佳答案
您正在为框架而不是 mask 设置动画。圆形 mask 的大小保持不变,您的图像帧从左上角动画到最终的全尺寸。这就是为什么您对图像的左上部分进行圆形裁剪,直到达到最终帧大小为止。
这就是您的动画中基本发生的事情:
您可以尝试对变换进行动画处理(这将完全按照您希望的样子变换最终剪裁的图像)而不是对帧进行动画处理。
类似于:
// Don't animate the frame. Give it the finale value before animation.
circle.frame = frame;
// Animate a transform instead. For example, a scaling transform.
circle.transform = CGAffineTransformMakeScale(0, 0);
[UIView animateWithDuration:1.0 animations:^{
circle.transform = CGAffineTransformMakeScale(1, 1);
}];
关于iphone - 屏蔽 UIView、CALayer 的动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12564336/