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 release

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