使用裁剪过渡在图像之间滚动

Question

我一直在寻找一段时间并尝试动手来完成类似的事情。 在Fifa iOS app中有一个非常奇特的效果，你可以在屏幕之间滚动，每个都有一个不同的图像，但滚动本身并没有移动图像移动，但像移动它们之间的裁剪线（视差效果）如在一些网站上）。

我的问题是： 我尝试了类似的效果，但遇到了2个障碍。 遮罩图像CGImageMaskCreate不够快，无法正确裁剪图像。

我尝试的是加载出现在屏幕上的3个裁剪图像，这意味着为3个蒙版中的每个创建3 graphicsContexts，为每个蒙版屏蔽图像。然后，创建另一个缓冲区上下文，我将完成的部分加起来（创建3次，每次裁剪后的图像，然后我开始处理下一个） 这是有道理的，它很重，它是。

第二，我试过GPUImage library，但感觉也很慢，我最小化了很多我正在使用的GraphicsContexts。 我肯定做了一件非常糟糕的事，但我不确定从哪里开始。我找不到任何可以执行类似调整的示例代码。 我决定炸掉我正在尝试的现有代码，所以我会重新开始（所以不要问我代码：D）

我知道scrollViewDidScroll对于类似的东西来说可以很流畅。

Answer 1

您应该将图像视图剪辑/遮罩到路径而不是图像蒙版。然后，在平移时，图像不会移动，而是只更新每个图像视图的剪辑/蒙版。如果您想在Core Graphics中执行此操作，可以使用CGContextMoveToPoint，CGContextAddLineToPoint等创建路径，然后使用CGContextClip进行剪辑。

如果你想在QuartzCore中执行此操作，可以使用CAShapeLayer作为相应图像视图的掩码，为每个图像赋予每个掩码UIBezierPath：

// create path

UIBezierPath *path = [UIBezierPath bezierPath];;
CGPoint point = CGPointZero;

point.x += slantOffset;
[path moveToPoint:point];

point.x += self.view.bounds.size.width;
[path addLineToPoint:point];

point.x -= slantOffset * 2.0;
point.y += self.view.bounds.size.height;
[path addLineToPoint:point];

point.x -= self.view.bounds.size.width;
[path addLineToPoint:point];

[path closePath];

// create shape layer, use the path, and specify it for the mask of the image view

CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.path = [path CGPath];
self.imageView.layer.mask = maskLayer;

如果要更改蒙版（例如在平移手势识别器中），则只需更新path的{​​{1}}即可。只需对任何给定时间可见的所有图像重复此过程（例如，看起来此应用程序有三个一次可见的图像）。

这足以让您跟上手势识别器和/或自定义转换的速度。这里我有三个图像视图，我有一个手势识别器更新maskLayer三个图像视图中每个图像视图的相应遮罩层。显然，图层蒙版的路径会相应调整（左，中，右），但我怀疑你有这个想法：