Interactive Animation on iOS

Make your animation interactive and engaging

In user centred application, animation gives life to your app and more happiness index. An animated event, flow or action is more engaging and visually appealing and connected.

Interactive animation takes user touch sequence as input and perform animation alongside. This makes user interface more interactive and engaging. Using interactive animation you can bring more user attention.

In 2016, Apple brought interactive animation on iOS. Apple introduced UIViewPropertyAnimator class to bring interactive animation.

UIViewPropertyAnimator gives you more control over state of animation compare to UIViewAnimation. You can now track progress of running animation and take action like reverse, pause or cancel on it. Using property animator now it is possible to animate view property like alpha.

Interactive animation runs through following state:

We are creating a pan gesture on alert view inside our viewDidLoad(). We will use pan to drag our view on left & right when user pans on view.

We will keep track of view open / close state using enum.

As touch event and state is setup so we will now create property animator for one of UIView property which we want to animate. For example, view alpha.

Now, we will pause here and jump to some important APIs which make it works.

APIs

Let’s Pan

Nothing complex here. As pan goes from began-to-changed-to-ended state we move animator to its different states. When pan starts we start animation and immediately move animator to active state.

We want to connect pan velocity with animator and give pan gesture to control over animation. Hence, we will also pause our animator so that it will not have free run. As pan changes we calculate % translation.x which acts as an input for fraction complete.

And when pan ends based on max or min drag distance we reverse the animation.

Meanwhile, Happy Coding!! 🍭 🌟 🌟

If you have any questions or corrections, please leave a comment below.

Related posts:

Uma das piores chagas em ser pobre no Brasil é a dependência do transporte público. Os clichês se aplicam bem a situação: passagem cara, serviço de má qualidade, atrasos. Porém, a pior coisa do…