Question

I would like to make a wheel-style menu which allows the user to rotate the wheel (a UIImageView) to see various options. In the top half of the wheel there is also a selection indicator and the user can select a particular option by dragging the desired option around the wheel and position underneath the selection indicator (just like when using a UIPickerView).

Following the SO post iPhone – How to build a roulette like wheel? I have been able to implement a wheel which tracks user touches and rotates the wheel accordingly. However, I need two additional functions:

1. Implement inertial scrolling so that the user can do a swipe on the wheel and it rotates around and gracefully slows down / decelerates, a bit like the wheel on the “Wheel of Fortune” game show.

2. When the wheel does finish decelerating and comes to a complete stop it will automatically stop on one of the options, so that a single option appears underneath the selection indicator (like a UIPickerView), rather than potentially having two options both half under the selection indicator.

I am unsure how to go about implementing these features, so any assistance would be greatly appreciated.

Answer 1

As a starting point, what you probably want to do is keep track of how much the user has been scrolling the wheel. When the user starts touching the wheel, save the date and current angle with

NSDate *lastDate = [NSDate date];
double lastAngle = //however you're determining the wheel angle

Then on each touchMoved, update those values with the current time and angle. When you finally get to touchEnded, get the time interval since the last saved date and use that to determine the rotational speed of the wheel:

NSDate *currentDate = [NSDate date];
NSTimeInterval elapsedTime = [currentDate timeIntervalSinceDate];
double rotationalSpeed = (currentAngle - lastAngle) / elapsedTime;

Now you have the angle/second that the wheel is rotating under the user’s finger. The goal would be to keep up that same speed, so perhaps just starting a timer that fires every fraction of a second and rotates the wheel to rotationalSpeed * timeElapsedSinceLastTimerFired. Calculate the last by saving the actual date the timer fired method is called similar to how you tracked the time between wheel angle updates above. Alternately, you could have longer intervals between angle updates, and animate the rotation over time. When your short animation completes, you just start off another one.

Those would keep the wheel turning at the user’s last speed indefinitely. To taper it off, you could just have a timer that fires every 0.1 seconds or something perhaps and decreases the rotationalSpeed until it is at or below zero. Even better, how about storing the date that the user let go of the wheel, and then just applying a portion of rotationalSpeed depending on how long it’s been since the user stopped interacting. Something like:

CGFloat secondsUntilWheelShouldStop = 5;
NSTimeInterval intervalSinceUserStopped = [[NSDate date] timeIntervalSinceDate:userStoppedDate];

// Determine fraction of secondsUntilWheelShouldStop that's elapsed
CGFloat portionOfCooldownTimeElapsed = intervalSinceUserStopped / secondsUntilWheelShouldStop;
if (portionOfCooldownTimeElapsed >= 1.0) {
    // Time has run out, so call your method to round to nearest "snap-to" angle or something and end.
    [self snapWheelRotation];
} else {
    // Rotate the wheel by the appropriate fraction of rotationalSpeed
    double angleToRotate = (portionOfCooldownTimeElapsed * rotationalSpeed) * elapsedTimeSinceLastUpdate;
    [self rotateWheelByAngle:angleToRotate];
}

When you stop the wheel, just determine what the nearest snap point is, and animate the wheel to that position. You should add something to touchesBegan that basically ends all of these timers and animation when the user touches the wheel as well so it doesn’t animate underneath them.

I’m not sure if that’s the most elegant solution, but it’s where I would start if I were trying to solve the problem. Good luck!