January 6, 2013
I recently saw a post on Twitter from @chpwn that described the alogorithm that Apple uses for its “rubber band” or “bungee” scrolling.
b = (1.0 – (1.0 / ((x * c / d) + 1.0))) * d
where:
x = distance from the edge
c = constant value, UIScrollView uses 0.55
d = dimension, either width or height
Anyone who’s used a UITableView app has seen that a slight pull down causes a slow rubber band bounce and pulling the table view down further causes the rubber band effect to be greater.
So I thought I’d play around with this formula to see what results it would produce.
This simple C program shows the results for entered value of x. I used 5, 10, 100, 400 and 960 for the values of x. I set the max value of 960 to represent the height of an iPhone 3, 4, 4s.
#include <stdio.h>
int main (void) {
float b;
int x[5] = { 5, 10, 100, 400, 960 };
const float c = 0.55;
const int d = 960;
for (int i = 0; i <=4; i++) {
b = (1.0 - (1.0 / ((x[i] * c / d) + 1.0))) * d;
printf("Rubber band value for %i = %.2f\n", x[i], b);
}
return 0;
}Here’s the output:
Rubber band value for 5 = 2.74
Rubber band value for 10 = 5.47
Rubber band value for 100 = 52.02
Rubber band value for 400 = 178.98
Rubber band value for 960 = 340.65
This clearly shows that as the distance of the pull down increases (x), the bungee effect increases, but at a decreasing rate.
I found this to be a very interesting exercise and it was fun to see actual numbers representing the behavior that I’ve seen many times.