iOS Tweak Development Tutorial: PinAnim

In this tutorial we will be creating an iOS 14 tweak named PinAnim.

I assume you've already completed the iOS 14 Tweak Development: Beginner Tutorial. If not, I highly recommend checking it out before continuing.

Here's the final result we want to achieve by the end of this tutorial:

Preparations

Make sure you have all the required tools installed. You can follow my guide to get started.

New project

Name the project PinAnim, and use the default values for MobileSubstrate Bundle filter and List of applications:

Next, open your project in your favorite editor and let's start coding.

Flex

First, we need to know what exactly to hook. Bring up Flex and select the Lock Screen dot.

Click on the info button.

We need to find a method that is called whenever a dot reveals/changes:

setRevealed - exactly what we need. Let's see what parameters it accepts:

Excellent, let's do something with it in the code.

Code

Let's create a new hook on SBSimplePasscodeEntryFieldButton and override a method setRevealed.

Build and install by running make do and try pressing button. In our Python server we should see setRevealed printed out multiple times.

Animation

Add the following code to the setRevealed function:

Quick breakdown:

1. We need to call original function somewhere in the override, otherwise the functionality will most likely break.
2. Because we want our dots to bounce up and down, we have to tell one of superviews to disable clipToBounds. I figured out how superviews are needed here, so you don't need to. (Stupid code, don't use it in production please)
3. Here we call the animate function. Your IDE will give you an error, but don't worry, we will implement it in a second.

Now, let's make dots bounce. Using UIView.animate we can create beautiful animations in a couple of lines. You can read more about it here. Here's my way of animating:

Woah, that's a lot of code. Let's break it down once again:

1. // orion:new creates a new function.
2. UIView.animate animates the animatable properties over time. For withDuration set the value to time, delay is not nessesary, so leave it at 0, for transition let's use curveEaseInOut, because it's the smoothest of provided, and for animations create a new block.
3. Inside ths block, we need to determine whether the dot should bounce up or down. Create the variable that will store the multiplier.
4. Set the final transform of the dot. UIView.animate will handle the rest.
5. But we also need the dot to come back to it's original position!
6. Same as step 2.
7. Set the transform to (0,0), resetting the transform.

Build and run.