How do I rotate UIImageView on touch - ios

I am trying to get an image to go full screen, and if the image is landscape then rotate it as it grows.
The code to make it fullscreen works ok, but if I add in the rotation the results are rather unpredictable and the image rotates, moves to the left hand side but does not grow fullscreen.
Code used is:
[UIView animateWithDuration:0.5 delay:0 options:0 animations:^{
//save previous frame
previousFrame = imgView.frame;
[imgView setFrame:[[UIScreen mainScreen] bounds]];
imgView.backgroundColor = [UIColor blackColor];
[imgView.layer setBorderWidth: 0.0];
if(imgView.image.size.width > imgView.image.size.height)
imgView.transform = CGAffineTransformMakeRotation(DEGREES_TO_RADIANS(90));
}
completion:^(BOOL finished){
isFullScreen = YES;
}
];
Not sure what I am missing here, but assuming maybe something to do with rotation and the image view bounds?

Try to use CABasicAnimation instead, combine these examples:
Size example:
-(void)resizeLayer:(CALayer*)layer to:(CGSize)size
{
CGRect oldBounds = layer.bounds;
CGRect newBounds = oldBounds;
newBounds.size = size;
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:#"bounds"];
animation.fromValue = [NSValue valueWithCGRect:oldBounds];
animation.toValue = [NSValue valueWithCGRect:newBounds];
animation.duration = animationspeed;
progressLayer.anchorPoint = CGPointMake(0, progressLayer.anchorPoint.y);
layer.bounds = newBounds;
[layer addAnimation:animation forKey:#"bounds"];
}
Rotation example:
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:#"transform.rotation.z"];
animation.duration = 5;
animation.additive = YES;
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;
animation.fromValue = [NSNumber numberWithFloat:DEGREES_TO_RADIANS(0)];
animation.toValue = [NSNumber numberWithFloat:DEGREES_TO_RADIANS(90)];
[self.imgView.layer addAnimation:animation forKey:#"90rotation"];
Combine them with an animationgroup, example:
// Animation group
CAAnimationGroup* group = [CAAnimationGroup animation];
group.animations = [NSArray arrayWithObjects:colorAnim, widthAnim, nil];
group.duration = 5.0;
[myLayer addAnimation:group forKey:#"BorderChanges"];

Can you try this code
[UIView animateWithDuration:0.5 delay:0 options:0 animations:^{
//save previous frame
previousFrame = imgView.frame;
[imgView setFrame:[[UIScreen mainScreen] bounds]];
imgView.backgroundColor = [UIColor blackColor];
[imgView.layer setBorderWidth: 0.0];
}
completion:^(BOOL finished){
if(imgView.image.size.width > imgView.image.size.height)
imgView.transform = CGAffineTransformMakeRotation(DEGREES_TO_RADIANS(90));
isFullScreen = YES;
}
];

Related

How can I make a circular progress meter with using own picture?

I want to make a meter like this picture.
I have 2 meter images - color meter image and gray meter image.
And I want to make a mater as shown in the above image by using them.
But I don't have any idea.
I got some sample code for making circular meter and filling some color in it. Here is that code:
CAShapeLayer *circle=[CAShapeLayer layer];
circle.path=[UIBezierPath bezierPathWithArcCenter:CGPointMake(29, 29) radius:27 startAngle:2*M_PI*0-M_PI_2 endAngle:2*M_PI*1-M_PI_2 clockwise:YES].CGPath;
circle.fillColor=[UIColor clearColor].CGColor;
circle.strokeColor=[UIColor greenColor].CGColor;
circle.lineWidth=4;
CABasicAnimation *animation=[CABasicAnimation animationWithKeyPath:#"strokeEnd"];
animation.duration=10;
animation.removedOnCompletion=NO;
animation.fromValue=#(0);
animation.toValue=#(1);
animation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
[circle addAnimation:animation forKey:#"drawCircleAnimation"];
[imageCircle.layer.sublayers makeObjectsPerformSelector:#selector(removeFromSuperlayer)];
[imageCircle.layer addSublayer:circle];
If you have an idea,please share it with me.
(it is ok that your idea uses this cord or not)
Thank you.
Here's a fairly robust example, just use this as a template:
video show: https://www.youtube.com/watch?v=ucYqb0Gs1_8&feature=youtu.be
just call to the second method, and the second method will call the first method, and there you have it. Drop it into a view controllers view and you will see the magic happen:
#define DEGREES_TO_RADIANS(degrees) ((M_PI * degrees)/ 180)
-(void)this
{
[CATransaction begin];
[CATransaction setAnimationDuration:3.5];
[CATransaction setAnimationTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
CABasicAnimation * drawAnimation = [CABasicAnimation animationWithKeyPath:#"strokeEnd"];
drawAnimation.removedOnCompletion = YES;
drawAnimation.autoreverses = YES;
drawAnimation.repeatCount = INFINITY;
drawAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
drawAnimation.toValue = [NSNumber numberWithFloat:1.f];
drawAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
[arc addAnimation:drawAnimation forKey:#"thisone"];
[CATransaction commit];
[CATransaction begin];
[CATransaction setAnimationDuration:3.5];
[CATransaction setAnimationTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
CABasicAnimation *drawAnimation1 = [CABasicAnimation animationWithKeyPath:#"strokeStart"];
drawAnimation1.removedOnCompletion = YES;
drawAnimation1.autoreverses = YES;
drawAnimation1.repeatCount = INFINITY;
drawAnimation1.fromValue = [NSNumber numberWithFloat:0.0];
drawAnimation1.toValue = [NSNumber numberWithFloat:-1.0];
[arc addAnimation:drawAnimation1 forKey:#"myKey"];
[CATransaction commit];
}
-(void)doGradientoutline {
float th = 50.00;
UIView * hellowkitt = [UIView new];
[hellowkitt setFrame:CGRectMake(SCREEN_WIDTH/2-(30+th)*2/2-th, SCREEN_HEIGHT/4-th, (30+th)*2+th*2, (30+th)*2+th*2)];
[self.view addSubview: hellowkitt];
UIView * imageView = [UIView new];
[imageView setFrame:CGRectMake(th, th, hellowkitt.frame.size.width-th*2, hellowkitt.frame.size.height-th*2)];
[imageView setClipsToBounds:true];
[imageView.layer setCornerRadius:(hellowkitt.frame.size.width-th*2)/2];
[hellowkitt addSubview:imageView];
UIImageView * imageView1 = [UIImageView new];
[imageView1 setImage:[UIImage imageNamed:#"df"]];
[imageView1 setFrame:CGRectMake(hellowkitt.frame.origin.x+th, hellowkitt.frame.origin.y+th, hellowkitt.frame.size.width-th*2, hellowkitt.frame.size.height-th*2)];
[imageView1 setClipsToBounds:true];
[imageView1.layer setCornerRadius:imageView1.frame.size.height/2];
[self.view addSubview:imageView1];
int radius = imageView.frame.size.width/2+7;
arc = [CAShapeLayer layer];
[arc setFrame:imageView.frame];
UIBezierPath * aa =[UIBezierPath bezierPathWithArcCenter:CGPointMake(imageView.center.x, imageView.center.y) radius:radius startAngle:DEGREES_TO_RADIANS(0) endAngle:DEGREES_TO_RADIANS(360) clockwise:YES];
arc.path = aa.CGPath;
arc.bounds = CGPathGetBoundingBox(aa.CGPath);
arc.frame = arc.bounds;
arc.fillColor = [UIColor clearColor].CGColor;
arc.strokeColor = [UIColor purpleColor].CGColor;
arc.lineWidth = 40;
[arc setLineCap:#"round"];
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = CGRectMake(0, 0, hellowkitt.frame.size.width, hellowkitt.frame.size.height);
gradientLayer.colors = #[(__bridge id)[UIColor paperColorRedA700].CGColor, (__bridge id)[UIColor paperColorBlueA700].CGColor];
gradientLayer.backgroundColor = (__bridge CGColorRef)((__bridge id)[UIColor blackBean].CGColor);
gradientLayer.startPoint = CGPointMake(0.0,0.5);
gradientLayer.endPoint = CGPointMake(1.0,0.51);
CABasicAnimation *drawAnimation11 = [CABasicAnimation animationWithKeyPath:#"colors"];
drawAnimation11.duration = 2.00;
drawAnimation11.repeatCount = HUGE_VAL;
drawAnimation11.removedOnCompletion = NO;
drawAnimation11.fillMode = kCAFillModeForwards;
drawAnimation11.autoreverses = true;
drawAnimation11.fromValue = #[(__bridge id)[UIColor paperColorRedA700].CGColor, (__bridge id)[UIColor paperColorBlueA700].CGColor];
drawAnimation11.toValue = #[(__bridge id)[UIColor redColor].CGColor, (__bridge id)[UIColor blueColor].CGColor];
drawAnimation11.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
CABasicAnimation* animation = [CABasicAnimation animationWithKeyPath:#"transform.rotation"];
animation.byValue = #(4 * M_PI);
animation.duration = 1.5f;
animation.repeatCount = INFINITY;
animation.removedOnCompletion = NO;
[self this];
gradientLayer.mask = arc;
[hellowkitt.layer addSublayer:gradientLayer];
[hellowkitt.layer addAnimation:animation forKey:#"fasdfaasdf"];
[gradientLayer addAnimation:drawAnimation11 forKey:#"thatone"];
}

Get Raw Curve from CABasicAnimation

I am animation the stokeColor of a line drawn to a CAShapeLayer with a CABasicAnimation instance. I wish to use the curve of this animation to 'animate' a non-animatible property. I want to control the volume of a sample which takes a float value in tandem with the evolution of the stokeColor. So, my basic animation animates between two strokeColors with a duration of 0.2f. How can I 'animate' the volume of my sample with this information, so that when the animation occurs so does the change in volume?
This animates color, stroke, position, and rotation, full example:
Here's a fairly robust example, just use this as a template:
video showcase of example: https://www.youtube.com/watch?v=ucYqb0Gs1_8&feature=youtu.be
just call to the second method, and the second method will call the first method, and there you have it. Drop it into a view controllers view and you will see the magic happen, feel free to manipulate the code to your needs:
#define DEGREES_TO_RADIANS(degrees) ((M_PI * degrees)/ 180)
-(void)this {
[CATransaction begin];
[CATransaction setAnimationDuration:3.5];
[CATransaction setAnimationTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
CABasicAnimation * drawAnimation = [CABasicAnimation animationWithKeyPath:#"strokeEnd"];
drawAnimation.removedOnCompletion = YES;
drawAnimation.autoreverses = YES;
drawAnimation.repeatCount = INFINITY;
drawAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
drawAnimation.toValue = [NSNumber numberWithFloat:1.f];
drawAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
[arc addAnimation:drawAnimation forKey:#"thisone"];
[CATransaction commit];
[CATransaction begin];
[CATransaction setAnimationDuration:3.5];
[CATransaction setAnimationTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
CABasicAnimation *drawAnimation1 = [CABasicAnimation animationWithKeyPath:#"strokeStart"];
drawAnimation1.removedOnCompletion = YES;
drawAnimation1.autoreverses = YES;
drawAnimation1.repeatCount = INFINITY;
drawAnimation1.fromValue = [NSNumber numberWithFloat:0.0];
drawAnimation1.toValue = [NSNumber numberWithFloat:-1.0];
[arc addAnimation:drawAnimation1 forKey:#"myKey"];
[CATransaction commit];
}
-(void)doGradientoutline {
float th = 50.00;
UIView * hellowkitt = [UIView new];
[hellowkitt setFrame:CGRectMake(SCREEN_WIDTH/2-(30+th)*2/2-th, SCREEN_HEIGHT/4-th, (30+th)*2+th*2, (30+th)*2+th*2)];
[self.view addSubview: hellowkitt];
UIView * imageView = [UIView new];
[imageView setFrame:CGRectMake(th, th, hellowkitt.frame.size.width-th*2, hellowkitt.frame.size.height-th*2)];
[imageView setClipsToBounds:true];
[imageView.layer setCornerRadius:(hellowkitt.frame.size.width-th*2)/2];
[hellowkitt addSubview:imageView];
UIImageView * imageView1 = [UIImageView new];
[imageView1 setImage:[UIImage imageNamed:#"df"]];
[imageView1 setFrame:CGRectMake(hellowkitt.frame.origin.x+th, hellowkitt.frame.origin.y+th, hellowkitt.frame.size.width-th*2, hellowkitt.frame.size.height-th*2)];
[imageView1 setClipsToBounds:true];
[imageView1.layer setCornerRadius:imageView1.frame.size.height/2];
[self.view addSubview:imageView1];
int radius = imageView.frame.size.width/2+7;
arc = [CAShapeLayer layer];
[arc setFrame:imageView.frame];
UIBezierPath * aa =[UIBezierPath bezierPathWithArcCenter:CGPointMake(imageView.center.x, imageView.center.y) radius:radius startAngle:DEGREES_TO_RADIANS(0) endAngle:DEGREES_TO_RADIANS(360) clockwise:YES];
arc.path = aa.CGPath;
arc.bounds = CGPathGetBoundingBox(aa.CGPath);
arc.frame = arc.bounds;
arc.fillColor = [UIColor clearColor].CGColor;
arc.strokeColor = [UIColor purpleColor].CGColor;
arc.lineWidth = 40;
[arc setLineCap:#"round"];
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = CGRectMake(0, 0, hellowkitt.frame.size.width, hellowkitt.frame.size.height);
gradientLayer.colors = #[(__bridge id)[UIColor paperColorRedA700].CGColor, (__bridge id)[UIColor paperColorBlueA700].CGColor];
gradientLayer.backgroundColor = (__bridge CGColorRef)((__bridge id)[UIColor blackBean].CGColor);
gradientLayer.startPoint = CGPointMake(0.0,0.5);
gradientLayer.endPoint = CGPointMake(1.0,0.51);
CABasicAnimation *drawAnimation11 = [CABasicAnimation animationWithKeyPath:#"colors"];
drawAnimation11.duration = 2.00;
drawAnimation11.repeatCount = HUGE_VAL;
drawAnimation11.removedOnCompletion = NO;
drawAnimation11.fillMode = kCAFillModeForwards;
drawAnimation11.autoreverses = true;
drawAnimation11.fromValue = #[(__bridge id)[UIColor paperColorRedA700].CGColor, (__bridge id)[UIColor paperColorBlueA700].CGColor];
drawAnimation11.toValue = #[(__bridge id)[UIColor redColor].CGColor, (__bridge id)[UIColor blueColor].CGColor];
drawAnimation11.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
CABasicAnimation* animation = [CABasicAnimation animationWithKeyPath:#"transform.rotation"];
animation.byValue = #(4 * M_PI);
animation.duration = 1.5f;
animation.repeatCount = INFINITY;
animation.removedOnCompletion = NO;
[self this];
gradientLayer.mask = arc;
[hellowkitt.layer addSublayer:gradientLayer];
[hellowkitt.layer addAnimation:animation forKey:#"fasdfaasdf"];
[gradientLayer addAnimation:drawAnimation11 forKey:#"thatone"];
}
OH yeah, and one more thing, apple talked about some of this in 2014, they suggested using stroke to animate volume of sorts:
http://asciiwwdc.com/2014/sessions/419

Scale a circle at same center position

I am working on scaling the circle and keep the same center position, which looks like the pulsing circle on map.
AnimationView.m
#property (nonatomic, strong) UIBezierPath *ovalPath;
- (void)drawCircle
{
UIGraphicsBeginImageContext(self.frame.size);
CGRect rect = CGRectMake(25.45, 49.25, 5.8, 5.8);
self.ovalPath = [UIBezierPath bezierPathWithOvalInRect: rect];
[self.ovalPath fill];
UIGraphicsEndImageContext();
}
- (void)bumpUpCircle
{
CAShapeLayer *pathLayer = [CAShapeLayer layer];
pathLayer.frame = self.bounds;
pathLayer.path = self.ovalPath.CGPath;
pathLayer.fillColor = [UIColor blackColor].CGColor;
pathLayer.lineWidth = 2.0f;
pathLayer.lineJoin = kCALineJoinBevel;
[self.layer addSublayer:pathLayer];
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:#"transform.scale"];
animation.fromValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.0, 0.0, 0)];
animation.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(10.0, 10.0, 10.0)];
animation.repeatCount = 1;
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;
animation.duration = 1;
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
[pathLayer addAnimation:animation forKey:#"transform.scale"];
NSLog(#"%#",NSStringFromCGPoint(self.bounds.origin));
}
However, the scaling position is in a strange position, rather than the center of the circle.
Any ideas will be very appreciated. Thanks.
Edit:
GIF uploaded
My suggestion for you with a pulsing circle, is to use an UIView and add it as a subview in your UIViewController. In following example you get a pulsing circle (a UIView with a cornerRadius like the radius) scaling up and down in a very few lines. Include this e.g. in your UIViewController's viewDidLoad to try it out.
int radius = 100;
UIView * circleView = [[UIView alloc] init];
circleView.backgroundColor = [UIColor greenColor];
circleView.frame = CGRectMake(0, 0, radius*2, radius*2);
circleView.center = self.view.center;
circleView.layer.cornerRadius = radius;
[self.view addSubview:circleView];
[UIView animateWithDuration:0.8f
delay:0.0f
options:UIViewAnimationOptionAutoreverse | UIViewAnimationOptionRepeat
animations:^{
circleView.transform = CGAffineTransformMakeScale(1.1, 1.1);
} completion:^(BOOL fin) {
// Do nothing
}];

uiimageview cabasicanimation disappearance effect

I want the image gets smaller and smaller and disappears at the end. I could not achieve that with cabasicanimation. What should i use?
CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:#"transform"];
anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
anim.duration = 1.0;
anim.repeatCount = 1;
anim.autoreverses = YES;
anim.removedOnCompletion = YES;
anim.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.01, 0.01, 1.0)];
[_tile1.layer addAnimation:anim forKey:nil];
You can try this one,
UIImageView *imgView;
[UIView animateWithDuration:0.5 animations:^{
imgView.transform = CGAffineTransformScale(imgView.transform, 0.1, 0.1);
} completion:^(BOOL finished) {
[imgView removeFromSuperview];
imgView.image =nil;
imgView = nil;
}];

CABasicAnimation is not triggered after creation of the layer

I have CALayer subclass. After creation of the layer I want to animate affineTransform of layer but without success. New value is set but the change is not animated. If I trigger the animation after 1 second everything works perfect.
RCLClockDialLayer *layer = [RCLClockDialLayer layer];
layer.frame = CGRectMake(center.x, center.y, 2, self.radius);
layer.center = center;
layer.radius = self.radius;
layer.width = width;
layer.backgroundColor = [UIColor blackColor].CGColor;
layer.color = [UIColor whiteColor];
layer.affineTransform = CGAffineTransformRotate(layer.affineTransform, RCLDegreesToRadians(270));
[self addSubLayer:layer];
CGAffineTransform transform = CGAffineTransformIdentity;
transform = CGAffineTransformRotate(transform, RCLDegreesToRadians(80));
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:#"affineTransform"];
animation.duration = .5;
animation.fromValue = [layer valueForKey:#"affineTransform"];
animation.toValue = [NSValue valueWithCGAffineTransform:transform];
animation.fillMode = kCAFillModeForwards;
animation.cumulative = YES;
animation.removedOnCompletion = NO;
layer.affineTransform = transform;
[layer addAnimation:animation forKey:#"affineTransform"];
This is my code. I have tried many different solutions but nothing works. Do someone know what is the reason for this?

Resources