How to rotate image around center point automatically with finger touch

Question

On iPhone, how to implement rotating image around the center point using finger touch ?

Just like wheel, if you put finger on the iPhone screen , then move suddenly, then the image becoming rotating around center point just like the wheel, after a while, it becomes more and more slow , finally stop.

Who can help to give some pieces of codes (Object-C) or some suggest ?

score 2 · Answer 1 · answered Aug 02 '11 at 09:42

I was working with a "spin the bottle"-app yesterday. On the window I have a ImageView with an bottle that's suppose to response to touches and rotate the way the user swipes his finger. I struggled to get my ImageView to rotate during the touch-events (TouchesBegan, Touchesoved, TouchesEnd). I used this code in TouchesMoved to find out the angle in witch to rotate the image.

public override void TouchesMoved (NSSet touches, UIEvent evt)
{    
  PointF pt = (touches.AnyObject as UITouch).LocationInView(this);

  float x = pt.X  - this.Center.X;
  float y = pt.Y  - this.Center.Y;
  double ang =  Math.Atan2(x,y);

  // yada yada, rotate image using this.Transform
}

THIS IS IMPORTANT! When the ImageView rotates, even the x & y-coordinates changes. So touching the same area all the time would give me different values in the pt and prePt-points. After some thinking, googeling and reading I came up with an simple solution to the problem. The "SuperView"-property of the ImageView.

PointF pt = (touches.AnyObject as UITouch).LocationInView(this.SuperView);

Having that small change in place made it alot easier, no i can use the UITouch-metohs LocationInView and PreviousLocationInView and get the right x & y coordinates. Her is parts of my code.

float deltaAngle;

public override void TouchesMoved (NSSet touches, UIEvent evt)
{
    PointF pt = (touches.AnyObject as UITouch).LocationInView(this.Superview);

    float x = pt.X  - this.Center.X;
    float y = pt.Y  - this.Center.Y;
    float ang =  float.Parse(Math.Atan2(dx,dy).ToString());


    //do the rotation
     if (deltaAngle == 0.0) {
       deltaAngle = ang;
     }
else
    {
      float angleDif = deltaAngle - ang;
      this.Transform = CGAffineTransform.MakeRotation(angleDif);
    }   
}

Hope that helped someone from spending hours on how to figure out how to freaking rotate a bottle! :)

score 1 · Answer 2 · edited May 23 '17 at 10:32

I would use the affine transformations - yuou can assign a transformation to any layer or UI element using the transform property.

You can create a rotation transform using CGAffineTransform CGAffineTransformMakeRotation( CGFloat angle) which will return a transformation that rotates an element. The default rotation should be around the centerpoint.

Be aware, the rotation is limited to 360 degrees, so if you want to rotate something more than that (say through 720 degrees) - you have to break the rotation into several sequences.

You may find this SO article useful as well.

score 1 · Answer 3 · answered Jul 13 '09 at 15:32

The transform property of a view or layer can be used to rotate the image displayed within. As far as the spinning part goes, you just track the location and movement of touches in your view with touchesBegan, touchesMoved, and touchesEnded.

Use the distance and time between the touches updates to calculate a speed, and use that to set a rotational velocity. Once you start the image spinning, update the position periodically (with an NSTimer, maybe), and reduce the rotational velocity by some constant.

How to rotate image around center point automatically with finger touch

3 Answers3

Linked