Rotate Knob Image by touch

HoofSC · August 2008

Hi,

Banging my head against a wall here. I think I'm missing something elementary.

Here is what I would like to accomplish:

1. Display a UIImageView with a graphic of a volume knob.
2. Detect swipeRight/swipeLeft gesture.
3. Rotate the image in radians + or - based on the direction of the swipe.

Eventually I would like to be able to "scale" the rotation based on the distance of the swipe, but for now, I'm just trying to get a basic working model.

Here's the problem:

I can do all 3 steps, however I am using a CGAffineTransformMakeRotation(radians)

If I swipe in the opposite direction, it treats the original "zero angle" AS 0 radians, whereas I need to 'reset' the zero angle after the first animation.

Any thoughts? Is it just simple logic I'm missing??


-(void)processSwipeRight:(NSSet*)touches withEvent:event {
	float singleTurnRadians = 36 * 3.14157 / 180;

	[UIView beginAnimations:nil context:NULL];
	[UIView setAnimationDuration:.5];
	CGAffineTransform transform = CGAffineTransformMakeRotation(singleTurnRadians);
	knobImageView.transform = transform;
	[UIView commitAnimations];
	notch += 1;	
}
-(void)processSwipeLeft:(NSSet*)touches withEvent:event {
	float singleTurnRadians = 36 * 3.14157 / 180;
	
	[UIView beginAnimations:nil context:NULL];
	[UIView setAnimationDuration:.5];
	CGAffineTransform transform = CGAffineTransformMakeRotation(-singleTurnRadians);
	knobImageView.transform = transform;
	[UIView commitAnimations];
        notch -= 1;	
	
}

Thanks in advance.

scottiphone · August 2008

Make it relative to where it is now. Get value at the start of the method (or save it from before) and offset to relative to that.

HoofSC · August 2008

scottiphone;16111 said:
Make it relative to where it is now. Get value at the start of the method (or save it from before) and offset to relative to that.

Thanks Scott

Any suggestion on how to do that exactly? I've tried a number of things including:


/*above -- turnRadians = 0.0*/

-(void)processSwipeRight:(NSSet*)touches withEvent:event {
	float singleTurnRadians = 36 * 3.14157 / 180;

        turnRadians = turnRadians + singleTurnRadians;

	[UIView beginAnimations:nil context:NULL];
	[UIView setAnimationDuration:.5];
	CGAffineTransform transform =    CGAffineTransformMakeRotation(turnRadians);
	knobImageView.transform = transform;
	[UIView commitAnimations];
	notch += 1;	
}
-(void)processSwipeLeft:(NSSet*)touches withEvent:event {
	float singleTurnRadians = 36 * 3.14157 / 180;
	
        turnRadians = turnRadians - singleTurnRadians;

	[UIView beginAnimations:nil context:NULL];
	[UIView setAnimationDuration:.5];
	CGAffineTransform transform = CGAffineTransformMakeRotation(turnRadians);
	knobImageView.transform = transform;
	[UIView commitAnimations];
        notch -= 1;	
	
}

But that still does not working properly. Somehow the behavior of CGAffineTransformMakeRotation(angle) doesn't seem to get the job done... :(

Any code suggestions?

scottiphone · August 2008

If you want 1:1 movement you might skip the animation function. This is fine if you want it to autorotate a set amount but for interaction you might as well just set it directly immediately.

You could calculate the degrees around using atan2(?) relative to the the center.
(i.e. touch is x,y relative to center xy so it's z degrees)
As you move your finger you recalc and use the difference to rotate.

HoofSC · August 2008

scottiphone;16118 said:
If you want 1:1 movement you might skip the animation function. This is fine if you want it to autorotate a set amount but for interaction you might as well just set it directly immediately.

I do want interaction, but I guess I'm confused as to the way to "set" the rotation. The CGAffineTransformMakeRotation on every swipe method call is giving me weird erratic results (using the code block above) whether I call the UIView animation methods or not...

Something simple I'm missing?

----EDITED------

Thanks Scott. It turns out that the rotation does work. It appears to be a problem with my swipe method detection that is giving erratic results.

Here is what I have:


-(void)touchesBegan:(NSSet*)touches withEvent:(UIEvent*)event {
	UITouch *touch = [touches anyObject];
	startTouchPosition = [touch locationInView:self];
	
/*implemented this to test the progressive rotation, it works	
if([touch tapCount] == 2) { 
		turnRadians += singleTurnRadians;
		knobView.transform =  CGAffineTransformMakeRotation(turnRadians);
	}
*/

	
	
}
-(void)touchesMoved:(NSSet*)touches withEvent:(UIEvent*)event {
	UITouch *touch = [touches anyObject];
	CGPoint currentTouchPosition = [touch locationInView:self];
	
	//if the swipe tracks correctly
	if (fabsf(startTouchPosition.x - currentTouchPosition.x) >= HORIZ_SWIPE_DRAG_MIN &&
		fabsf(startTouchPosition.y - currentTouchPosition.y) <= VERT_SWIPE_DRAG_MAX) {
			//it appears to be a swipe
		if (startTouchPosition.x < currentTouchPosition.x) {
			[self processSwipeRight:touches withEvent:event];
		}
		else {
			[self processSwipeLeft:touches withEvent:event];
		}
	}
	else {
			//process non-swipe event
	}
}

Howdy, Stranger!

Forums

Rotate Knob Image by touch

Replies