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

Question

我一直在寻找一段时间,并试图完成类似的事情.在Fifa iOS应用程序中,有一个非常奇特的效果,你可以在屏幕之间滚动,每个都有一个不同的图像,但滚动本身不移动图像移动,但像它们之间的裁剪线移动(视差效果,如在一些网站).

我的问题是:我尝试了类似的效果,但遇到了2个障碍.掩模图像CGImageMaskCreate不够快,无法正确裁剪图像.

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

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

我知道这样scrollViewDidScroll的事情可以很流畅.

Answer 1

您应该将图像视图剪辑/遮罩到路径而不是图像蒙版.然后,在平移时,图像不会移动,而是只更新每个图像视图的剪辑/蒙版.如果你想要做的是,在核芯显卡,您可以创建一个路径CGContextMoveToPoint,CGContextAddLineToPoint等等,再夹使用CGContextClip.

如果你想在QuartzCore中执行此操作,可以使用a 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为maskLayer.只需对任何给定时间可见的所有图像重复此过程(例如,看起来这个应用程序有三个一次可见的图像).

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