Nowadays is very common to find inertia animations in screens elements in multi-touch devices like tablets and smart phones. One of these animations is a page sliding. When you move the virtual page it goes like it had mass and because of the effect of friction it stop after some seconds.
This article will show the equations to simulate this animation, including impact in a spring-damper border.
->
v0, x0 |
.--.
.----' m '--. /\/\/\--| spring
'-()-----()-' ----]===| damper
----------------------------------------------
|
xborder
A body sliding on a floor will be by effect of a force called kinetic friction. This force is against the movement and it will slow the body until it stops.
We are not considering the effect of air, because we want to simulate objects likes a paper and the air efect in this case is very low.
Because the force of the kinetic friction is constant the movement will have a constant acceleration.
(The acceleration will have the opposite sign of initial velocity. v0)
For this simulation we can specify the acceleration directly.
The equations of this movement are:
2
a t
#1 x(t) = x0 + v0 t + ----
2
#2 v(t) = v0 + a t
Where:
v(t) : velocity
x(t) : position
x0 : initial position
v0 : initial velocity
a : acceleration
t : time
Some other results are useful:
v(t) = v0 + a t
0 = v0 + a t
v0
tstop = - ---
a
Replace t by tstop in #1
2
v0
xstop = x0 - ----
2a
If xstop is before the xborder it means the page will not collide.
if xstop > xborder it means we will have collision with the border.
To find out when the collision occurs we solve for t in
equation #1
2
a t
xborder = x0 + v0 t + -----
2
solving for t give us:
----------------------------
+ | 2
v0 - \| V0 - 2 a (x0 + xborder)
tborder = -------------------------------------
a
We have two solutions. The correct solution is when tborder > 0 and < tstop.
This solution must exist when xstop > xborder so be aware of numeric rounding errors.
Replace tborder in #2
vborder = v0 + a tborder
We use a spring and damper to stop the page. The main equation (Newton second law) is
Force = m x''
spring force = -k x
damper force = -b x'
Then the equation is:
x'' + b x' + k x = 0
Dividing by m
b k
x'' + --- x'+ --- x = 0
m m
Where:
k : spring constant
b : viscous damping coefficient
m : mass
x : x(t) position
x' : v(t) velocity
x'' : a(t) acceleration
The following parameters are then defined:
-------
| k
w0 = | ---
\| m
w0 is called the natural frequency of the system
b
Z = --------
------
2 \| m k
The second parameter, Z, is called the damping ratio.
The differential equation now becomes
2
x'' + 2 Z w0 x' + w0 x = 0
The value of Z determines the behavior of the system.
When Z = 1, the system is said to be critically damped. A critically damped system converges to zero as fast as possible without oscillating.
When Z > 1, the system is over-damped. An over-damped door closer will take longer to close than a critically damped door would.
Finally, when 0 <= Z < 1, the system is under- damped. In this situation, the system will oscillate at the natural damped frequency.
The system we will choose is critically damped. It means we have some combination of k, m, b, that results Z = 1;
The solution for this system (z = 1) is:
-w0 t
x(t) = e (C1 + C2 t)
C1 = x(0)
C2 = x'(0) + w0 x(0)
x'(0) = v(0) = vborder
Given the initial velocty v0, initial position x0, and xborder (see picture) the algorithm will produce an equation x(t) for the movement.
(a, m, k will be constants)
From t = 0 to t < tstop. ``` 2 a t
2
### Before and After collision
The page started before the border ant hit the
border at tborder.
From t = 0 to t < tborder.
2
a t
2
After tborder
-w0 t
x(t) = e (C1 + C2 t)
C1 = x(0)
C2 = vborder + w0 x(0)
------
| k
w0 = | --- | m
The system of coordinates is in the border in this
case.
You can change values for w0 to modify the response.
Some criteria to stop is missing here.
### After the border x0 > xborder
The page started after the border.
The spring-damper acts in the page.
-w0 t
x(t) = e (C1 + C2 t)
C1 = x(0) C2 = v0 + w0 C1
-------
| k
w0 = | ---- | m ```
The system of coordinates is at xborder. Some criteria to stop is missing here.
Some details are missing to create a complete simulation.
Please note the system of coordinates moved in the border equations. Time is also reset.
[[http://en.wikipedia.org/wiki/Damping]]
Using the same equations we can solve the following system to create a page simulation.
The view is fixed and the page moves.
In this case the aceleration will have two components in x and y.
_________________
| ________ |
| | | |
|/\/\/ | | | | /\/\/\| spring
|===[-- | |View | | --]===| damper
| |________| |
|_________________|
Page
_________________
|________ |
| | |
|/\/\/ | | |/\/\/\| spring
|===[-- |View | |--]===| damper
|________| |
|_________________|
Page
_________________
| ________|
| | |
|/\/\/\| | | /\/\/\| spring
|===[--| | View | --]===| damper
| |________|
|_________________|
Page