I am trying to make a uibutton that has an image in it pulsate slowly by changing the alpha level back and forth once the view loads...
currently I am doing this but it does nothing....
-(void)loopdyloop
{
while ( myCount < 1000 )
{
[UIView animateWithDuration:3.0
delay:0.0f
options:UIViewAnimationCurveEaseOut
animations:^{
iconButton.alpha = 0.0;
} completion:^(BOOL finished) {
if (finished) {
NSLog(#"animated");
}
}];
[UIView animateWithDuration:3.0
delay:0.0f
options:UIViewAnimationCurveEaseOut
animations:^{
iconButton.alpha = 1.0;
} completion:^(BOOL finished) {
if (finished) {
NSLog(#"animated");
}
}];
myCount++;
}
}
this method is called from the viewdidload method,
pretty crude I know but its my best attempt, if you have any idea on how I could achieve this it would be greatly appreciated.
How about applying this in your button layer in viewDidLoad:
CABasicAnimation *pulseAnimation = [CABasicAnimation animationWithKeyPath:#"transform.scale"];
pulseAnimation.duration = .5;
pulseAnimation.toValue = [NSNumber numberWithFloat:1.1];
pulseAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
pulseAnimation.autoreverses = YES;
pulseAnimation.repeatCount = FLT_MAX;
[YOURButton.layer addAnimation:pulseAnimation forKey:nil];
and you can experiment with it.
If you want it to repeat forever you could add the animation options to auto reverse and repeat, like this:
[UIView animateWithDuration:3.0
delay:0.0f
options:UIViewAnimationCurveEaseOut |
UIViewAnimationOptionRepeat |
UIViewAnimationOptionAutoreverse
animations:^{
iconButton.alpha = 0.0;
}
completion:^(BOOL finished) {
// You could do something here
}];
It will cause the alpha to first animate to 0.0, then back to the original (1.0) and then do those two things over and over and over...
Related
I have two UIImageView - leftSide and rightSide, which I would like to fade in and then fade out, one after the other, in a loop.
How do I do this in Xcode? I tried CABasicAnimation but this did not work (I'm not sure why, no errors at all, the images do not fade).
Thanks!
EDIT: This is the code I was using:
-(void)leftSideFade{
CABasicAnimation *blink;
blink = [CABasicAnimation animationWithKeyPath:#"opacity"];
blink.duration = 1.0;
blink.repeatCount = 5;
blink.autoreverses = YES;
blink.fromValue = [NSNumber numberWithFloat:1.0];
blink.toValue = [NSNumber numberWithFloat:0.0];
[leftSideStart.layer addAnimation:blink forKey:#"animateOpacity"];
[self rightSideFade];
}
-(void)rightSideFade{
CABasicAnimation *blink;
blink = [CABasicAnimation animationWithKeyPath:#"opacity"];
blink.duration = 1.0;
blink.repeatCount = 5;
blink.autoreverses = YES;
blink.fromValue = [NSNumber numberWithFloat:1.0];
blink.toValue = [NSNumber numberWithFloat:0.0];
[rightSideStart.layer addAnimation:blink forKey:#"animateOpacity"];
[self leftSideFade];
}
- (void)fadeIn
{
[UIView beginAnimations:#"fadeIn Animation" context:nil];
[UIView setAnimationDuration:1.0];
imageView.alpha = 1.0;
[UIView commitAnimations];
}
Try this to.
Try using the following :
- (void) fadeinRightFadwOutLeft {
[UIView beginAnimations:#"start" context:nil];
[UIView setAnimationDuration:1.0];
rightSide.alpha = 0.0;
leftSide.alpha = 1.0;
[UIView commitAnimations];
}
- (void) fadeinLeftFadwOutRight {
[UIView beginAnimations:#"start" context:nil];
[UIView setAnimationDuration:1.0];
leftSide.alpha = 0.0;
rightSide.alpha = 1.0;
[UIView commitAnimations];
}
How about a simpler way with UIView animateWithDuration:animations:completion: ?
There you just change alpha of your views and they will fade in/out
Here is a sample code:
[UIView animateWithDuration:duration
animations:^
{
//Here you set values you want to see in the end of animation
leftView.alpha = 0.0f;
rightView.alpha = 1.0f;
}
completion:^(BOOL finished)
{
//something to do after animation finished
}
The question explains it all actually.
I load a custom UIView on top of my current view, animated, using this code:
- (void)showView
{
self.blurView.alpha = 0.f;
[UIView animateWithDuration:2.0 delay:0.0 options:UIViewAnimationOptionAllowUserInteraction animations:^
{
self.blurView.alpha = 1.f;
} completion:^(BOOL finished) {
[UIView animateWithDuration:2.0 delay:0.0 options:UIViewAnimationOptionAllowUserInteraction animations:^
{
self.blurView.alpha = 0.f;
} completion:nil];
}];
}
It works, but when I perform -(void)showView again while it is still animating, the custom view doesn't get removed from the screen.
It just stays like this:
I figured out what the problem was.
blurView is a public variable and every time I did -(void)showView it used the same variable, setting the alpha to 0.f just once, thus never changing the alpha of the first show.
I declared the variable blurView in the method itself and now it works because every blurView gets it's own pointer.
-(void)someMethod
{
//Create a live blur view
FXBlurView *blurView = [[FXBlurView alloc] initWithFrame:CGRectMake(0, 0, 200, 200)];
blurView.center = CGPointMake(self.view.window.frame.size.width / 2, self.view.window.frame.size.height / 2);
blurView.layer.cornerRadius = 20.f;
[self.view.window addSubview:blurView];
[self showView:(blurView)];
}
- (void)showView:(FXBlurView *)blurView
{
//Make full transparent before showing
blurView.alpha = 0.f;
//Start animation
[FXBlurView animateWithDuration:1.0 delay:0.0 options:UIViewAnimationOptionAllowUserInteraction animations:^
{
blurView.alpha = 1.f;
} completion:^(BOOL finished) {
if (finished)
{
//End animation
[FXBlurView animateWithDuration:1.0 delay:0.0 options:UIViewAnimationOptionAllowUserInteraction animations:^
{
blurView.alpha = 0.f;
} completion:nil];
}
}];
}
You should add to the top of your function this line:
[self.view.layer removeAllAnimations];
It will remove all of the active animations.
It doesn't work because you have implemented a delay, use animation block with delay - it will create animation keys that could be removed with this function above.
[UIView animateWithDuration:0.3 delay:0.0
options:UIViewAnimationOptionAllowUserInteraction
animations:^
{
// ...
} completion:NULL];
I want to transit from UIView to another in the UIViewController when I press a button
I write this code:
- (IBAction)changeView:(id)sender {
CATransition* transition = [CATransition animation];
transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
transition.duration = 1.0f;
transition.type = #"cube";
transition.subtype = #"fromTop";
[self.view1.layer removeAllAnimations];
[self.view1.layer addAnimation:transition forKey:kCATransition];
}
this code will transit the view1(UIview) to itself. how can I make it to transit to another UIView (e.g. view2). also where can I put the another UIview (view2) in the storyboard
Have you try like this?
self.view1.alpha = 0.0;
[UIView beginAnimations:#"flip" context:nil];
[UIView setAnimationDelegate:self];
[UIView setAnimationDidStopSelector:#selector(animationDidStop:finished:context:)];
[UIView setAnimationDuration:1.0f];
self.view2.alpha = 1.0;
[UIView commitAnimations];
Have a look at this code snippet it's much more elegant. Also checkout Apple's documentation for more fancy UIViewAnimationOptions
- (IBAction)changeView:(id)sender
{
[UIView animateWithDuration:1.0 delay:0.0 options:UIViewAnimationOptionTransitionFlipFromLeft animations:^{
//Remove View-1 from the main view
[view1 removeFromSuperView];
//Add the new view to your current view
[self.view addSubView:view2];
} completion:^(BOOL finished) {
//Once animation is complete
}];
}
Ensure that the two views are a strong property of your view controller.
If you have two UIView for example take firstView and secondView and add it to UIViewController on same rect. and set hiddden property to secondView.
-(IBAction)flipFirstViewToSecondView{
secondView.hidden= NO;
[UIView transitionWithView:firstView duration:1.0f options:UIViewAnimationOptionTransitionFlipFromLeft animations:^{
[UIView transitionWithView:secondView duration:1.0f options:UIViewAnimationOptionTransitionFlipFromLeft animations:^{
} completion:^(BOOL finished) {
secondView.hidden = NO;
firstView.hidden = YES;
}];
} completion:^(BOOL finished) {
}];
}
Thanks. just let me know if you have any problem to integrate it.
I'm having a problem I can't find any solution for it.
So basically, I'm having a compass that I want to "pop in"/"pop out" into the view, and then start to update heading, but heading stops updating after I dismiss/pop out the compass.
Like: user wants compass-> presses button-> compass pops up-> starting to rotate compass needle-> user don't want compass anymore/dismisses compass-> compass pops out of view.
So my question is: If i make one animation, the other animation stops, how do i make it possible for both to run after each other?
In showCompass:
(IBAction) showCompass:
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:1.0];
directionsArrow.center = CGPointMake(160, 410);
[UIView commitAnimations];
In locationManager:
float oldRadian = (-manager.heading.trueHeading * M_PI/180.0f);
float newRadian = (-newHeading.trueHeading * M_PI/180.0f);
CABasicAnimation *animation;
animation=[CABasicAnimation animationWithKeyPath:#"transform.rotation"];
animation.fromValue = [NSNumber numberWithFloat:oldRadian];
animation.toValue = [NSNumber numberWithFloat:newRadian];
animation.duration = 0.5f;
[directionsArrow.layer addAnimation:animation forKey:#"animateMyRotation"];
directionsArrow.transform = CGAffineTransformMakeRotation(newRadian);
In dismissCompass:
-(IBAction) dismissCompass {
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:1.0];
directionsArrow.center = CGPointMake(160, 410);
[UIView commitAnimations];
[locationManager stopUpdateHeading];
}
New code:
*Show:*
[UIView animateWithDuration:1.f
animations:^{
compassDial.center = CGPointMake(160, 504-92);
pushView.center = CGPointMake(160, 500-92);
//directionsArrow.center = CGPointMake(160, 502-92);
} completion:^(BOOL finished) {
directionsArrow.hidden = NO;
[locationManager startUpdatingHeading];
}];
In locationManager:
- (void)locationManager:(CLLocationManager *)manager didUpdateHeading:(CLHeading *)newHeading{
float oldRadian = (-manager.heading.trueHeading * M_PI/180.0f);
float newRadian = (-newHeading.trueHeading * M_PI/180.0f);
CABasicAnimation *animation;
animation=[CABasicAnimation animationWithKeyPath:#"transform.rotation"];
animation.fromValue = [NSNumber numberWithFloat:oldRadian];
animation.toValue = [NSNumber numberWithFloat:newRadian];
animation.duration = 0.5f;
[directionsArrow.layer addAnimation:animation forKey:#"animateMyRotation"];
directionsArrow.transform = CGAffineTransformMakeRotation(newRadian);
Dismiss:
[UIView animateWithDuration:1.f
animations:^{
compassDial.center = CGPointMake(160, 700);
directionsArrow.center = CGPointMake(160, 700);
} completion:^(BOOL finished) {
[locationManager stopUpdatingHeading];
}];
Thanks in advance.
I'm assuming the two animations you want to happen at the same time are the rotation and the moving of the frame?
The easiest thing to do to ensure the animation is smooth and follows what you expect is to place the compass inside another view.
You can then animate the frame of the compass' parent to make the compass move in and out and apply the rotation just to the compass itself.
Show
[UIView animateWithDuration:1.f
animations:^{
compassContainer.center = CGPointMake(160, 410);
}];
Rotation
// The code you already have changing the transform of directionsArrow
Dismiss
[UIView animateWithDuration:1.f
animations:^{
compassContainer.center = CGPointMake(160, 410);
} completion:^(BOOL finished) {
[locationManager stopUpdateHeading];
}];
As Paul.s mentioned in the comments, that is not the current preferred way to do animations. And what you ask is really quite easy with the block method of animations. Have a look at the documentation, and here is a short example.
-(IBAction)animateDelete:(id)sender
{
[UIView animateWithDuration:0.4 delay:0.0 options:UIViewAnimationOptionCurveEaseIn
animations:^{
// Your first animation here...
}
completion:^(BOOL finished) {
// Do some stuff
[UIView animateWithDuration:0.4 delay:0.0 options:UIViewAnimationOptionCurveEaseInOut
animations:^{
// Your second animation here...
}
completion:^(BOOL finished) {
// Do some stuff
}
];
}
];
}
I'm scaling UIImageView and then reverting it using UIView animateWithDuration with UIViewAnimationOptionAutoreverse option. The problem is the image animation is a little bit jaggy (twitching) at the end of the animation. Here's my code:
[UIView animateWithDuration:0.25 delay:0 options:UIViewAnimationOptionAutoreverse
animations:^{
myImage.transform = CGAffineTransformScale(CGAffineTransformIdentity, 0.9, 0.9);}
completion:^(BOOL finished){if (finished){
myImage.transform = CGAffineTransformScale(CGAffineTransformIdentity, 1.0, 1.0);}}];
I know that I'm missing something but don't know where to start :(
UPDATE1: I'm performing nested 6 animations where each next animation performs after previous one. For that I'm using block animations and performing each next animation in complete block.
UPDATE2: I have tried with UIViewAnimationOptionRepeat option but there's still some flash effect after each scale animation.
UIViewAnimationOptionAutoreverse does nothing without also using the UIViewAnimationOptionRepeat option. Your animation as written will shrink the image to 90%, then snap back to 100% in the completion block. Maybe you can follow this animation with another that scales back to 100% over a quarter second. Something like this:
[UIView animateWithDuration:0.25 delay:0 options:UIViewAnimationOptionCurveEaseInOut
animations:^{
myImage.transform = CGAffineTransformScale(CGAffineTransformIdentity, 0.9, 0.9);}
completion:^(BOOL finished){if (finished){
[UIView animateWithDuration:0.25 delay:0 options:UIViewAnimationOptionCurveEaseInOut
animations:^{
myImage.transform = CGAffineTransformScale(CGAffineTransformIdentity, 1.0, 1.0);}
completion:NULL];}}];
.h file declerd.
NSInteger imgint;
.m file in code and try.
-(void)
{
[NSTimer scheduledTimerWithTimeInterval:(0.85f)target:self selector:#selector(play_btn_animation) userInfo:nil repeats:YES];
}
-(void)play_btn_animation
{
if(imgint == 0)
{
[UIView animateWithDuration:0.8
delay:0.0
options: UIViewAnimationOptionCurveEaseIn
animations:^{
img.transform = CGAffineTransformScale(CGAffineTransformIdentity, 0.8, 0.8);
}
completion:^(BOOL finished) {
img = 1;
}];
}
else
{
[UIView animateWithDuration:0.8
delay:0.0
options: UIViewAnimationOptionCurveEaseOut
animations:^{
img.transform = CGAffineTransformScale(CGAffineTransformIdentity, 1, 1);
}
completion:^(BOOL finished) {
imgint = 0;
}];
}
}