4

I'm trying to create a new kind of rotary control with a look and feel of a real massive wheel supported on a pin, able to rotate around it's center point with a certain degree of damping, which will eventually bring the wheel to a halt. Think "wheel of fortune".

Example rotary control

Rotary control sample project

When working with native UITableView and/or UIScrollView, they can be "flicked" in one direction and continue scrolling in that direction for a while. I know similar effect may be achieved with the animation curve.

What I'm interested in is how to calculate how far the interface element should scroll/rotate based on the distance/speed that the finger travelled. Different types of "flicks" would produce different behavior by transferring "momentum" to the wheel. Can anyone suggest examples of such calculations?

I'm particularly interested in applying the same concept of inertia to a custom rotary control as described here: Rotary control on stack overflow . The current examples, and even the convertbot app mentioned in the examples do not use inertia. The wheel simply follows the finger and snaps to pre-defined positions. I want to make a similar wheel feel like it has real mass to it, so it can be flicked and will spin in a predictable manner until coming to a smooth halt. (Think "wheel of fortune" type shows).

How can I achieve this kind of "wheel of fortune" inertia-based behavior for a rotary control that would make the control feel like it has real mass to it?

Thank you!

Community
  • 1
  • 1
Alex Stone
  • 46,408
  • 55
  • 231
  • 407

2 Answers2

9

Implementing a fully realistic mass effect is not that trivial, and maybe requires too much work (especially for such a simple task), thus I'd ignore physic's laws (except those strictly needed) and make everything simpler.

A momentum is r x F where r is the radius and F is the force applied. Since it depends on the radius, the more you get far from the center of your wheel the greater will be the momentum. Let's ignore it and suppose that the force is tangent and is applied always at r=wheelWidth/2.

Besides, instead of computing force you may simply make it depends on the speed of the gesture (easier than computing force, since it requires mass and acceleration). Thus we can image that a faster touch will correspond to a greater momentum.

Of course, the gesture will never be perfectly horizontal or vertical, thus you can assume that every time there are two torques applied: the first corresponding to the vertical movement and the second to the horizontal.

You can get the gesture speed you may simply compute initial and final position of the touch, and divide their difference by the time elapsed.

To get the effect of slowing down you must assume that, when the wheel is moving, there is always an opposite torque. You can define it at compile time or make it dependent from the width of your wheel (such that larger wheels will slow down faster).

Now you have pretty much all that you need...good luck :)

Manlio
  • 10,768
  • 9
  • 50
  • 79
2

I found that using iCarousel, it is possible to create a wheel like control with inertia/momentum!

Harsh Mehrotra
  • 65
  • 10
Alex Stone
  • 46,408
  • 55
  • 231
  • 407