Timing and easing
Learning paths through this topic
Auto-advance a banner carousel that waits while a finger rests on it
A row of offers or levels that moves on by itself is lively, but it must not snatch the page away while someone is reading or dragging it. When it resumes after a touch, should it start counting again or continue? And a manual swipe should earn a full wait. Here are the rules that make it feel considerate.
Flip a card so the face changes at the edge, even if the player flips back mid-turn
Memory and card games live on the flip. The picture must change at the exact moment the card is edge-on, and if the player taps again in the middle, the card should turn back from where it is, not start over or finish first. Here is a flip driven by its angle that handles all of this.
Toss a coin so it tumbles realistically and lands on the side already chosen
The outcome of a coin toss is rolled in the game logic, and the picture must agree. Counting turns in whole rounds gets the wrong side half the time, and a flight time that has nothing to do with the height looks like a rubber ball. Here is how the number of half turns and the flight time are worked out.
Fly confetti with air drag so it floats down, and know where it is at any time
Confetti that only falls with gravity drops like stones. Adding air drag makes it float, but stepping it frame by frame gives different results on different phones, and you cannot skip ahead to a frame for a replay. A closed formula solves all three. Here it is, with the check that proves it matches a slow simulation.
Show a growing plant in stages of different lengths, with skips and boosts that fit
A seed becomes a sprout, a bud and a fruit, and each step takes a different time. Working out which picture belongs to the elapsed time looks easy until a boundary falls exactly on the clock, the fruit is done, or a fertiliser should take off a share of what remains. Here are the small functions that keep it all consistent.
Make a crowd of identical creatures bob out of step, the same way every time
Twenty identical creatures that all bob at the same moment look like a machine. Random offsets fix it but change on every start and break screenshots and tests, and a speed change halfway makes the whole crowd jump. Here is a stable way to give each one its own beat and keep it smooth.
Spin a prize wheel so it ends on the prize that was already decided
In many games the result of a spin is decided first, and the wheel must then act it out convincingly. Stopping at a random angle and reading what is under the pointer risks the wrong prize and a pointer sitting on a line. Here is how to work backwards from the prize to the angle, and always spin forward.
Stop slot reels one after another so each lands on its symbol at the same top speed
A slot machine where the result is rolled first must stop each reel exactly on its symbol. If every reel simply gets a different stopping time, the later ones look as if they were sped up. And choosing the distance carelessly can make a reel roll backwards. Here is a plan that avoids both.
Loop a pointing hand that shows a drag, without teleporting back in plain sight
A tutorial hand that shows how to drag a piece should repeat until the player does it. A loop that simply restarts makes the hand jump from the end back to the start where everyone can see it, and a drag without a visible press and release does not say what to do. Here is the timeline of a hand that reads well.
Build a charge shot with levels, a quick tap and a fizzle when held too long
A weapon you hold to charge seems simple until a quick tap wastes a half-charged shot, the meter freezes at full forever, or the level shown differs from the level fired. Here is the timing that makes the shown level and the fired level always agree.
Keep a hit combo alive with a timer that gets stricter as it grows
A combo counter that always gives the same time to land the next hit is too easy at ten hits and too harsh at two, and it keeps ticking while the screen freezes on an impact. Here is a combo clock that starts generous, tightens fairly and pauses when it should.
Make a countdown show 0 only at the very end, with a tick each second
A timer that shows 0:00 while a fraction of a second is still left, or flashes 1 for a blink, or ticks twice in a row, feels wrong and robs players of the last moment. Here is how to round the time shown and trigger the ticks exactly once.