Objective C UIImageView rotation with animation not working good - objective-c

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 :)

Related

Move a UIImage at a angle with acceleration

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.

objective c mask animation

I want to make an animation as below. It is like Angry Birds Game's settings wheel button.
I used images to describe my problem.
I can rotate the wheel
and I can up the image (set_bg.png).
startup position:
end position (after clicked the wheel):
as you see on startup position, I want to hide above wheel but I couldn't do. How can I do this animation?
I tried that code:
on ViewDid:
CALayer *maskLayer = [CALayer layer];
UIImage *maskImage = [UIImage imageNamed:#"set_bg.png"];
maskLayer.contents = (id)maskImage.CGImage;
maskLayer.bounds = CGRectMake(0,0,92,219);
maskLayer.frame =CGRectMake(0,-135,92,219);
btn_setting_bg.layer.mask = maskLayer;
btn_setting_bg.layer.masksToBounds = YES;
on wheel touched:
CGRect position;
CGRect oldBounds;
CGRect newBounds;
CABasicAnimation* animation = [CABasicAnimation animationWithKeyPath:#"transform.rotation.z"];
if(isSubMenuOpened == YES){
animation.fromValue = [NSNumber numberWithFloat:2*M_PI];
animation.toValue = [NSNumber numberWithFloat: 0.0f];
position = CGRectMake(btn_setting_bg.frame.origin.x,btn_settings.frame.origin.y + 6, btn_setting_bg.frame.size.width, btn_setting_bg.frame.size.height);
newBounds = CGRectMake(0,-135,92,219);
oldBounds = CGRectMake(0,0,92,219);
isSubMenuOpened = NO;
}else{
animation.fromValue = [NSNumber numberWithFloat:0.0f];
animation.toValue = [NSNumber numberWithFloat: 2*M_PI];
position = CGRectMake(btn_setting_bg.frame.origin.x,btn_setting_bg.frame.origin.y - btn_setting_bg.frame.size.height -13 + btn_settings.frame.size.height, btn_setting_bg.frame.size.width, btn_setting_bg.frame.size.height);
oldBounds = CGRectMake(0,-135,92,219);
newBounds = CGRectMake(0,0,92,219);
isSubMenuOpened = YES;
// NSLog([NSString stringWithFormat:#"x:%f,y:%f", position.origin.x, position.origin.y]);
}
[UIView animateWithDuration:1.2
delay:0.0
options: UIViewAnimationCurveEaseOut
animations:^{
[btn_setting_bg setFrame:position];
//[btn_setting_bg.layer.mask setFrame:CGRectMake(0,500,92,219)];
}
completion:^(BOOL finished){
CABasicAnimation *animation2 = [CABasicAnimation animationWithKeyPath:#"scale.y"];
animation2.fromValue = [NSValue valueWithCGRect:oldBounds];
animation2.toValue = [NSValue valueWithCGRect:newBounds];
animation2.duration = 1.2f;
btn_setting_bg.layer.mask.frame = newBounds;
// btn_setting_bg.layer.mask.bounds = CGRectMake(0,0,92,219);
[btn_setting_bg.layer.mask addAnimation:animation2 forKey:#"scale.y"];
}];
animation.duration = 1.2f;
animation.repeatCount = 1;
[btn_settings.layer addAnimation:animation forKey:#"SpinAnimation"];
Try animating the alpha property of wheel from 0.0f to 1.0f.
I have solved problem using alpha. It is not what I exactly I want but this is also a good solution.
Thanks to #paulrehkugler and #kate-gregory
Now my code is as simple as:
CGRect position;
CABasicAnimation* animation = [CABasicAnimation animationWithKeyPath:#"transform.rotation.z"];
if(isSubMenuOpened == YES){
animation.fromValue = [NSNumber numberWithFloat:2*M_PI];
animation.toValue = [NSNumber numberWithFloat: 0.0f];
position = CGRectMake(btn_setting_bg.frame.origin.x,btn_settings.frame.origin.y + 6, btn_setting_bg.frame.size.width, btn_setting_bg.frame.size.height);
isSubMenuOpened = NO;
}else{
animation.fromValue = [NSNumber numberWithFloat:0.0f];
animation.toValue = [NSNumber numberWithFloat: 2*M_PI];
position = CGRectMake(btn_setting_bg.frame.origin.x,btn_setting_bg.frame.origin.y - btn_setting_bg.frame.size.height -13 + btn_settings.frame.size.height, btn_setting_bg.frame.size.width, btn_setting_bg.frame.size.height);
isSubMenuOpened = YES;
}
[UIView animateWithDuration:1.2
delay:0.0
options: UIViewAnimationCurveEaseOut
animations:^{
[btn_setting_bg setFrame:position];
}
completion:^(BOOL finished){
}];
animation.duration = 1.2f;
animation.repeatCount = 1;
[btn_settings.layer addAnimation:animation forKey:#"SpinAnimation"];
if(isSubMenuOpened == YES){
[UIView animateWithDuration:3.5 animations:^(void) {
btn_setting_bg.alpha = 1;
}];
}else{
[UIView animateWithDuration:0.8 animations:^(void) {
btn_setting_bg.alpha = 0;
}];
}

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.

Animation in for loop compounds everytime view appears

I am trying to get a fresh set of random animations each time the view loads, but instead I am getting the animations multiplying and leading to the inevitable application meltdown! Any help on how to get a fresh start each time the view appears
- (void)startAnimation
{
int n;
for (n=0; n<150; n++){
UIBezierPath *bubblePath = [UIBezierPath bezierPath];
[bubblePath moveToPoint:P(arc4random()%768, arc4random()%1024)];
[bubblePath addCurveToPoint:P(arc4random()%768, arc4random()%1024)
controlPoint1:P(arc4random()%768, arc4random()%1024)
controlPoint2:P(arc4random()%768, arc4random()%1024)];
CALayer *bubble = [CALayer layer];
bubble.bounds = CGRectMake(0, 0, 10.0, 10.0);
bubble.position = CGPointMake(arc4random()%768, arc4random()%1024);
bubble.contents = (id)([UIImage imageNamed:#"Bubble.png"].CGImage);
[self.view.layer addSublayer:bubble];
CAKeyframeAnimation *bubbleAnim = [CAKeyframeAnimation animationWithKeyPath:#"position"];
bubbleAnim.path = bubblePath.CGPath;
bubbleAnim.rotationMode = kCAAnimationRotateAuto;
bubbleAnim.duration = 100;
bubbleAnim.repeatCount = HUGE_VALF;
[bubble addAnimation:bubbleAnim forKey:#"bubble"];
}
int i;
for (i=0; i<8; i++){
UIBezierPath *tinyPath = [UIBezierPath bezierPath];
[tinyPath moveToPoint:P(arc4random()%400+840, arc4random()%75+125)];
[tinyPath addCurveToPoint:P(-400, arc4random()%75+150)
controlPoint1:P(arc4random()%450, arc4random()%200+250)
controlPoint2:P(arc4random()%300, arc4random()%200+150)];
CALayer *tinyFish = [CALayer layer];
tinyFish.bounds = CGRectMake(0, 0, 150.0, 150.0);
tinyFish.position = CGPointMake(868, 800);
tinyFish.contents = (id)([UIImage imageNamed:#"Fish3.png"].CGImage);
[self.view.layer addSublayer:tinyFish];
CAKeyframeAnimation *tinyAnim = [CAKeyframeAnimation animationWithKeyPath:#"position"];
tinyAnim.path = tinyPath.CGPath;
tinyAnim.rotationMode = kCAAnimationRotateAuto;
tinyAnim.duration = 15;
tinyAnim.repeatCount = HUGE_VALF;
[tinyFish addAnimation:tinyAnim forKey:#"fish"];
}
}
[UIView animateWithDuration:0.5 delay:0 options:UIViewAnimationCurveLinear animations:^
{
//do your animations here
}completion:^(BOOL finished)
{
//remove all layers here. Eventually add here another animation where you fade out all layers and in that animation's completion block remove them from the view
}];
Hope this helps. Cheers!

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.