7

我正在尝试实现以下目标：用户点击一个视图，一个圆形视图弹出到它的左侧，其中包含一些图像内容。视图应该从触摸点开始动画到触摸视图外部和左侧的最后一帧。在动画过程中它应该是一个圆圈，增长到正确的位置和大小

一切都适用于下面的代码，只是在动画期间，圆形边界仅在左侧。就好像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;
}];

我试过只使用cornerRadius的CALayer，但这也不会产生令人满意的结果，因为半径也必须随框架大小而变化。

4

2 回答 2

18

您正在为框架设置动画，但不是为蒙版设置动画。圆形蒙版的大小保持不变，您的图像帧从左上角动画到最后的全尺寸。这就是为什么你会得到图像左上角的圆形剪裁，直到它达到最后的帧大小。

这就是动画中基本上发生的事情： 在此处输入图像描述

您可以尝试为变换设置动画（这将完全按照您希望的样子变换最终剪辑的图像）而不是为帧设置动画。

就像是：

// 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);
}];
于 2012-10-09T08:05:58.333 回答
0

您是否尝试过使用圆形视图的 autoresizingMask，使其具有灵活的左右边距？

这可能会在动画中发挥作用，并解释为什么您的视图出现“滑动”。 （至少值得一试）

于 2012-10-03T23:42:48.453 回答