How to animate map annotation movement correctly? - ios

I'm displaying real time locations of city's buses on MKMapView. My app polls locations with certain interval and updates them on map. I'm trying to animate movement of the map annotations.
I have successfully animated movement with the following code found from this stackoverflow answer:
- (void)moveBusAnnotation:(TKLBus*)bus coordinate:(CLLocationCoordinate2D)coordinate {
[UIView animateWithDuration:0.5f
animations:^(void){
bus.annotation.coordinate = coordinate;
}];
}
Problem is that when user pans or zooms the map while animation is playing, the motion path of the annotation looks weird and buggy. Here's a demonstration:
Notice how the map annotation follows a strange curve instead of straight line. Bus movement is simulated so ignore its strange position on map.
How can I make the animation look more natural or stop animations while map is panned/zoomed?
Edit: The animation seems to do the right thing. It looks weird just because the map annotation's next coordinate is moving while the animation plays. I think the solution would be to prevent animations while user is touching the screen.

Try this:
Set up a bool that will indicate wether the map is being used by the user:
#property (nonatomic, assign) BOOL userIsInteracting;
Then check the users touches in the map:
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
[super touchesBegan:touches withEvent:event];
for (UITouch * touch in touches)
{
CGPoint loc = [touch locationInView:_mapView];
if ([_mapView pointInside:loc withEvent:event])
{
_userIsInteracting = YES;
break;
}
}
}
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
[super touchesEnded:touches withEvent:event];
for (UITouch * touch in touches)
{
CGPoint loc = [touch locationInView:_mapView];
if ([_mapView pointInside:loc withEvent:event])
{
_userIsInteracting = NO;
break;
}
}
}
Now you know when to animate the location in the map:
- (void)moveBusAnnotation:(TKLBus*)bus coordinate:(CLLocationCoordinate2D)coordinate
{
if (_userIsInteracting) return;
[UIView animateWithDuration:0.5f
animations:^(void){
bus.annotation.coordinate = coordinate;
}];
}

Related

MKMapView pin drag from another view

I'm thinking about a Google Map street view pin drag and drop system on iOS. The user selects a pin from another view (let's say UINavigationBar) and drag it to a position on map and then drop it.
I'm a bit lost with it. Do you have a workflow for this type of interaction ?
It is quite a complex task but it can be divided into a couple of simple steps.
Make a custom UIView, which after touching will follow the touch movement.
Example
-(void) touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
_originalPosition = self.view.center;
_touchOffset = CGPointMake(self.view.center.x-position.x,self.view.center.y-position.y);
}
-(void) touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
UITouch *touch = [touches anyObject];
CGPoint position = [touch locationInView: self.view.superview];
[UIView animateWithDuration:.001
delay:0.0
options:UIViewAnimationOptionCurveEaseInOut
animations:^ {
self.view.center = CGPointMake(position.x+_touchOffset.x, position.y+_touchOffset.y);
}
completion:^(BOOL finished) {}];
}
-(void) touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
CGPoint positionInView = [touch locationInView:self.view];
CGPoint newPosition;
if (CGRectContainsPoint(_desiredView.frame, positionInView)) {
newPosition = positionInView;
// _desiredView is view where the user can drag the view
} else {
newPosition = _originalPosition;
// its outside the desired view so lets move the view back to start position
}
[UIView animateWithDuration:0.4
delay:0.0
options:UIViewAnimationOptionCurveEaseInOut
animations:^ {
self.view.center = newPosition
// to
}
completion:^(BOOL finished) {}];
}
When user releases the finger, you will have to get the location of the touch.
Calculate the touch location in map view coordinates and place the pin.
Hope it points you to the right direction.

What does userInteractionEnabled = NO mean and how does it work?

Cocos 2d-iphone 3.0. I am using this code to detect whether a single sprite is touched
-(void) touchBegan:(UITouch *)touch withEvent:(UIEvent *)event {
CGPoint location = [touch locationInView: [touch view]];
CGPoint convertedlocation = [[CCDirector sharedDirector] convertToGL: location];
CGPoint convertedNodeSpacePoint = [self convertToNodeSpace:convertedlocation];
if (CGRectContainsPoint([_sprite boundingBox],convertedNodeSpacePoint))
{
// Remove sprite
}
}
I have some code inside that should remove some other sprites from parent. Logically, when _sprite
is touched second time, application will crash, because other sprites'v been already removed.
I was trying to make _sprite untouchable using _sprite.userInteractionEnabled = NO;, but this has no effect.
What does userInteractionEnabled mean exactly and how would one use this to facilitate touch detection on sprites.
What is the optimal way of handling touches on sprites in my scene?
There is no way to disable interactions on a ccsprite. What you should do is:
bool firstTimeClicked=false;
-(void) touchBegan:(UITouch *)touch withEvent:(UIEvent *)event {
if(firstTimeClicked==true)
{
return NO;
}
CGPoint location = [touch locationInView: [touch view]];
CGPoint convertedlocation = [[CCDirector sharedDirector] convertToGL: location];
CGPoint convertedNodeSpacePoint = [self convertToNodeSpace:convertedlocation];
if (CGRectContainsPoint([_sprite boundingBox],convertedNodeSpacePoint)) {
firstTimeClicked=true;
}
}
What userInteractionEnabled does
When you set userInteractionEnabled=YES on a sprite that mean that user interaction callbacks are going to get called.
So for example in your scene if you would have userInteractionEnabled=NO your -(void) touchBegan:(UITouch *)touch withEvent:(UIEvent *)event would not get called.
What you we're doing
You were detecting the touches in your scene. And then you we're checking what was under that touch location, so if anything was under there it would be detected.
How to accomplish this properly - subclass your CCSprite
You want to handle these kind of behaviours in custom CCSprite classes, because if not your scenes touchBegan is going to turn into a huge buggy if else switch statement.
Believe me, I have been there.
Here is a code example of what this class could look like :
The .h file
#interface SubclassedSprite : CCSprite
#end
And the .m file
#implementation SubclassedSprite
- (void) onEnter
{
[super onEnter];
self.userInteractionEnabled = YES;
}
- (void) touchBegan:(UITouch *)touch withEvent:(UIEvent *)event
{
CCLOG(#"Touch began on sprite");
// Your code when the Sprite was touched [self removeFromParentAndCleanup:YES];
}
#end
This is the proper, scalable way to handle this.
Below code is without taking an extra BOOL variable and it should work for you:
-(void) touchBegan:(UITouch *)touch withEvent:(UIEvent *)event {
CGPoint location = [touch locationInView: [touch view]];
CGPoint convertedlocation = [[CCDirector sharedDirector] convertToGL: location];
CGPoint convertedNodeSpacePoint = [self convertToNodeSpace:convertedlocation];
if (CGRectContainsPoint([_sprite boundingBox],convertedNodeSpacePoint)) {
if(_sprite.userInteractionEnabled)//Here you can remove the children of _sprite. e.g.
{
//Here run some action or do what you want to do. For e.g.
CCFadeTo *fadeOut = [CCFadeTo actionWithDuration:0.5f opacity:0];
CCCallfuncN *clean = [CCCallFuncN actionWithTarget:self SEL:#selector(cleanSpriteChildren:)];
for(id item in _sprite.children)
if(item)
[item runAction:[CCSequence runActions:fadeOut, clean]];
}
else{//Do your own task while _sprite is untouchable}
}
}
-(void)cleanSpriteChildren:(id)sender
{
[item removeFromParentAndCleanUp:YES]
if(([_sprite children] count) == 0)
_sprite.userInteractionEnabled = YES; //Here make the _sprite touchable again
}

Using CGAffineTransformScale with UIAttachmentBehavior (UIDynamicAnimator)

In a subclass of UIButton, I attach the UIButton to a UIAttachmentBehavior that lets a user drag the button around the screen with their finger.
In - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event I add the button to the UIAttachmentBehavior, then add the behavior to the UIDynamicAnimator. During - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event I update the anchor of the UIAttachmentBehavior to the touch point; this creates the desired drag effect.
Now I wish to use CGAffineTransformScale to increase the size of the button when the touch begins so the user can see the button under their finger. My issue is that the transform I apply with CGAffineTransformScale is immediately over written the second I add the attachment behavior. The result is a quick flicker of the button scaling up, but then it returns back to the original size.
I have tried [_animator removeAllBehaviors] before applying the CGAffineTransformScale, then adding the behaviors back. I have also tried [_animator updateItemUsingCurrentState:self] after applying the CGAffineTransformScale, just before adding the attachment behavior. Neither resolve the issue.
UPDATE 1: Thinking about HalR's answer below, I decided to try applying the scale transform with every touch. So, I added the CGAffineTransformScale call to both the touchesMoved: and touchesEnded. I am using CGAffineTransformScale vs CGAffineTransformMakeScale because it allows me to preserve the slight rotation the attachment behavior adds. It got me a lot closer. The button now moves around the screen while being scaled. It isn't perfect though. There is a flicker when you are not moving around the screen, and if you stop moving, but keep the touch down, the button returns to the original size. Almost there...any suggestions?
Here is my updated code:
#interface DragButton : UIButton < UIDynamicAnimatorDelegate >
#import "DragButton"
#import <QuartzCore/QuartzCore.h>
#implementation DragButton
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
[super touchesBegan:touches withEvent:event];
UITouch *touch = [[event allTouches] anyObject];
CGPoint touchLocation = [touch locationInView:self.referenceView];
self.transform = CGAffineTransformMakeScale(1.5, 1.5);
_touchAttachmentBehavior = [[UIAttachmentBehavior alloc] initWithItem:self attachedToAnchor:touchLocation];
[_animator addBehavior:_touchAttachmentBehavior];
}
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
[super touchesMoved:touches withEvent:event];
UITouch *touch = [[event allTouches] anyObject];
CGPoint touchLocation = [touch locationInView:self.referenceView];
self.transform = CGAffineTransformScale(self.transform, 1.5, 1.5);
_touchAttachmentBehavior.anchorPoint = touchLocation;
}
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
[super touchesEnded:touches withEvent:event];
self.transform = CGAffineTransformScale(self.transform, 1.5, 1.5);
[_animator removeBehavior:_touchAttachmentBehavior];
}
How does UIAttachmentBehavior affect a view?
It does it by modifying the view's transform.
In this Ray Wenderlich tutorial Colin Eberhardt logs the transform as the view is affected by the behavior.
Even though the transform is never set, or modified directly, it changes as the view is moved by the behavior.
So you can't set your transform, and hope for it to stay set, because it is being set by the behavior.
In a side note, if you are trying to set the transform to scale by 1.5, you should use this:
self.transform = CGAffineTransformMakeScale(1.5, 1.5);
otherwise every time your touchesBegan is called it will grow by another 50%.
In the documentation for UIDynamicAnimator, its says:
"A dynamic animator automatically reads the initial state (position
and rotation) of each dynamic item you add to it, and then takes
responsibility for updating the item’s state. If you actively change
the state of a dynamic item after you’ve added it to a dynamic
animator, call this method to ask the animator to read and incorporate
the new state."
So just call your transform after adding the behavior, then call updateItemUsingCurrentState:
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
[super touchesBegan:touches withEvent:event];
UITouch *touch = [[event allTouches] anyObject];
CGPoint touchLocation = [touch locationInView:self.referenceView];
_touchAttachmentBehavior = [[UIAttachmentBehavior alloc] initWithItem:self attachedToAnchor:touchLocation];
[_animator addBehavior:_touchAttachmentBehavior];
self.transform = CGAffineTransformMakeScale(1.5, 1.5);
[_animator updateItemUsingCurrentState:self];
}

UIImageView Jumps when Touch Event Occurs

Okay basically what this code currently does is drag an image up and down along the Y axis depending on where the user drags it, and it returns to its original position. My problem is that if someone were to not touch directly on the center of the UIImageView and start dragging it would jolt (very not smooth). Wherever someone is touching the UIImageView and starts dragging the UIImageView jolts a little to go directly on the center of the touch event.
I was thinking about using animation just to move it where the image needs to go, or is there another way?
I apologize if this is an inefficient way to do this. I'm fairly new to the IOS world.
Here's what I have:
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
//Gets location of UIImageView.
self.originalFrame = self.foregroundImage.frame;
}
//This method is used for moving the UIImageView along the y axis depending on touch events.
-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
UITouch *touch = [[event allTouches] anyObject];
if([touch view]==self.foregroundImage) {
CGPoint location = [touch locationInView:self.view];
location.x=self.foregroundImage.center.x;
self.foregroundImage.center=location;
}
}
//This method sets the UIImageView back to its original position.
-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
CGRect newFrame = self.foregroundImage.frame;
newFrame.origin.y = self.originalFrame.origin.y;
[UIView animateWithDuration:1.1 animations:^{
self.foregroundImage.frame = newFrame;
}];
}
You also need to save the first location in touchesBegan, relative to the parent view. Then, you can use that to change the frame by the difference between the previous location and the new location. Please see the following code.
- (void) touchesBegan: (NSSet*) touches
withEvent: (UIEvent*) event
{
if (touches.count == 1)
{
UITouch* touch = [touches anyObject];
self.touchLocation = [touch locationInView: self.view];
}
}
- (void) touchesMoved: (NSSet*) touches
withEvent: (UIEvent*) event
{
if (touches.count == 1)
{
UITouch* touch = [touches anyObject];
CGPoint newTouchLocation = [touch locationInView: self.view];
if (touch.view == self.foregroundImage)
{
/* Determine the difference between the last touch locations */
CGFloat deltaX = newTouchLocation.x - self.touchLocation.x;
CGFloat deltaY = newTouchLocation.y - self.touchLocation.y;
/* Offset the foreground image */
self.foregroundImage.center
= CGPointMake(self.foregroundImage.center.x + deltaX,
self.foregroundImage.center.y + deltaY);
}
/* Keep track of the new touch location */
self.touchLocation = newTouchLocation;
}
}

cocos2d for iphone touch detection on a sprite

I am using ccTouchesBegan and ccTouchesEnded methods to register touches. Everything was ok until I placed some buttons(ccmenuitems) on my node. now when i place my finger down on a button and then move it to any other place of screen ccTouchesEnded method does not calls. What am I doing wrong? How can I detect touches on a button?
some code:
- (void)ccTouchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
CGPoint location = [self convertTouchToNodeSpace: [touches anyObject]];
// here i check if touch is in the right place
if ([self ptInRect:location :CGRectMake(0, center.y - 160, winSize.width, 40)]) {
dragBeginLocation = location;
}
}
- (void)ccTouchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
CGPoint location = [self convertTouchToNodeSpace: [touches anyObject]];
if (ABS(location.x - dragBeginLocation.x) < 8) {
NSLog(#"TAP");
} else {
NSLog(#"SWIPE");
}
}
So, when I begin touch on a sprite and release on background I get nothing in console.
Buttons are in CCMenu, which is higher than background.

Resources