在过滤的图像之间滑动 [英] Swipe between filtered images

问题描述

我试图允许用户在静态图像上的过滤器之间滑动。这个想法是当滤镜在其上方滚动时，图像保持原位。 Snapchat最近发布了一个实现此功能的版本。 此视频正好显示了我想要在1:05完成的工作。

I am trying to allow users to swipe between filters on a static image. The idea is that the image stays in place while the filter scrolls above it. Snapchat recently released a version which implements this feature. This video shows exactly what I'm trying to accomplish at 1:05.

到目前为止，我试图将三个UIImageView放入原始图像左侧和右侧的滚动视图中，并调整它们的帧起源.x和size.width与scrollView的contentOffset.x。我在这里的另一篇文章中找到了这个想法。将左侧和右侧的内容模式更改为UIViewContentModeLeft和UIViewContentModeRight没有帮助。

So far I've tried to put three UIImageView's into a scrollview, on to the left and one to the right of the original image, and adjust their frames origin.x and size.width with the scrollView's contentOffset.x. I found this idea in another post here. Changing the content mode of the left and right to UIViewContentModeLeft and UIViewContentModeRight did not help.

接下来我尝试将所有三个UIImageView堆叠在一起。我制作了两个CALayer蒙版并将它们插入到堆栈左侧和右侧的scrollView中，因此当您滚动蒙版时，将揭示过滤后的图像。这对我不起作用。任何帮助将不胜感激。

Next I tried stacking all three UIImageView's on top of one another. I made two CALayer masks and inserted them into the scrollView on the left and right of the stack so when you scroll the mask would unveil the filtered image. This did not work for me. Any help would be greatly appreciated.

推荐答案

你应该只需要2个图像视图（当前的一个和传入的一个，因为这是一个分页样式的滚动），并在每次更换过滤器后切换角色。您使用图层蒙版的方法应该有效，但不能在滚动视图上使用。

You should only need 2 image views (the current one and the incoming one, as this is a paginated style scroll), and they switch role after each filter change. And your approach of using a layer mask should work, but not on a scroll view.

因此，请确保您的视图组织类似于：

So, ensure that your view organisation is something like:

UIView // receives all gestures
    UIScrollView // handles the filter name display, touch disabled
    UIImageView // incoming in front, but masked out
    UIImageView // current behind

每个图像视图都有一个遮罩层，它是只是一个简单的图层，你可以修改遮罩层的位置来改变图像实际可见的程度。

Each image view has a mask layer, it's just a simple layer, and you modify the position of the mask layer to change how much of the image is actually visible.

现在，主视图处理平移手势，并使用手势的平移来更改传入的图像视图遮罩层位置和滚动视图内容偏移。

Now, the main view handles the pan gesture, and uses the translation of the gesture to change the incoming image view mask layer position and the scroll view content offset.

更改完成后，当前图像视图可以再也看不到了，传入的图像视图占据了整个屏幕。 当前图像视图现在移动到前面并成为传入视图，其掩码会更新以使其透明。当下一个手势开始时，其图像将更新为下一个过滤器并且更改过程重新开始。

As a change completes, the 'current' image view can't be seen any more and the 'incoming' image view takes the whole screen. The 'current' image view now gets moved to the front and becomes the incoming view, its mask gets updated to make it transparent. As the next gesture starts, its image is updated to the next filter and the change process starts over.

您可以随时在后台准备过滤后的图像作为滚动正在发生这种情况，以便在切换时图像准备好进入视图（快速滚动）。

You can always be preparing the filtered images in the background as the scrolling is happening so that the image is ready to push into the view as you switch over (for rapid scrolling).

这篇关于在过滤的图像之间滑动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！