Accelerating elements with touchesBegan: and touchesEnded:

Question

I have a UIImageView that I try to accelerate based on the distance it has been dragged and how fast it was dragged. By accelerating I mean that when touchesEnded: is called, the imageView should slide further in the direction it was dragged. How far and how fast it should slide depends on the distance and the speed with which it was dragged.

At this point I am able to drag the imageview around and get the distance it was dragged + how long time it took. Based on this I can calculate the speed and a direction vector.

But I am struggling with the slide performed on the imageview by touchesEnded:.

My questions is: Is there any common or smart way to perform this "sliding" effect on the UIImageView that I am trying do to?

I gladly accept any solution or tip that might help out.

Thanks.

Answer 1

The solution to this problem is far simpler than I had expected. The following is what I have come up with (this is the simple version, without all the fancy code):

@interface myViewController {
    CGPoint _velocity;
    CGFloat _damping;
    UIImageView *_myImageView;
}

- (void)viewDidLoad {
    _velocity = CGPointZero; // x = 0, y = 0

   // Accelerate _myImageView 
   NSTimer *myTimer = [NSTimer scheduledTimerWithTimeInterval:0.02f // Update frequency 
                                               target:self 
                                             selector:@selector(slideImageView) 
                                             userInfo:nil 
                                              repeats:YES];
}

@implementation myViewController

- (void)slideImageView {
    // No need to move _myImageView when _velocity = 0
    if (_velocity.x > 0 && _velocity.y > 0)
        CGPoint position; // The next position
        position = _myImageView.center;

        position.x += _velocity.x / 30;
        position.y += _velocity.y / 30;

        // Damp _velocity with damping factor
        _velocity.x *= _damping;
        _velocity.y *= _damping;

        // Bounce on edges
        if (position.x < X_AXIS_MIN_VALUE || position.x > X_AXIS_MAX_VALUE)
            _velocity.x = -_velocity.x;

        if (position.y < Y_AXIS_MIN_VALUE || position.y > Y_AXIS_MAX_VALUE)
            _velocity.y = -_velocity.y;

        // Move 
        _myImageView.center = position;
    }
}

// Move been around by implementing touchesBegan: and touchesMoved:
// There are a million tutorials on how to do this.

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
    // Do whatever you need to do and calculate x- and y-axis velocity,
    // maybe based on the distance between the last 5 points / time.
    CGPoint mySpeed;
    mySpeed.x = //the new x speed;
    mySpeed.y = //the new y speed
    _velocity = mySpeed;
}

@end

The above code (+ the missing implementation) allows you to drag a UIImageView across the screen. When you release your finger, the ImageView will continue sliding over the screen, bouncing on the edges if they're hit. The faster you move your finger, the more the ImageView will accelerate (well, based on how you calculate the velocity).

I hope that anyone who has struggled with an issue like this will find it useful.