Move a UIImage at a angle with acceleration - objective-c

I have a series of UIImageViews all hooked up in IBOutlet collection that I would like to move at whatever angle they are facing at a set acceleration speed.
The first thing I do is randomly put them at an angle (ie: 35, 90, 70, 270 degrees) and now I would like to move them.
The images are icons of planes and I would like to move each plane icon at a certain angle (whatever angle they are currently facing) and at a certain acceleration (say 2-4 pixels or something).
The only issue is I am not really sure how to move a UIImage at a given angle at a given acceleration.
Is there are a way to do this with Core Animation?
Many thanks
Update:
I rewrote the method with seperate Objects to handle the Airplanes themselves and try to use UIBezierPath;
// Angles for airplane icons
VICAirplane *plane1 = [[VICAirplane alloc] initWithX:48 withY:104 withAngle:140 withSpeed:5];
VICAirplane *plane2 = [[VICAirplane alloc] initWithX:50 withY:250 withAngle:60 withSpeed:7];
VICAirplane *plane3 = [[VICAirplane alloc] initWithX:280 withY:75 withAngle:240 withSpeed:12];
VICAirplane *plane4 = [[VICAirplane alloc] initWithX:230 withY:270 withAngle:120 withSpeed:3];
VICAirplane *plane5 = [[VICAirplane alloc] initWithX:148 withY:225 withAngle:85 withSpeed:10];
VICAirplane *plane6 = [[VICAirplane alloc] initWithX:175 withY:225 withAngle:85 withSpeed:8];
self.airplanes = #[plane1,plane2,plane3,plane4,plane5,plane6];
UIImage *sprite = [UIImage imageNamed:#"Plane Shadow"];
CGFloat spriteWidth = sprite.size.width;
CGFloat spriteHeight = sprite.size.height;
for (VICAirplane *planeObj in self.airplanes) {
CALayer *plane = [CALayer layer];
plane.bounds = CGRectMake(0, 0, spriteWidth, spriteHeight);
plane.position = CGPointMake(planeObj.x, planeObj.y);
plane.contents = (id)(sprite.CGImage);
CGAffineTransform rotateTransform = CGAffineTransformMakeRotation(planeObj.angle);
[plane setAffineTransform:rotateTransform];
[self.view.layer addSublayer:plane];
// Animate it
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(100.0, 100.0)];
[path addLineToPoint:CGPointMake(200.0, 200.0)];
[path addLineToPoint:CGPointMake(100.0, 300.0)];
CAKeyframeAnimation *anim = [CAKeyframeAnimation animationWithKeyPath:#"position"];
anim.path = path.CGPath;
anim.rotationMode = kCAAnimationRotateAuto;
anim.repeatCount = HUGE_VALF;
anim.duration = 8.0;
anim.autoreverses = YES;
[plane addAnimation:anim forKey:#"race"];
}
What I'd like to do is generate UIBezierPath based off the angle of each plane and move it at the speed
but I don't think moveToPoint will help solve this
Thanks

I have a potental alternative solution which I am now using/working on;
// Angles for airplane icons
_sprite = [UIImage imageNamed:#"Plane"];
CGFloat spriteWidth = _sprite.size.width;
CGFloat spriteHeight = _sprite.size.height;
self.velocity=1.0;
//Random x&y points
CGFloat x;
CGFloat y;
//VICAirplane *plane1 = [[VICAirplane alloc] initWithX:48 withY:104 withAngle:0 withSpeed:10];
x = (CGFloat) (arc4random() % (int) self.view.frame.size.width);
y = (CGFloat) (arc4random() % (int) self.view.frame.size.height);
UIImageView *theBug = [[UIImageView alloc] initWithFrame:CGRectMake(x, y, spriteWidth, spriteHeight)];
[theBug setBackgroundColor:[UIColor redColor]];
[theBug setImage:_sprite];
[self.view addSubview:theBug];
double delayInSeconds = 1;
dispatch_time_t popTime = dispatch_time(DISPATCH_TIME_NOW, (int64_t)(delayInSeconds * NSEC_PER_SEC));
dispatch_after(popTime, dispatch_get_main_queue(), ^(void){
//Calculate the angle to rotate
CGFloat newX = (CGFloat) (arc4random() % (int) self.view.frame.size.width);
CGFloat newY = (CGFloat) (arc4random() % (int) self.view.frame.size.height);
CGPoint rotateToLocation = CGPointMake(newX, newY);
theBug.layer.anchorPoint = CGPointMake(0.5, 0);
float angleToRotate = atan2f(theBug.transform.tx-newX, theBug.transform.ty - newY);
if (theBug.transform.tx < newX)
angleToRotate *= 1;
[UIView animateWithDuration:4
delay:0
options:UIViewAnimationOptionCurveLinear
animations:^{
theBug.transform = CGAffineTransformRotate(theBug.transform, angleToRotate);
} completion:^(BOOL finished) {
[UIView animateWithDuration:2
delay:0.0
options:UIViewAnimationOptionCurveLinear
animations:^{
theBug.center = rotateToLocation;
} completion:^(BOOL finished) {
NSLog(#"Finished");
}];
}];
});
This is my solution for the issue. Many thanks.

Related

Implementing a clock face in UIView

I'm trying to implement a clock face in UIView - without much luck. The problem is that the hands on the clock face end up in totally the wrong position (i.e. pointing to the wrong time). I'm pretty sure that the logic of my code is correct - but clearly there's something significantly wrong.
My test app is an iOS Single View Application. ViewController.h looks like this:
#import <UIKit/UIKit.h>
#interface Clock : UIView {
UIColor* strokeColour;
UIColor* fillColour;
float strokeWidth;
NSDate* clockTime;
CGPoint clockCentre;
float clockRadius;
}
- (id)initWithCentre:(CGPoint)centre
radius:(float)radius
borderWidth:(float)width
facecolour:(UIColor*)fill
handcolour:(UIColor*)handFill
time:(NSDate*)time;
#end
#interface ViewController : UIViewController
#end
and ViewController.m looks like this:
#import "ViewController.h"
#implementation Clock
- (id)initWithCentre:(CGPoint)centre
radius:(float)radius
borderWidth:(float)width
facecolour:(UIColor*)fill
handcolour:(UIColor*)handFill
time:(NSDate*)time {
CGRect frame = CGRectMake(centre.x-radius,
centre.y-radius,
radius*2,
radius*2);
if (self = [super initWithFrame:frame]) {
// Initialization code
strokeColour = fill;
fillColour = handFill;
strokeWidth = width;
clockRadius = radius;
clockTime = time;
clockCentre.x = frame.size.width/2;
clockCentre.y = frame.size.height/2;
}
return self;
}
- (void)drawRect:(CGRect)rect {
double red, green, blue, alpha;
CGRect circleRect;
circleRect.origin.x = rect.origin.x+strokeWidth;
circleRect.origin.y = rect.origin.y+strokeWidth;
circleRect.size.width = rect.size.width - (strokeWidth*2);
circleRect.size.height = rect.size.height - (strokeWidth*2);
CGContextRef contextRef = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(contextRef, strokeWidth);
[fillColour getRed:&red green:&green blue:&blue alpha:&alpha];
CGContextSetRGBFillColor(contextRef, red, green, blue, alpha);
[strokeColour getRed:&red green:&green blue:&blue alpha:&alpha];
CGContextSetRGBStrokeColor(contextRef, red, green, blue, alpha);
CGContextFillEllipseInRect(contextRef, circleRect);
CGContextStrokeEllipseInRect(contextRef, circleRect);
CGContextSetLineWidth(contextRef, strokeWidth);
[strokeColour getRed:&red green:&green blue:&blue alpha:&alpha];
CGContextSetRGBStrokeColor(contextRef, red, green, blue, alpha);
float hourAngle, minuteAngle, secondAngle, angle;
double endX, endY;
NSCalendar *cal = [[NSCalendar alloc]initWithCalendarIdentifier:NSCalendarIdentifierGregorian];
NSUInteger units = NSCalendarUnitHour | NSCalendarUnitMinute | NSCalendarUnitSecond;
NSDateComponents *components = [cal components:units fromDate:clockTime];
hourAngle = (components.hour /12.0) * M_PI * 2.0;
minuteAngle = (components.minute / 60.0) * M_PI * 2.0;
secondAngle = (components.second / 60.0) * M_PI * 2.0;
//minute hand
angle = minuteAngle;
endX = cos(angle) * (clockRadius*0.85) + clockCentre.x;
endY = sin(angle) * (clockRadius*0.85) + clockCentre.y;
CGContextMoveToPoint(contextRef,clockCentre.x,clockCentre.y);
CGContextAddLineToPoint(contextRef,endX,endY);
CGContextStrokePath(contextRef);
//hour hand
angle = hourAngle;
endX = cos(angle) * (clockRadius*0.65) + clockCentre.x;
endY = sin(angle) * (clockRadius*0.65) + clockCentre.y;
CGContextSetLineWidth(contextRef, strokeWidth*1.5);
CGContextMoveToPoint(contextRef,clockCentre.x,clockCentre.y);
CGContextAddLineToPoint(contextRef,endX,endY);
CGContextStrokePath(contextRef);
}
#end
#interface ViewController ()
#end
#implementation ViewController
- (UIView*)drawClockFaceWithCentre:(CGPoint)centre
radius:(float)radius
time:(NSDate*)time
colour:(UIColor*)colour
backgroundColour:(UIColor*)bgcolour {
UIView* clock = [[Clock alloc]initWithCentre:centre
radius:radius
borderWidth:6.0
facecolour:bgcolour
handcolour:colour
time:time];
clock.backgroundColor = [UIColor clearColor];
return clock;
}
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
CGPoint centre;
centre.x=200;
centre.y=200;
[self.view addSubview:[self drawClockFaceWithCentre:centre
radius:100
time:[NSDate date]
colour:[UIColor blackColor]
backgroundColour:[UIColor whiteColor]]];
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
#end
I'm sure it's something very simple that I've done wrong - a mistake in my maths. Can anyone see the bug (and any other suggestions for improvements that could be made would be welcome, bearing in mind (of course) that this is just a simple test harness).
As I wrote in the comment, consider dropping doing everything in drawRect and use layers. Also, instead of calculating trigonometry to draw correct path, consider just drawing hands at 12:00 and transform rotate them with correct angle. You could do it like this in init...
CAShapeLayer *faceLayer = [CAShapeLayer layer];
faceLayer.frame = self.bounds;
faceLayer.fillColor = [UIColor whiteColor].CGColor;
faceLayer.strokeColor = [UIColor blackColor].CGColor;
faceLayer.path = [UIBezierPath bezierPathWithOvalInRect:faceLayer.bounds].CGPath;
faceLayer.lineWidth = 3.0;
[self.layer addSublayer:faceLayer];
CGPoint middle = CGPointMake(CGRectGetMidX(self.bounds), CGRectGetMidY(self.bounds));
NSCalendar *cal = [[NSCalendar alloc] initWithCalendarIdentifier:NSCalendarIdentifierGregorian];
NSUInteger units = NSCalendarUnitHour | NSCalendarUnitMinute | NSCalendarUnitSecond;
NSDateComponents *components = [cal components:units fromDate:time];
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:middle];
[path addLineToPoint:CGPointMake(middle.x, middle.y-radius*0.5)];
CGFloat hourAreaAngle = (2*M_PI)/12.0;
CAShapeLayer *hourLayer = [CAShapeLayer layer];
hourLayer.frame = self.bounds;
hourLayer.strokeColor = [UIColor redColor].CGColor;
hourLayer.lineWidth = 3.0;
hourLayer.path = path.CGPath;
[self.layer addSublayer:hourLayer];
hourLayer.transform = CATransform3DMakeRotation((components.hour/12.0*(M_PI*2.0))+(hourAreaAngle*(components.minute/60.0)), 0.0, 0.0, 1.0);
[path removeAllPoints];
[path moveToPoint:middle];
[path addLineToPoint:CGPointMake(middle.x, middle.y-radius*0.8)];
CAShapeLayer *minuteLayer = [CAShapeLayer layer];
minuteLayer.frame = self.bounds;
minuteLayer.strokeColor = [UIColor blueColor].CGColor;
minuteLayer.lineWidth = 2.0;
minuteLayer.path = path.CGPath;
[self.layer addSublayer:minuteLayer];
minuteLayer.transform = CATransform3DMakeRotation(components.minute/60.0*(M_PI*2.0), 0.0, 0.0, 1.0);
[path removeAllPoints];
[path moveToPoint:middle];
[path addLineToPoint:CGPointMake(middle.x, middle.y-radius)];
CAShapeLayer *secondsLayer = [CAShapeLayer layer];
secondsLayer.frame = self.bounds;
secondsLayer.strokeColor = [UIColor greenColor].CGColor;
secondsLayer.lineWidth = 1.0;
secondsLayer.path = path.CGPath;
[self.layer addSublayer:secondsLayer];
secondsLayer.transform = CATransform3DMakeRotation(components.second/60.0*(M_PI*2.0), 0.0, 0.0, 1.0);
Note I put my colours and line widths because I'm lazy and didn't want to check your code :P.
If you want to update hands later, just store hands layers as variables and transform rotate them again (just remember to first transform to identity!).

Animate CALayer with incrementing custom property

I want to animate a subclass of CALayer. This layer drawes a "donut"-chart piece.
I set an start- & endAngle to the layer.
I tried with CABasicAnimation
My Layer
+ (BOOL)needsDisplayForKey:(NSString *)key {
return [key isEqualToString:#"endAngle"] ? YES : [super needsDisplayForKey:key];
}
- (void)drawInContext:(CGContextRef)ctx {
CGFloat lineWidth = self.circleRingWidth / 2;
CGPoint center = CGPointMake(self.bounds.size.width/2, self.bounds.size.height/2);
CGFloat radius = (MIN(center.x-1, center.y-1) + lineWidth/2);
CGContextBeginPath(ctx);
CGContextSetAllowsAntialiasing(ctx, YES);
CGContextAddArc(ctx, center.x, center.y, radius - kDefaultRingWidth, self.startAngle,
self.endAngle, NO);
CGContextSetBlendMode(ctx, kCGBlendModeColor);
CGContextSetLineWidth(ctx, lineWidth);
CGContextSetStrokeColorWithColor(ctx, self.color ? self.color.CGColor : [UIColor
clearColor].CGColor);
CGContextDrawPath(ctx, kCGPathStroke);
}
When i call setSelectedIndex
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:#"circleRingWidth"];
animation.duration = 2.0f;
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
animation.fromValue = [NSNumber numberWithFloat:DEFAULT_RING_WIDTH];
animation.toValue = [NSNumber numberWithFloat:SELECTED_RING_WIDTH];
[self.selectedLayer addAnimation:animation forKey:#"circleRingWidth"];
self.selectedLayer.circleRingWidth = SELECTED_RING_WIDTH;

CABasicAnimation - Setting start stroke position

I'm animating the drawing of a basic circle. This works fine, except the animation begins drawing at the 3 o'clock position. Does anyone know how I can make it start at 12 o'clock?
self.circle = [CAShapeLayer layer];
self.circle.fillColor = nil;
self.circle.lineWidth = 7;
self.circle.strokeColor = [UIColor blackColor].CGColor;
self.circle.bounds = CGRectMake(0, 0, 200, 200);
self.circle.path = [UIBezierPath bezierPathWithOvalInRect:self.circle.bounds].CGPath;
[self.view.layer addSublayer:self.circle];
CABasicAnimation *drawAnimation = [CABasicAnimation animationWithKeyPath:#"strokeEnd"];
drawAnimation.duration = 5.0;
drawAnimation.repeatCount = 1.0;
drawAnimation.removedOnCompletion = NO;
drawAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
drawAnimation.toValue = [NSNumber numberWithFloat:1.0f];
drawAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
[self.circle addAnimation:drawAnimation forKey:#"drawCircleAnimation"];
You can use bezierPathWithArcCenter instead of bezierPathWithOvalInRect, because that allows to specify a start and end angle:
CGFloat radius = self.circle.bounds.size.width/2; // Assuming that width == height
self.circle.path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(radius, radius)
radius:radius
startAngle:(-M_PI/2)
endAngle:(3*M_PI/2)
clockwise:YES].CGPath;
See the bezierPathWithArcCenter documentation for the meaning of the angles.

Objective C UIImageView rotation with animation not working good

I am creating compass in a table cell so I have problem with the rotation of the image view it start all over again from the position which is the image in the resources.
this is part of my code:
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:0.5];
[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
[UIView setAnimationDelegate:self];
if(cellValue.direction == 0){
cell.compass.transform = CGAffineTransformRotate(cell.compass.transform,DegreesToRadians([cellValue.fixedDirection floatValue]));
} else {
cell.compass.transform = CGAffineTransformRotate(cell.compass.transform,DegreesToRadians([cellValue.direction floatValue]));
}
[UIView commitAnimations];
cell.compass is UIimageView and I have image in it that is arrow vertical. if the direction is 0 then it should get to that degree and after it get angle from compass it goes to the else clause. So the image starst to rotate from that vertical position not from the last rotated position.
how to get the last rotated position and continue from there
Thanks!
Try to rotate view's layer with removedOnCompletion = NO instead of rotate UIView
CALayer *layer = [cell.compass layer];
NSNumber *initRotation = [layer valueForKeyPath:#"transform.rotation"];
//CATransform3D rotationTransform = CATransform3DRotate(layer.transform, angle, 0.0, 0.0, 1.0);
//layer.transform = rotationTransform;
CABasicAnimation *animation =[CABasicAnimation animationWithKeyPath:#"transform.rotation"];
animation.duration = 0.5;
animation.fromValue = initRotation ;
animation.toValue = [NSNumber numberWithFloat:([initRotation floatValue] + angle)];
animation.removedOnCompletion = NO;
[layer addAnimation:animation forKey:#"transform.rotation"];
I found a solution to the problem like this:
NSLog(#"old dir %d: new dir: %d", [cellValue.oldDirection intValue], [cellValue.direction intValue]);
CABasicAnimation *animation =[CABasicAnimation animationWithKeyPath:#"transform.rotation"];
animation.duration = 0.5;
int oldDir = [cellValue.oldDirection intValue];
int newDir = [cellValue.direction intValue];
/// in didUpdateHeading
/// int result = 0;
/// result = fixedDir - orientation;
/// place.oldDirection = place.direction;
/// place.direction = [NSNumber numberWithInt:result];
fixed dir is the direction in degree from north to the place! and orientation is the current orientation in degree from the compass or trueHeading
if (oldDir*newDir < 0 && abs(abs(oldDir) - abs(newDir)) < 180) {
oldDir = (360 + oldDir) % 360;
newDir = (360 + newDir) % 360;
}
animation.fromValue = [NSNumber numberWithFloat:DegreesToRadians(oldDir)];
animation.toValue = [NSNumber numberWithFloat:DegreesToRadians(newDir)];
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;
[cell.compass.layer addAnimation:animation forKey:#"transform.rotation"];
float differenceAngle = [animation.toValue floatValue] - [animation.fromValue floatValue];
CATransform3D rotationTransform = CATransform3DMakeAffineTransform(CGAffineTransformRotate(cell.compass.transform,differenceAngle));
cell.compass.layer.transform = rotationTransform;
I hope I helped :)

CGAffineTransformMakeRotation before a CABasicAnimation

I'm performing a rotation of an UIImageView in place first before performing a rotation animation:
// rotate to the left by 90 degrees
someView.transform = CGAffineTransformMakeRotation((-0.5)*M_PI);
Then calling a rotation on the view by 180 degrees... but it seems like it is rotating the image starting from the original position as if it was not initially rotated.
- (void)rotateIndicatorToAngle: (UIView *)view angle: (NSNumber *)angleInDegrees
{
CALayer *layer = view.layer;
CGFloat duration = 5.0;
CGFloat radians = [self ConvertDegreesToRadians: [angleInDegrees floatValue]];
CABasicAnimation* rotationAnimation;
rotationAnimation = [CABasicAnimation animationWithKeyPath:#"transform.rotation.z"];
rotationAnimation.toValue = [NSNumber numberWithFloat: radians];
rotationAnimation.duration = duration;
rotationAnimation.cumulative = YES;
rotationAnimation.repeatCount = 1.0;
rotationAnimation.removedOnCompletion = NO;
rotationAnimation.fillMode = kCAFillModeForwards;
rotationAnimation.timingFunction = [CAMediaTimingFunction
functionWithName:kCAMediaTimingFunctionEaseOut];
[layer addAnimation: rotationAnimation forKey: #"rotationAnimation"];
}
What gives?
rotationAnimation.cumulative = YES;
Have you tried using rotationAnimation.additive = YES; instead of cumulative?
You could use the class methods from UIView to easily animate your view:
[UIView beginAnimation: #"Rotate" context: nil];
[UIView setAnimationDuration: 5.0f];
[UIView setAnimationCurve: UIViewAnimationCurveEaseOut];
CGFloat radians = [self ConvertDegreesToRadians: [angleInDegrees floatValue]];
view.transform = CGAffineTransformMakeRotation(radians);
[UIView commitAnimation];
That's what I'm using most of the time, no need to use layers.
UPDATE: I mean, I find it easier not to use layers in that case, no pejorative value on using layers.