UIView animation: simulating velocity - ios

I am trying to use a UIView animation to simply move a view onto the screen:
[UIView animateWithDuration:.10 delay:0 options: nil animations:^
{
self.menusView.frame = endingMenuViewFrame;;
}
completion:^(BOOL finished)
{
}];
I'm wanting to add an animation so that UIView floats a little when it reaches the top before it comes down, i.e. akin to if someone jumps in the air - when they first jump, they shoot up quickly, but then gravity gradually slows them down as they reach the top of their jump, and eventually it pushes them back to earth. Does anyone know how to accomplish this?

Try with this code. This will make your view bounce three times with each time your height reduced by half. You may add more bounces.
CGFloat offset = 200.0;
CGRect originalFrame = self.menusView.frame;
[UIView animateWithDuration:1.0 animations:^{
CGRect frame = self.runnerAlertView.frame;
frame.origin.y = frame.origin.y - offset;
self.menusView.frame = frame;
} completion:^(BOOL finished){
[UIView animateWithDuration:1.0 animations:^{
self.menusView.frame = originalFrame;
} completion:^(BOOL finished) {
[UIView animateWithDuration:1.0 animations:^{
CGRect frame = self.menusView.frame;
frame.origin.y = frame.origin.y - 0.5 *offset;
self.menusView.frame = frame;
} completion:^(BOOL finished){
[UIView animateWithDuration:1.0 animations:^{
self.menusView.frame = originalFrame;
} completion:^(BOOL finished) {
[UIView animateWithDuration:1.0 animations:^{
CGRect frame = self.runnerAlertView.frame;
frame.origin.y = frame.origin.y - 0.25 * offset;
self.menusView.frame = frame;
} completion:^(BOOL finished){
[UIView animateWithDuration:1.0 animations:^{
self.menusView.frame = originalFrame;
}];
}];
}];
}];
}];
}];

Related

How to prevent 2 Animation on Object at the same time in Objective-C?

I have a UILabel and each time it touched, it'll scaled with CGAffineTransformMakeScale and animation, then back to real size with animation. Now if it touched before last animation ends, it'll scale the scaled object not the real size of main object and so it'll scaled more than it should to be scale. How to prevent this problem ? I want to second touch before last scale ending scale the main size of object.
Here is My Code :
(void)MyLabelTouched
{
[UIView animateWithDuration:.15 animations:^{
MyLabel.transform = CGAffineTransformMakeScale(1.5,1.5);
} completion:^(BOOL finished) {
[UIView animateWithDuration:.15 animations:^{
MyLabel.transform = CGAffineTransformIdentity;
}];
}];
}
Try this
(void)MyLabelTouched
{
if(animRunning){return;}
animRunning = YES;
[ MyLabel.layer removeAllAnimations];
MyLabel.transform = CGAffineTransformIdentity;
[UIView animateWithDuration:.15 animations:^{
MyLabel.transform = CGAffineTransformMakeScale(1.5,1.5);
} completion:^(BOOL finished) {
[UIView animateWithDuration:.15 animations:^{
MyLabel.transform = CGAffineTransformIdentity;
animRunning = NO;
}];
}];
}

Moving UIView OFF the screen from left to right and bring it IN again from left

How can I Move an UIView OFF the screen from left to right and then bring it IN the screen again from left side ?!!
Thanks in advance,
All you have to do is animate the x origin position of the view and use the devices screen with to determine how much. So for off screen to the right:
CGRect screenRect = [[UIScreen mainScreen] bounds];
CGFloat screenWidth = screenRect.size.width;
[UIView animateWithDuration:0.5 delay:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
_yourView.frame = CGRectMake(screenRect.size.width, _yourView.frame.origin.y, _yourView.frame.size.width, _yourView.frame.size.height);
}
completion:^(BOOL finished) {
//position screen left after animation
_yourView.frame = CGRectMake(-screenRect.size.width, _yourView.frame.origin.y, _yourView.frame.size.width, _yourView.frame.size.height);
}];
And for on screen go back to 0.0 x-position or whatever your starting point was:
[UIView animateWithDuration:0.5 delay:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
_yourView.frame = CGRectMake(0.0, _yourView.frame.origin.y, _yourView.frame.size.width, _yourView.frame.size.height);
}
completion:^(BOOL finished) {
//do something after animation
}];
To move OFF the screen:
CGRect frame = viewToMove.frame;
frame.origin.x = self.view.frame.size.width;
viewToMove.frame = frame;
To move the view back into the screen:
CGRect frame = viewToMove.frame;
frame.origin.x = 0;
viewToMove.frame = frame;
//Store your view's original rect
UIRect originRect = yourView.frame;
[UIView animateWithDuration:0.25 animations:^{
//create new rect and set its X coord to phone's width
CGrect rect = originRect;
rect.origin.x = self.view.frame.size.width;
yourView.frame = rect;
} completion:^(BOOL finished){
// when animation finished animating start new animation
//to bring your view to its original position
[UIView animateWithDuration:0.25 animation:^{
yourView.frame = originRect;
}];
}];
This code will move it to right in 0.3 seconds and then back from left to it's current position again in the next 0.3 seconds.
CGRect backToOriginal = Yourview.frame;
CGRect frameOnRight = CGRectMake ( screenWidth,backToOriginal.origin.y,backToOriginal.frame.size.width,backToOriginal.frame.size.height);
[UIView animateWithDuration:0.3 delay:0.0 options:UIViewAnimationOptionCurveEaseIn animations:^{ Yourview.frame = frameOnRight; } completion:^(BOOL finished)[UIView setFrame: screenLeft;] [UIView animateWithDuration:0.3 delay:0.0 options:UIViewAnimationOptionCurveEaseIn animations:^{ Yourview.frame = backToOriginal; }{ }];
There must be errors in this code in terms of syntax since I am not sitting on a MAC right now.
//To move view to left
[UIView animateWithDuration:0.5
delay:1.0
options: UIViewAnimationCurveEaseOut
animations:^{
self.yourView.frame = CGRectMake(distanceToLeft, distanceFromTop, yourView.width, yourView.height);
}
completion:^(BOOL finished){
NSLog(#"Moved to left!");
}];
// To move back to original position
[UIView animateWithDuration:0.5
delay:1.0
options: UIViewAnimationCurveEaseOut
animations:^{
self.yourView.frame = CGRectMake(originalX, OriginalY, yourView.Width, yourView.height);
}
completion:^(BOOL finished){
NSLog(#"Back to normal!");
}];

Animation of UIButton decreases its size

Here is a small clip of a view being animated by me:
Animation flash
I am having problems when animation from ? to S and vice versa. I am setting the appropriate frames to go off screen, and then back on from the other size. Why does the size of the black button decrease with every move around it?
-(void)moveToRight
{
//just made this method up, but my actual code
//special case
if (currentDay == 7) {
//move off the screen to the right
CGRect offScreenRightFrame = CGRectMake(self.circle.frame.origin.x + 60, self.circle.frame.origin.y, self.circle.frame.size.width, self.circle.frame.size.height);
//move to the left of the screen so we can animate it in
CGRect offScreenLeftFrame = CGRectMake(-40, self.circle.frame.origin.y, self.circle.frame.size.width, self.circle.frame.size.height);
if (self.delegate) {
if ([self.delegate respondsToSelector:#selector(dayChangedTo:)]) [self.delegate dayChangedTo:[self getCurrentDay]];
}
[self pulseCircle];
[UIView animateWithDuration:0.25f delay:0.0f options:UIViewAnimationOptionCurveLinear animations:^{
self.circle.frame = offScreenRightFrame;
}completion:^(BOOL finished) {
if (finished) {
self.circle.alpha = 0.0f;
self.circle.frame = offScreenLeftFrame;
[UIView animateWithDuration:0.25f delay:0.0f options:UIViewAnimationOptionCurveLinear animations:^{
self.circle.center = self.labelSun.center;
self.circle.alpha = 1.0f;
}completion:^(BOOL finished) {
if (finished) {
[UIView animateWithDuration:0.25f animations:^{
[self changeColors];
[self pulseCircle];
}];
}
}];
}
}];
}
-(void)moveLeft
{
if (currentDay == 8) {
CGRect circleFrame = self.circle.frame;
CGRect offScreenLeft = CGRectOffset(circleFrame, -20, 0);
CGRect offScreenRightFrame = CGRectMake(self.labelQuestion.frame.origin.x + 30, self.labelQuestion.frame.origin.y, circleFrame.size.width, circleFrame.size.height);
[self pulseCircle];
[UIView animateWithDuration:0.25f delay:0.0f options:UIViewAnimationOptionCurveLinear animations:^{
self.circle.frame = frame;
}completion:^(BOOL finished) {
if (finished) {
self.circle.alpha = 0.0f;
self.circle.frame = frameFinal;
[UIView animateWithDuration:0.25f delay:0.0f options:UIViewAnimationOptionCurveLinear animations:^{
self.circle.center = self.labelQuestion.center;
self.circle.alpha = 1.0f;
}completion:^(BOOL finished) {
if (finished) {
[UIView animateWithDuration:0.25f animations:^{
[self changeColors];
[self pulseCircle];
}];
}
}];
}
}];
}
- (void)pulseCircle
{
__block UILabel *day = [self getLabelOfDay];
[UIView animateWithDuration:TRANLATE_DURATION/2 delay:0.0f options:UIViewAnimationOptionBeginFromCurrentState animations:^{
self.circle.layer.transform = CATransform3DMakeScale(1.35f, 1.35f, 1);
day.transform = CGAffineTransformMakeScale(1.35f, 1.35f);
}completion:^(BOOL finished) {
[UIView animateWithDuration:TRANLATE_DURATION/2 animations:^{
self.circle.layer.transform = CATransform3DIdentity;
day.transform = CGAffineTransformIdentity;
}];
}];
}
I just put my logic.. honestly i don't read/see your code/logic but may be my idea work for you ;)
So, I think.. you should add size of circle in public variable as default size. And set this size whenever you rich at.
if (currentDay == 0 || currentDay == 8)
{
// Here you need to set your default size.
}
May be my logic work for you, Because 1 to 7 day its work fine but issue created at when currentDay rich at 0 or 8 day.
Thanks :)

Smoothest Way To Implement Back to Back UIAnimations

I need to have my character jump (increase the origin.y by 50 and reverse) in a game I am creating.
So far I have come across two ways of doing this:
Method 1:
[UIView animateWithDuration:1.0
delay:0.0
options:UIViewAnimationOptionAutoreverse
animations:^{
CGRect frame = self.kevinImageView.frame;
frame.origin.y -= 50;
self.kevinImageView.frame = frame;
} completion:^(BOOL finished){
CGRect frame = self.kevinImageView.frame;
frame.origin.y = 135;
self.kevinImageView.frame = frame;
}];
Issues: At the end of every complete jump animation (up and down) the ImageView jumps up and then back down (due probably to the tiny amount it takes for the completion block to be called). This is noticeable and I would much rather do without it.
Method 2:
[UIView animateWithDuration:1.0
animations:^{
CGRect frame = self.kevinImageView.frame;
frame.origin.y -= 50;
self.kevinImageView.frame = frame;
} completion:^(BOOL finished){
[UIView animateWithDuration:1.0
animations:^{
CGRect frame = self.kevinImageView.frame;
frame.origin.y += 50;
self.kevinImageView.frame = frame;
}];
}];
Issues: If I tap the view (I use a UITapGuestureRecognizer) and the ImageView is in the completion animation (going back down), the Image View will snap back to the bottom instead of finishing its animation. Again not a major issue, but something which I should be able to avoid.
Is there any method I have not come across which will resolve both of these issues, or a way to fix one of the methods?
Can you disable your UITapGuestureRecognizer when the animation is still running? And then enable it when the animation finishes.
if (!self.isAnimationRunning) {
self.isAnimationRunning = YES;
[UIView animateWithDuration:1.0
animations:^{
CGRect frame = self.kevinImageView.frame;
frame.origin.y -= 50;
self.kevinImageView.frame = frame;
} completion:^(BOOL finished){
[UIView animateWithDuration:1.0
animations:^{
CGRect frame = self.kevinImageView.frame;
frame.origin.y += 50;
self.kevinImageView.frame = frame;
} completion:^(BOOL finished){
self.isAnimationRunning = NO;
}];
}];
}
I'm very interested in this question so I do a simple demo to do a back to back animation.
I think maybe you can just use UIViewAnimationOptionAutoreverse and UIViewAnimationRepeat option to achieve a autoreverse animation.
[UIView animateWithDuration:1.0
delay:0
options:UIViewAnimationOptionAutoreverse|UIViewAnimationRepeat
animations:^{
[UIView setAnimationRepeatCount:1];
self.kevinImageView.center = CGPointMake(self.kevinImageView.center.x ,self.kevinImageView.center.y - 25);
} completion:^(BOOL finished){
self.kevinImageView.center = CGPointMake(self.kevinImageView.center.x ,self.kevinImageView.center.y + 25);
}];
and you can also set UIViewAnimationOptionAllowUserInteraction if you want to enable use interaction during the animation.

When creating an animation to cause a UIImageView to go up and down (almost float) infinitely, how do I stop a pause at the end of the animation?

Here's the code I'm using to take a UIImageView and make it float up and down.
[UIView animateKeyframesWithDuration:2.0 delay:0.0 options:UIViewKeyframeAnimationOptionRepeat animations:^{
[UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:0.25 animations:^{
self.slider.transform = CGAffineTransformMakeTranslation(0, -5.0);
}];
[UIView addKeyframeWithRelativeStartTime:0.25 relativeDuration:0.5 animations:^{
self.slider.transform = CGAffineTransformMakeTranslation(0, 5.0);
}];
[UIView addKeyframeWithRelativeStartTime:0.75 relativeDuration:0.25 animations:^{
self.slider.transform = CGAffineTransformMakeTranslation(0, 0.0);
}];
} completion:^(BOOL finished) {
}];
However, it comes out looking like this with this delay after the animation ends and before it restarts.
How do I make it fluid?
I'm not sure what effect you're going for exactly, but I think this gives you something like your code does without the delay. I usually do this by animating a constraint, rather than using transforms. In this example, I've made an IBOutlet (topCon) to the constraint to the top of the view:
-(IBAction)floatView:(id)sender {
static int i= 1;
static float duration = .25;
[UIView animateWithDuration:duration delay:0 options:UIViewAnimationOptionCurveLinear animations:^{
self.topCon.constant = self.topCon.constant - (5 * i);
[self.view layoutIfNeeded];
} completion:^(BOOL finished) {
i = (i == 1 || i == 2)? -2 : 2;
duration = 0.5;
[self floatView:self];
}];
}

Resources