Objective-c – Flip Animation not working

animationiphoneobjective cuiviewxcode

I have a Custom view. This custom view has two UIImageViews – imageview1 and imageview2.

[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:2.00];
[UIView setAnimationDelegate:self];
[UIView setAnimationDidStopSelector:@selector(transitionDidStop:finished:context:)];
[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft forView:self cache:YES];
if(frontVisible) {
[imageview1 removeFromSuperview];
[self addSubview: imageview2];
}
else {
[imageview2 removeFromSuperview];
[self addSubview: imageview1];
}
frontVisible = !frontVisible;
[UIView commitAnimations];

The image changes from imageview1 to imageview2 and viceversa but I dont get the flip effect. Instead I see the fading out of one image as the other appears.

Best Answer

Not really sure but I checked the documentation and found this:

Discussion

If you want to change the appearance of a view during a transition—for example, flip from one view to another—then use a container view, an instance of UIView, as follows:

Begin an animation block.

Set the transition on the container view.

Remove the subview from the container view.

Add the new subview to the container view.

Commit the animation block.

So it says you have to create a container view in order to make it work properly.

Related Solutions

R – change counterclockwise to clockwise with CGAffineTransformIdentity

I'm not sure what the state is when touchesEnded (in terms of rotation) and I'm assuing you chose degreesToRadians(-130) to try and do it partially and expect the next method to do the rest. This should be a better solution that hopefully yields the result you're expecting. I'm not sure what cadran is or why you're rotating that, so I'll just rotate the wheel.

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
    [UIView setAnimationBeginsFromCurrentState:YES];
    [UIView beginAnimations:nil context:NULL];
    [UIView setAnimationDuration:0.2];
    wheel.transform = CGAffineTransformMakeRotation(degreesToRadians(-130));
    // I would recommend that the degrees you rotate be half of whatever your rotation is.
    // this would make the wheel rotate to the home position more evenly
    [UIView setAnimationDelegate:self];
    [UIView setAnimationDidStopSelector:@selector(animatewheelViewToCenter:finished:context:)];
    [UIView commitAnimations];
}

- (void)animatewheelViewToCenter:(NSString *)animationID finished:(NSNumber *)finished context:(id)context {
    [UIView setAnimationBeginsFromCurrentState:YES]; // you might need to make this NO
    [UIView beginAnimations:nil context:NULL];
    [UIViewsetAnimationDuration:0.2];
    wheel.transform = CGAffineTransformIdentity;
    [UIView commitAnimations];
}

EDIT: Actually, I would probably make the rotation (in the example -130 degrees) slightly more than what half would be, because CGAffineTransformIdentity is gonna take the shortest path to go back to regular, so if you go exactly 1/2 way, it may not go the correct direction (clockwise or counter-clockwise) that you want.

Jquery – How to create a “Please Wait, Loading…” animation using jQuery

You could do this various different ways. It could be a subtle as a small status on the page saying "Loading...", or as loud as an entire element graying out the page while the new data is loading. The approach I'm taking below will show you how to accomplish both methods.

The Setup

Let's start by getting us a nice "loading" animation from http://ajaxload.info I'll be using enter image description here

Let's create an element that we can show/hide anytime we're making an ajax request:

<div class="modal"><!-- Place at bottom of page --></div>

The CSS

Next let's give it some flair:

/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('http://i.stack.imgur.com/FhHRx.gif') 
                50% 50% 
                no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading .modal {
    overflow: hidden;   
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal {
    display: block;
}

And finally, the jQuery

Alright, on to the jQuery. This next part is actually really simple:

$body = $("body");

$(document).on({
    ajaxStart: function() { $body.addClass("loading");    },
     ajaxStop: function() { $body.removeClass("loading"); }    
});

That's it! We're attaching some events to the body element anytime the ajaxStart or ajaxStop events are fired. When an ajax event starts, we add the "loading" class to the body. and when events are done, we remove the "loading" class from the body.

See it in action: http://jsfiddle.net/VpDUG/4952/