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.
SBFTouchPassThroughView
on the first try - just move it away until you're able to select the dots):

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
.
remLog
is a remote log function from my previous tutorial. It's very powerful, and easy to setup.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:
- We need to call original function somewhere in the override, otherwise the functionality will most likely break.
- Because we want our dots to bounce up and down, we have to tell one of superviews to disable
clipToBounds
. I figured out howsuperviews
are needed here, so you don't need to. (Stupid code, don't use it in production please) - 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:
// orion:new
creates a new function.UIView.animate
animates the animatable properties over time. ForwithDuration
set the value totime
, delay is not nessesary, so leave it at0
, for transition let's usecurveEaseInOut
, because it's the smoothest of provided, and foranimations
create a new block.- Inside ths block, we need to determine whether the dot should bounce up or down. Create the variable that will store the multiplier.
- Set the final transform of the dot.
UIView.animate
will handle the rest. - But we also need the dot to come back to it's original position!
- Same as step 2.
- Set the transform to (0,0), resetting the transform.
Build and run.