I am doing an image transition using an animation block like this
[UIView animateWithDuration:1.0f delay:0.0f options:UIViewAnimationOptionTransitionCrossDissolve animations:^{
self.songTitleLabel.text = currentSong.songTitle;
self.artistNameLabel.text = currentSong.songArtist;
self.songImageView.image = currentSong.songArtwork;
}completion:^(BOOL finished){
self.player = [[AVAudioPlayer alloc] initWithContentsOfURL:currentSong.songLocation error:nil];
[self.player setVolume:1.0];
[self.player play];
}];
I don't understand why I don't have a fade transition, I have tried several different UIAnimationOptionTransition... and every time I just get an abrupt jump to the next image (this happens to the text as well)
Can someone help me out?
You can't animate the changing of an image or text that way. I've done it like this,
-(IBAction)doStuff:(id)sender {
[UIView transitionWithView:self.imageView
duration:1.0
options:UIViewAnimationOptionTransitionCrossDissolve
animations:^{
[self.imageView setImage:[UIImage imageNamed:#"IMG_0081.JPG"]];
} completion:nil];
[UIView transitionWithView:self.label2
duration:1.0
options:UIViewAnimationOptionTransitionCrossDissolve
animations:^{
[self.label2 setText:#"New Text"];
} completion:nil];
}
If you're changing multiple labels or image views, it might be better to create a subclass, and override setText: and setImage:. For example, like this for setImage:,
-(void)setImage:(UIImage *)image {
[UIView transitionWithView:self
duration:1.0
options:UIViewAnimationOptionTransitionCrossDissolve
animations:^{
[super setImage:image];
} completion:nil];
}
You can then just use,
self.imageView.image = ...
for any image view that's your subclass, and it will cross fade the images when you change them.
Related
Im trying to fade in and out of a light node I have created I just dont know where to call the function accordingly so it will continously fade in and out. Never tried animating anything here is what I have.
- (void)fadeOutIn:(UIView *)view duration:(NSTimeInterval)duration
{
[self enumerateChildNodesWithName:#"//*" usingBlock:^(SKNode *node, BOOL *stop) {
if ([node.name isEqualToString:#"light1"]) {
[UIView animateKeyframesWithDuration:5 delay:2 options:UIViewAnimationOptionRepeat|UIViewAnimationOptionAutoreverse|UIViewAnimationCurveEaseInOut animations:^{
node.alpha = 0;
} completion:^(BOOL finished) {
}];
}
}];
}
where should I call this function?that is fades in and out continously?
Should it be called within an action?
Thank You
Use this for Continue fade in out.
-(void)viewDidAppear:(BOOL)animated{
[UIView animateKeyframesWithDuration:1 delay:0 options:UIViewAnimationOptionRepeat|UIViewAnimationOptionAutoreverse|UIViewAnimationCurveEaseInOut|UIViewAnimationOptionAllowUserInteraction animations:^{
node.alpha = 0;
} completion:^(BOOL finished) {
[UIView animateWithDuration:1 animations:^{
node.alpha = 1;
} completion:nil];
}];
}
-(void) viewWillAppear:(BOOL)animated {
[super viewWillAppear:animated];
[objAnimate setAlpha:1.0];
[UIView animateKeyframesWithDuration:2.0 delay:0.0 options:UIViewKeyframeAnimationOptionCalculationModeLinear | UIViewAnimationOptionCurveEaseInOut|UIViewAnimationOptionRepeat|UIViewAnimationOptionAutoreverse animations:^{
[objAnimate setAlpha:0.0];
} completion:nil];
}
This will create continuous fade in and out for your object when it appears. If you want to create programmatically a custom object and then use this code then do it after your custom object is added in your view as below (example):
objAnimate = [[UILabel alloc] initWithFrame:CGRectMake(20, 50, 200, 40)];
objAnimate.backgroundColor = [UIColor lightGrayColor];
[objAnimate setAlpha:1.0];
[self.view addSubview:objAnimate];
[UIView animateKeyframesWithDuration:2.0 delay:0.0 options:UIViewKeyframeAnimationOptionCalculationModeLinear | UIViewAnimationOptionCurveEaseInOut|UIViewAnimationOptionRepeat|UIViewAnimationOptionAutoreverse animations:^{
[objAnimate setAlpha:0.0];
} completion:nil];
The view starts animating as soon as its added in your view.
I tried attempting to achieve the below animation using UIViewAnimationOptionTransitionFlipFromTop, it doesn't work and changes the image in no time. Following is the code I used:
[self.thanksButton setImage:[UIImage imageNamed:#"frame1_image"] forState:UIControlStateNormal];
[UIView animateWithDuration:3.0 delay:0 options:UIViewAnimationOptionTransitionFlipFromTop animations:^{
} completion:^(BOOL finished) {
[self.thanksButton setImage:[UIImage imageNamed:#"frame4_image"] forState:UIControlStateNormal];
}];
Also tried splitting the images into four different frames and applying those images one by one using nested animation like this,
[UIView animateWithDuration:3.0 animations:^{
[self.thanksButton setImage:[UIImage imageNamed:#"frame2_image"] forState:UIControlStateNormal];
} completion:^(BOOL finished) {
[UIView animateWithDuration:3.0 animations:^{
[self.thanksButton setImage:[UIImage imageNamed:#"frame3_image"] forState:UIControlStateNormal];
} completion:^(BOOL finished) {
[UIView animateWithDuration:3.0 animations:^{
[self.thanksButton setImage:[UIImage imageNamed:#"frame4_image"] forState:UIControlStateNormal];
} completion:^(BOOL finished) {
}];
}];
}];
Please let me know what needs to be fixed here. Following is the animation:
The setImage cannot be animated, just by putting in it the UIView animationblock, therefore the completionBlock doesn't not wait 3 seconds, but calls immediatly. To see an actual effect set some alpha on the self.thanksbutton like 0.3, 0.5, 1 ( i don't think it will look good, but you should see the effect)
Also, I would make 2 buttons so I could use the :
[UIView transitionFromView:firstButton
toView:theOtherButton duration:0.3f
options:UIViewAnimationOptionTransitionFlipFromBottom
completion:^(BOOL finished) {
}];
I am attempting a simple UIView animation in the viewDidLoad or viewDidAppear method but it doesn't animate.
UIImage *bluredScreenshot = [self.parentViewControllerScreenshot applyBlur];
[UIView transitionWithView:self.screenshotView duration:3.0f options:UIViewAnimationOptionTransitionCrossDissolve animations:^{
self.screenshotView.image = bluredScreenshot;
} completion:nil];
Simple cross dissolving two images. When ran from viewDidLoad or viewDidAppear the image changes but isn't animated.
But lets say I run the animation from a method after I press a button, it will animate. Why? Seem strange.
Is it possible to make it from the viewDidLoad method? How would you solve this?
Thanks.
You need to fade in the screenshot. If you're using two images, you'll need to place one image view atop the other.
pop this inside viewDidAppear: after calling [super viewDidAppear:animated];
UIImageView *imageView = [[UIImageView alloc] initWithFrame:self.screenshotView.frame];
[self.view addSubview:imageView];
[imageView setAlpha:0.0f];
imageView = blurredScreenshot;
[UIView animateWithDuration:0.3f animations:^{
[imageView setAlpha:1.0f];
} completion:^(BOOL finished){
self.imageView.image = blurredScreenshot;
[imageView removeFromSuperview];
}];
when the view is loading you can't animate because there isn't anything to animate. Try in viewdidapear: and Don't use transition
[UIView animateWithDuration:3.
delay:0
options:UIViewAnimationOptionTransitionCrossDissolve
animations:^{
self.screenshotView.image = bluredScreenshot;
}
completion:nil];
Just a reminder, sometimes your problem can be caused by not calling:
self.layoutIfNeeded()
Hello guys I am new to xcode and I am trying to animate balloons on touch by changing its images: this is my code:
now the problem i am facing is its not animating images means the animation timer is not working: please guide me what should i do to animate the images with time: if I am not doing it properly then please guide me that how can i do it by NSTimer?
-(void)baloonbursting:(UIButton *)button withEvent:(UIEvent *)event{
if ([[UIImage imageNamed:#"redbaloons.png"] isEqual:button.currentImage]) {
NSLog(#"em redbaloons.png");
UIImage *bubbleImage3 = [UIImage imageNamed:#"redburst.png"];
[button setImage:bubbleImage3 forState:UIControlStateNormal];
}
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
[UIView animateWithDuration:1.0f animations:^(){
// define animation
if ([[UIImage imageNamed:#"redburst.png"] isEqual:button.currentImage]) {
NSLog(#"em redbaloons.png");
UIImage *bubbleImage3 = [UIImage imageNamed:#"redburst2.png"];
[button setImage:bubbleImage3 forState:UIControlStateNormal];
}
}
completion:^(BOOL finished){
// after the animation is completed call showAnimation again
[UIView animateWithDuration:1.0 delay:0.0 options:UIViewAnimationOptionCurveEaseOut|UIViewAnimationOptionAllowUserInteraction animations:^{
} completion:^(BOOL finished){
if (finished) {
[button removeFromSuperview];
}}];
}];
}
I want you to give you a solution to show you the right direction to think. That is, why I developed a small test project in Xcode and I controlled that this code really works.
First: forget NSTimers for this animation!
The idea is, that you "play" around with subviews, because you can change their alpha properties from 0.0 (invisible) to 1.0 (fully opaque), which are supported by the SDK's view animations.
Please change the image names according to your own file names (I've used my own here).
The following method checks, if the button's image is that one that shall invoke an animation - exactly what you did before. If this condition is met, it visually animates the change of the button's image to another image:
- (IBAction)balloonBursting:(UIButton *)sender
{
BOOL doAnimate = NO;
UIImageView *ivOldBubbleImage;
UIImageView *ivNewBubbleImage;
if ([[UIImage imageNamed:#"BalloonYellow.png"] isEqual:sender.currentImage]) {
NSLog(#"will animate");
doAnimate = YES;
UIImage *newImage = [UIImage imageNamed:#"BalloonPurple.png"];
ivNewBubbleImage = [[UIImageView alloc] initWithImage:newImage];
ivNewBubbleImage.alpha = 0.0;
ivOldBubbleImage = sender.imageView;
[sender addSubview:ivNewBubbleImage];
}
if (doAnimate) {
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
[UIView animateWithDuration:1.0f animations:^(){
// define animation
ivOldBubbleImage.alpha = 0.0;
ivNewBubbleImage.alpha = 1.0;
}
completion:^(BOOL finished){
[sender setImage:ivNewBubbleImage.image forState:UIControlStateNormal];
[ivNewBubbleImage removeFromSuperview];
}];
}
}
In a UIView subclass I have this:
self.frontImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"front"]];
self.backImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"back"]];
[self addSubview:self.backImageView];
[UIView animateWithDuration:0.5
delay:0.0
options:UIViewAnimationOptionTransitionFlipFromLeft
animations:^{
[self.backImageView removeFromSuperview];
[self addSubview:self.frontImageView];}
completion:^(BOOL finished){
//nothing
}];
But I don't get the flip animation. The front image view just appears immediately. What am I doing wrong?
You are making a silly mistake using
animateWithDuration:delay:options:animations:completion:
instead of
transitionFromView:toView:duration:options:completion:
Your code should be:
[UIView transitionFromView:backImageView
toView:frontImageView
duration:0.5
options:UIViewAnimationOptionTransitionFlipFromLeft
completion:^(BOOL finished) {
// animation completed
}];