I have a UIView and i added a UIButton on it. I am rotating UIView by 180 degrees. After rotating UIView, everything inside it looks rotated including the button. But when i tap on button. it receives touch event only from its initial position. Not from the position it appears on screen. This is my code -
CABasicAnimation *fullRotation = [CABasicAnimation animationWithKeyPath:#"transform.rotation"];
fullRotation.fromValue = [NSNumber numberWithFloat:0];
fullRotation.toValue = [NSNumber numberWithFloat:((180*M_PI)/180)];
fullRotation.speed = 1.0;
fullRotation.autoreverses = NO;
fullRotation.removedOnCompletion = NO;
fullRotation.fillMode = kCAFillModeForwards;
[_subView.layer addAnimation:fullRotation forKey:#"360"];
You can't do it from Interface Builder. You have to rotate it from your code. Like this,
UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 100, 200)];
[button addTarget:self action:#selector(selectedButton) forControlEvents:UIControlEventTouchUpInside];
[button setBackgroundColor:[UIColor purpleColor]];
CABasicAnimation *fullRotation = [CABasicAnimation animationWithKeyPath:#"transform.rotation"];
fullRotation.fromValue = [NSNumber numberWithFloat:0];
fullRotation.toValue = [NSNumber numberWithFloat:((180*M_PI)/180)];
fullRotation.speed = 1.0;
fullRotation.autoreverses = NO;
fullRotation.removedOnCompletion = NO;
fullRotation.fillMode = kCAFillModeForwards;
[button.layer addAnimation:fullRotation forKey:#"360"];
[self.view addSubview:button];
Now the selectedButton will receive every rotated UIButton touch.
Related
I'm trying to make a breathing circle animation. Only breathInAnimation (grow circle) seems to animate. breathOutAnimation (shrink circle) gets called but doesn't seem to do anything. I'm guessing it immediately reverts back to the starting state but I don't understand why.
- (void)viewDidLoad
animationView = [[UIView alloc] initWithFrame:CGRectMake(self.view.frame.size.width / 2.0, self.view.frame.size.height / 2.0, 200, 200)];
animationView.backgroundColor = [UIColor blueColor];
animationView.layer.cornerRadius = 100;
animationView.center = self.view.center;
[self.view addSubview: animationView];
[self drawCircleEdge];
[self breathInAnimation];
[NSTimer timerWithTimeInterval:7.0 target:self selector:#selector(breathOutAnimation) userInfo:nil repeats:YES];
- (void)breathInAnimation
CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:#"transform.scale"];
[scaleAnimation setValue:#"breathIn" forKey:#"id"];
scaleAnimation.duration = 4;
scaleAnimation.fromValue = [NSNumber numberWithFloat:0.1];
scaleAnimation.toValue = [NSNumber numberWithFloat:1];
[animationView.layer addAnimation:scaleAnimation forKey:#"scale"];
- (void)breathOutAnimation
CABasicAnimation *breathOut = [CABasicAnimation animationWithKeyPath:#"transform.scale"];
breathOut.duration = 8;
breathOut.fromValue = [NSNumber numberWithFloat:1];
breathOut.toValue = [NSNumber numberWithFloat:0.1];
[animationView.layer removeAllAnimations];
[animationView.layer addAnimation: breathOut forKey:#"scale"];
I also tried using the delegate of scaleAnimation.
- (void)animationDidStop:(CABasicAnimation *)theAnimation2 finished:(BOOL)flag
This works but after the animation finished the circle goes back to the state it was after ending the first animation. Shrinking -> animation ends -> fullsize again.
I'm not sure what I'm missing here.
CAAnimations doesn't apply the transformation to your layer, it's animating on a presentation layer and then switch back to your layer when animation is finished.
You should apply your transform when you are playing the animation.
-(void)breathOutAnimation
{
CABasicAnimation *breathOut = [CABasicAnimation animationWithKeyPath:#"transform.scale"];
breathOut.duration = 8;
breathOut.fromValue = [NSNumber numberWithFloat:1];
breathOut.toValue = [NSNumber numberWithFloat:0.1];
[animationView.layer removeAllAnimations];
[animationView.layer addAnimation: breathOut forKey:#"scale"];
animationView.layer.transform = CATransform3DMakeScale(0.1, 0.1, 0.1);
}
I have a label:
self.logInLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 300, 100)];
self.logInLabel.backgroundColor = [UIColor clearColor];
self.logInLabel.backgroundColor = Color_Circle_Outer;
self.logInLabel.textColor = Color_Circle_Outer;
self.logInLabel.textAlignment = NSTextAlignmentCenter;
self.logInLabel.lineBreakMode = NSLineBreakByWordWrapping;
self.logInLabel.numberOfLines = 1;
self.logInLabel.font = [UIFont boldSystemFontOfSize:12*IPAD];
self.logInLabel.text = #"Log In";
[self addSubview:self.logInLabel];
self.logInLabel.layer.cornerRadius = self.frame.size.height/2.0;
self.logInLabel.layer.borderColor = Color_Circle_Outer.CGColor;
self.logInLabel.layer.borderWidth = 2*IPAD;
self.logInLabel.layer.masksToBounds = YES;
I want to change this shape to a Circle. I have tried:
[UIView animateWithDuration:AnimationTime animations:^{
self.logInLabel.layer.bounds = CGRectMake(0, 0, self.frame.size.height, self.frame.size.height);
}];
But the shape changed immediately without animation, then the position change to center with animation. Then I tried with this:
[UIView animateWithDuration:AnimationTime animations:^{
self.logInLabel.bounds = CGRectMake(0, 0, self.logInLabel.frame.size.height, self.logInLabel.frame.size.height);
}];
I have very ugly animation effect.
I do not care if this view is a label, I just want to implement changing a rectangle shape to a circle shape with an animation.
Thank you.
It works only CABasicAnimation not the UIView animateWithDuration
UIView *logInLabel = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 200, 200)];
logInLabel.backgroundColor = [UIColor blackColor];
logInLabel.layer.masksToBounds = YES;
[self.view addSubview:logInLabel];
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:#"cornerRadius"];
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
animation.fromValue = [NSNumber numberWithFloat:0.0f];
animation.toValue = [NSNumber numberWithFloat:100.0f];
animation.duration = 5.0;
[logInLabel.layer addAnimation:animation forKey:#"cornerRadius"];
[logInLabel.layer setCornerRadius:0.0];
From your code remove the line :
self.logInLabel.layer.cornerRadius = self.logInLabel.frame.size.height / 2.0;
and put it in an animation block like this
You can set cornerRadius of your UILabel to get a circular view.
[UIView animateWithDuration:AnimationTime animations:^{
self.logInLabel.layer.cornerRadius = self.logInLabel.frame.size.height / 2.0f;
}];
However, the animation will not look very good and the final frame will not be an exact circle because the height and width of your UILabel are not in 1:1 proportion.
If you still don't get the animation try to check the value of AnimationTime variable.
Look that might help you
[UIView animateWithDuration:0.4 animations:^{
CGPoint center = self.logInLabel.center;
self.logInLabel.layer.cornerRadius = self.logInLabel.frame.size.height/2;
self.logInLabel.frame = CGRectMake(0, 0, self.logInLabel.frame.size.height, self.logInLabel.frame.size.height);
self.logInLabel.center = center;
}];
I'm trying to add an Animation to a UIView. The objective of the animation is to "animate" the View appearing on screen (instead of just appearing there).
The animation is all size scaling: start from 5%, go up to 120% and then very quickly back to 100% of the regular scale.
My issue is that the full scale UIView appears very quickly, before the animation starts.
Here's the code:
UIView * myView = [[UIView alloc] initWithFrame:someFrame];
[self.view addSubview:myView];
[self initialAnimationFor:myView];
-(void) initialAnimationFor:(UIView*)pView {
const CFTimeInterval firstDuration = 0.75f;
const CFTimeInterval secondDuration = 0.025f;
const float initialValue = 0.05f;
const float middleValue = 1.20f;
CABasicAnimation * firstAnimation = [CABasicAnimation animationWithKeyPath:#"transform.scale"];
firstAnimation.duration = firstDuration;
firstAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
firstAnimation.fromValue = [NSNumber numberWithFloat:initialValue];
firstAnimation.toValue = [NSNumber numberWithFloat:middleValue];
CABasicAnimation * secondAnimation = [CABasicAnimation animationWithKeyPath:#"transform.scale"];
secondAnimation.duration = secondDuration;
secondAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
secondAnimation.fromValue = [NSNumber numberWithFloat:middleValue];
secondAnimation.toValue = [NSNumber numberWithFloat:1.0f];
CAAnimationGroup *animationGroup = [CAAnimationGroup new];
animationGroup.duration = firstDuration + secondDuration;
animationGroup.animations = #[firstAnimation, secondAnimation];
[pView.layer addAnimation:animationGroup forKey:nil];
}
Any ideas? Thanks!
I would do a different technique and use chained UIView block animations, like this:
- (void)viewDidAppear:(BOOL)animated {
[super viewDidAppear:animated];
UIView *myView = [[UIView alloc] initWithFrame:CGRectMake(40, 40, 200, 200)];
myView.backgroundColor = [UIColor redColor];
[self initialAnimationFor:myView];
}
- (void)initialAnimationFor:(UIView*)pView {
pView.transform = CGAffineTransformMakeScale(0.05f, 0.05f);
if (pView.superview == nil) {
[self.view addSubview:pView];
}
[UIView
animateWithDuration:0.75f
animations:^{
pView.transform = CGAffineTransformMakeScale(1.20f, 1.20f);
}
completion:^(BOOL finished) {
[UIView
animateWithDuration:0.25f // <-- Your old value of 0.025f makes the animation VERY quick
animations:^{
pView.transform = CGAffineTransformIdentity;
}
];
}
];
}
With this setup, you get the "grow to slightly larger than 100% and then 'settle' to 100%" effect.
Is this a workable solution?
Now I want to use Core Animation to write some methods for animation just as easy as Cocos2d ,just like ccMove,ccFade,ccRotate.
Everything seems ok, but when I want to implement the animation sequence,I've troubled.The first thing I've thought was CCAnimationGroup,but when animations in groups,I can not kown when the current action complete, so I can't set the property of layer, this lead to the layer back to the original status. Anyone know this ? My code:
UIView *testView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 50, 50)];
testView.backgroundColor= [UIColor redColor];
testView.center = self.view.center;
//mark1: textview's position is self.view.center
[self.view addSubview:testView];
CAKeyframeAnimation *moveAnimation = [CAKeyframeAnimation
animationWithKeyPath:#"position"];
moveAnimation.duration = 3;
CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path, NULL, 100, 100);
CGPathAddLineToPoint(path, NULL, 200, 200);
moveAnimation.path = path;
//mark2: I want the testview move to CGPointMake(100,200)
CGPathRelease(path);
CABasicAnimation *angleAnimation =
[CABasicAnimation
animationWithKeyPath:#"transform.rotation"];
angleAnimation.toValue = #(45 * M_PI / 180);
angleAnimation.duration = 3;
angleAnimation.beginTime = 3; //make3: rotate testview 45°
CAAnimationGroup *actionGroup = [CAAnimationGroup animation];
[actionGroup setDuration:6];
[actionGroup setAnimations:#[moveAnimation, angleAnimation]];
[CATransaction begin];
[testView.layer addAnimation:actionGroup forKey:nil];
[CATransaction commit];
You can run it, and you'll see the textview's position and rotate is not I want.
Can someone help me?
I've solved it.In fact,I don't need to know when one of the actions in group complete.Just set the animation's fillMode and removedOnCompletion, so that the the layer would not back to original status.
UIView *testView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 50, 50)];
testView.backgroundColor= [UIColor redColor];
testView.center = self.view.center;
[self.view addSubview:testView]; //mark1: textview's position is self.view.center
CAKeyframeAnimation *moveAnimation = [CAKeyframeAnimation animationWithKeyPath:#"position"];
moveAnimation.duration = 3;
CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path, NULL, 100, 100);
CGPathAddLineToPoint(path, NULL, 200, 200);
moveAnimation.path = path;
moveAnimation.fillMode = kCAFillModeForwards;
moveAnimation.removedOnCompletion = NO;
CGPathRelease(path); //mark2: I want the testview move to CGPointMake(100,200)
CABasicAnimation *angleAnimation = [CABasicAnimation animationWithKeyPath:#"transform.rotation"];
angleAnimation.toValue = #(45 * M_PI / 180);
angleAnimation.duration = 3;
angleAnimation.beginTime = 3; //make3: rotate testview 45°
angleAnimation.fillMode = kCAFillModeForwards;
angleAnimation.removedOnCompletion = NO;
CAAnimationGroup *actionGroup = [CAAnimationGroup animation];
[actionGroup setDuration:6];
[actionGroup setAnimations:#[moveAnimation, angleAnimation]];
actionGroup.fillMode = kCAFillModeForwards;
actionGroup.removedOnCompletion = NO;
[CATransaction begin];
[testView.layer addAnimation:actionGroup forKey:nil];
[CATransaction commit];
In code above, I set all the action's fillmode to kCAFillModeForwards, and removedOnCompletion = NO.This just work. And I also find that scaleAnimation and fadeAnimation should set their fillmode to kCAFillModeBoth so that the layer cannot back to original property status.
You can also check the code on my github.https://github.com/Vienta/SSAnimation Thank you!
CAAnimationGroup is subclass of CAAnimation, so you can have a delegate of CAAnimationGroup and receive notification when animation stoped.
- (void)animationDidStop:(CAAnimation *)theAnimation finished:(BOOL)flag
Im trying to animate an image in a UISegmentedControl. This is what I have come up with but it doesn't work.
The animation itself works fine if I switch imageView.layer to _segmentedControl.layer in the last line of code.
What am I missing?
UIImageView *imageView = [[UIImageView alloc] init];
imageView.image = [_segmentedControl imageForSegmentAtIndex:0];
CABasicAnimation *scale = [CABasicAnimation animationWithKeyPath:#"transform.scale"];
scale.duration = 0.25;
scale.repeatCount = 2;
scale.autoreverses = YES;
scale.fromValue = [NSNumber numberWithFloat:1.0];
scale.toValue = [NSNumber numberWithFloat:0.0];
[imageView.layer addAnimation:scale forKey:#"scale"];
For future reference I would like to share the solution I came up with. Instead of animating the image for the segment, which doesn't seem possible, you can at least animate the subview of the segmented control.
UIView *subView = [[_segmentedControl subviews] objectAtIndex:0];
CABasicAnimation *scale = [CABasicAnimation animationWithKeyPath:#"transform.scale"];
scale.duration = 0.25;
scale.repeatCount = 1;
scale.autoreverses = YES;
scale.fromValue = [NSNumber numberWithFloat:1.0];
scale.toValue = [NSNumber numberWithFloat:0.95];
[subView.layer addAnimation:scale forKey:#"scale"];
You use the collection UIView. UISegmentedControl can not animate