ios - Swipe between filtered images

Question

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.

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.

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.

Answer 1

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).