Creating ForceBlur Animation for iOS Messaging Apps

Recently, Apple presented an iOS solution for private text messages with encryption and steganography. It’s called Invisible Ink, and it’s a new approach to securing your messages.

At Yalantis we were inspired by this innovation and decided to develop our own secure messaging solution that would be open source.

First, we looked into possible scenarios when such a solution would be useful. Apple suggested that their technology would be convenient for cases when a user wants to surprise whoever they’re messaging. For example, if a girl got engaged and wants to let her friends know, but doesn’t want to ruin the surprise, she might use invisible ink to temporarily hide an image attached to the message. The image would only be visible after the recipient ‘uncovered’ it.

Our open source solution is more useful in a slightly different scenario – for example, if you’re messaging someone while they’re in the subway or on the bus and you don’t want your pictures to be seen by strangers.

traffic.jpg-itok=5eyifu0h

This is how we came up with the idea of a blurred image that a user can make visible using 3D touch. This makes our solution perfect for situations when you want to send sensitive images and want to make sure that only the person you intend to send them to will see them.

After discussing possible implementations with our developers, we designed two possible methods of blurring:

1. When you press harder on an image the image becomes clear.

solid (1).gif

2. When you press on the image, the blurred area shrinks.

radial.gif

After we ran some tests with both options, we settled on the second, as it was more appealing due to the instant visual and tactile feedback the user received (implemented with the help of taptic engine).

How we implemented ForceBlur

The first thing we considered when creating ForceBlur was how easy it would be to integrate it in the existing projects. And actually, the only thing you need to do to use ForceBlur is to replace your UIImageView with our component – ForceBlurImageView. This can be set in storyboard, xib, or code. As soon as you’ve done this, your images are secured with a blur overlay and have the ability to be ‘un-blurred.’.

Let's look at the details of our implementation:

1. Force touch gesture

Unfortunately, Apple doesn’t provide a distinct gesture called “3D touch.” That’s why we had to come up with our own solution.

First, let’s describe what we can expect from this solution:

  • If a device supports 3D touch, we track how much pressure was applied to the screen.

  • If a device doesn’t support 3D touch, the gesture behaves as a “long press.”

As a basic class, we will use UILongPressGestureRecognizer. Having done a bit of research, we found out that UITouch contains all the necessary data and can tell us how much pressure was applied to the screen.

// Force of the touch, where 1.0 represents the force of an average touch @available(iOS 9.0, *) public var force: CGFloat { get }

An ‘average’ touch? What does that mean for us? < Sure, we could take a max value `max(force, 0)`, but in this case the value is relative > Almost nothing, but UITouch also has a maximum possible force:

// Maximum possible force with this input mechanism @available(iOS 9.0, *) public var maximumPossibleForce: CGFloat { get }

That's the key to our gesture! Now we can express how powerful the touch is as a percentage. For example, a user can touch the screen with a relative force of 10% or with the full 100% force.

But first, how can we find out if a device supports 3D touch? We do this by reading the value of the forceTouchCapability property on the trait collection for any object with a trait environment.

The first part of the gesture is done, so on to the next scenario: what if a device doesn’t support 3D touch?

In this case, the gesture will simply work as a regular UILongPressGestureRecognizer.

2. Radial mask

Our radial mask animation was implemented with the help of the Tween class. You can read more about it in our article about how we created the Eat Fit iOS animation.

Here’s how we reveal an image with the radial mask:

swift maskLayer.origin = sender.locationInView(self) // 1 let width = frame.size.width // 2.1 let height = frame.size.height // 2.2 let radius = sqrt(width * width + height * height) * radius // 2.3 Tween(object: self, key: "maskLayer.radius", from: maskLayer.radius, to: radius, duration: duration, timingFunction: CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)).start() // 3

Let's go through this step by step:

  1. First, we identify the point where a touch began.

  2. We then calculate the necessary radius, which will vary depending on the force that was applied.

  3. Finally, we apply a tween from the current radius to the new one.

Example

Let's image you want to a send photo (and no one around your recipient should see it). Here’s what it will look like in a regular chat:

Now, let’s see what it will look like when we make it secure:

ForceBlur animation

[Image source: Instagram]

Usage

As we said earlier, you only need to set ForceBlurImageView class for your image view to use ForceBlur in your own app. In this case we accounted for several different reactions of the device (reactions differ depending on the force that was applied):

public var pressureChanged: (CGFloat -> Void)?

As an example, in the demo app we've added taptic engine feedback and an expanding cell: when you tap on the image to ‘un-blur’ it, the image grows a bit bigger.

One more thing

We are well aware of how popular JSQMessagesViewController is (at the time of writing, this library had more than 9,000 stars on GitHub), which is why we created a separate class and a subspec that allows you to use ForceBlurImageView. All you have to do is to replace JSQPhotoMediaItem with ForceBlurPhotoMediaItem.

For example:

swift let secureItem = ForceBlurPhotoMediaItem(image: image)

Check out our DemoConversation to see how it's integrated.

You can add it to your project with a podspec ForceBlur/JSQMessagesViewController

At Yalantis we’re always looking for new approaches to existing solutions, and gladly invest our time developing open source components that you can use for your projects!

Check out ForceBlur where it belongs, in the open source. And go to our Dribbble and GitHub pages for more awesome things! 

3.0/ 5.0
Article rating
4
Reviews
Remember those Facebook reactions? Well, we aren't Facebook but we love reactions too. They can give us valuable insights on how to improve what we're doing. Would you tell us how you feel about this article?
Excited to create something outstanding?

We share the same interests.

Let's team up!