With the introduction of SwiftUI, animations have become much easier to implement. Implementing a state change and wrapping it in a WithAnimation block gives you an animation. However, these animations are not inherently interactive—once triggered, you can't control their intermediate states. In contrast, some of the most engaging animations, like scrolling, pull-to-refresh, and dragging to reorder icons on the Home Screen, are fully interactive and respond dynamically to user input.
Drag gesture animations rely on simple arithmetic operations like addition, subtraction and multiplication, but their complexity lies in how these calculations are applied to achieve smooth, responsive, and natural movement. This makes the drag gesture animations harder to debug and understand but we’re going to change that as we go through it step by step.
Interpolation
Before we start writing code, we need to understand how interpolation applies specifically to drag gestures. In drag animations, interpolation is used to smoothly transition an element’s position, velocity, or other properties based on the user’s finger position on screen. Instead of jumping directly from one point to another, interpolation ensures that movements feel fluid and natural by calculating intermediate values between the current and target states over time.
For example, when you swipe your finger across the screen, you want the color to change gradually as you drag, rather than abruptly switching once a threshold is reached. A sudden change would feel jarring and unnatural, disrupting the smooth, responsive experience users expect.
When interacting with elements on the screen, such as dragging horizontally on an iPhone, the translation values are not normalized; they directly reflect the screen's physical width, ranging from 0 to 393 points (for iPhone 16). These raw values scale linearly with the device's dimensions, meaning a full drag from one side of the screen to the other generates values proportional to the screen size. For scenarios like animations or color transitions where normalized values are necessary, it's crucial to map these values to a 0-1 range. This normalization is a key step in ensuring consistent and smooth behavior across different devices when creating drag gesture-driven animations.
Normalization
When implementing a drag gesture on a touchscreen, raw values corresponding to the horizontal distance dragged are generated, ranging from 0 to the screen width. To make these values more usable for animations or transformations, we normalize them to a consistent range of 0 to 1.
The following table shows what normalized values look like when max width of our drag is 393(iPhone 16):
| RawValue (Points) | Formula (RawValue/MaxValue) | Normalized Value (0-1) |
|---|---|---|
| 0 | 0/393 | 0.00 |
| 100 | 100/393 | ≈0.25 |
| 200 | 200/393 | ≈0.51 |
| 300 | 300/393 | ≈0.76 |
| 393 | 393/393 | 1.00 |
For instance, if the user drags 100 points, the normalized value is around 0.25, meaning the drag is at 25% of the total horizontal distance.
Let’s illustrate this with a simple example: we’ll create a view featuring a large rectangle with a smaller rectangle overlaid on top.
Rectangle()
.fill(Color.blue.opacity(0.1))
.frame(width: 250, height: 250)
.overlay {
Rectangle()
.fill(Color.blue)
.frame(width: 50, height: 50)
}
Next, we’ll create a drag gesture along with a State variable of type CGSize to track the distance the user has dragged. We update the State variable with the drag translation value during the gesture and reset it to zero with animation in the onEnded block.
@State var dragOffset: CGSize = .zero
var dragGesture: some Gesture {
DragGesture()
.onChanged { value in
dragOffset = value.translation
}
.onEnded { value in
withAnimation(.bouncy) {
dragOffset = .zero
}
}
}
We can assign the dragOffset value to the offset of the small rectangle using the .offset modifier and also add the gesture using .gesture() modifier.
.offset(dragOffset) .gesture(dragGesture)
With this setup, the small square can be moved freely, even outside the bounds of the larger one. Next, let’s explore how we can restrict its movement to stay within the bounds of the larger square.
Given the dimensions of the large rectangle (250x250) and the small rectangle (50x50), we can deduce that the maximum translation required to move the small square to the edge would be exactly 100. This is because the difference in size between the two rectangles is (250 - 50) / 2 = 100. We’ll create a variable to store this value for easy reference.
let threshold: CGFloat = 100
By dividing the vertical and horizontal translation values from the drag gesture by the maximum allowable translation, we can normalize these values to a range of 0 to 1/-1 (and beyond). Instead of using the raw translation values, this normalized value can be applied to control the translation and other effects on the view more intuitively.
let width = value.translation.width / threshold let height: CGFloat = value.translation.height / threshold
Since we want the smaller square to stay within the bounds of the larger one, we can cap the normalized values between -1 and 1, and then use these capped values to calculate and assign the drag offset. To calculate the offset we just need to multiply the value of threshold to the dragOffset when we apply it to the view.
dragOffset = CGSize(width: max(min(width, 1), -1), height: max(min(height, 1), -1)) . . . // Small Rectangle .offset(x: dragOffset.width * threshold, y: dragOffset.height * threshold)
Conclusion
Normalization might seem counterintuitive at first, as we could simply cap the values between -100 and 100. However, it simplifies the process of applying effects beyond just offset. For example, opacity typically ranges from 0 to 1, and using normalized values makes it straightforward to adjust the opacity dynamically as the user drags across the screen. With values consistently mapped between 0 and 1, applying such effects becomes more flexible.
In the next part of this article we’ll explore how normalizing values allows us to build more engaging user experiences, by building an animation that showcases this approach.
#Swift #SwiftUI #iOSDev #iOSDevelopment #MobileAppDevelopment #AppleDeveloper #Xcode #UserExperience #SoftwareDevelopment #TechBlog #DevCommunity
