how to continuous bouncing uibutton between two points - ios

I'm new to iPhone developing,am using folling code to animate my UIButton it's animating perfectly but when i click the button the action not firing. plese help me out from this.
[UIButton animateWithDuration:3.0
delay:0.0f
options: UIViewAnimationOptionRepeat | UIViewAnimationOptionAutoreverse | UIViewAnimationOptionBeginFromCurrentState
animations: ^(void){
CGPoint p = Mybutton.center;
p.y += 100;
Mybutton.center = p;
}
completion:NULL];

Is this code in the button action or viewDidLoad? Try this one :
- (IBAction)buttonAnimation:(id)sender {
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:#"position"];
animation.duration = .3;
animation.repeatCount = 5;
animation.fromValue = [NSValue valueWithCGPoint:yourButton.center];
animation.toValue = [NSValue valueWithCGPoint:CGPointMake(yourButton.center.x, yourButton.center.y-30)];
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
animation.autoreverses = YES;
animation.removedOnCompletion = NO;
[yourButton.layer addAnimation:animation forKey:#"position"];}
You should put it in the button action.
Hope it helps

Related

Animate button two Labels Text change

Here the issue is , when i was tap the button the two labels text will be change,but i'm not able to display that animated function here the my code,
CABasicAnimation *rotate =
[CABasicAnimation animationWithKeyPath:#"transform.rotation"];
rotate.byValue = #(M_PI*1); // Change to - angle for counter clockwise rotation
rotate.duration = 0.4;
[_button.layer addAnimation:rotate
forKey:#"myRotationAnimation"];
CATransition *animation = [CATransition animation];
animation.duration = 1.0;
animation.type = kCATransitionFromBottom;
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
[_name1.layer addAnimation:animation forKey:#"changeTextTransition"];
[_name2.layer addAnimation:animation forKey:#"changeTextTransition"];
// Change the text
_from.text = #"new 222text";
_to.text = #"new text";
but i want change like this,
When i tapped that arrow button ,from and to address will be change up and down animation.Can you please help me ,i'm trying but i can not figure out like that,Thank you.
Try this code to animate your label:
- (CAAnimation*)moveup;
{
CABasicAnimation *animation = [CABasicAnimation animation];
animation.keyPath = #"position.y";
animation.fromValue = #-500;
animation.toValue = #10;
animation.duration = 0.25;
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
[label1.layer addAnimation:animation forKey:#"basic"];
[label2.layer addAnimation:animation forKey:#"basic"];
label1.layer.position = CGPointMake(0,20);
label2.layer.position = CGPointMake(0,20);
return animation;
}
and add the dimention parameter according to your need.
hope this will work fine.
you can rotate through this code:
-(CAAnimation*)rotate
{
CGRect boundingRect = CGRectMake(350, -500, -5,-5);
CAKeyframeAnimation *orbit = [CAKeyframeAnimation animation];
orbit.keyPath = #"position";
orbit.path = CFAutorelease(CGPathCreateWithEllipseInRect(boundingRect, NULL));
orbit.duration =0.5;
orbit.additive = YES;
orbit.repeatCount = HUGE_VALF;
orbit.calculationMode = kCAAnimationPaced;
orbit.rotationMode = kCAAnimationRotateAuto;
[btnScan.layer addAnimation:orbit forKey:#"orbit"];
return orbit;
}
I found a method for text change for the labels while button action,
bool isShown = false;
In the button Action :
- (IBAction)textChange:(id)sender {
if (!isShown) {
from.frame = CGRectMake(31, 220, 217 , 38);
to.frame = CGRectMake(31, 275, 217 , 38);
[UIView animateWithDuration:0.25 animations:^{
from.frame = CGRectMake(31, 275, 217, 38);
to.frame = CGRectMake(31, 220, 217 , 38);
}];
isShown = true;
} else {
[UIView animateWithDuration:0.25 animations:^{
from.frame = CGRectMake(31, 220, 217, 38);
to.frame = CGRectMake(31, 275, 217, 38);
}];
isShown = false;
}
}
Thank you.

Animating UIview from top to bottom and vice versa

I have a UIView at X=0 and Y=0 location with the height of 110 and UIButton at the bottom of the screen with the height of 50, i want to show both by animating but the UIView must animate from top to to its height and UIButton from bottom to its height, i am totally new with this please help me how to do it.
Following code worked for me to show a search view on top.
if (!isSearchActive) {
[UIView animateWithDuration:0.4
delay:0.1
options: UIViewAnimationOptionCurveEaseIn
animations:^{
searchView.frame = CGRectMake(0, 56, mainWidth, 50);
}
completion:^(BOOL finished){
}];
isSearchActive=YES;
}
else{
[UIView animateWithDuration:0.3
delay:0.1
options: UIViewAnimationOptionCurveEaseIn
animations:^{
searchView.frame = CGRectMake(0, 56, mainWidth, 0);
}
completion:^(BOOL finished){
}];
isSearchActive=NO;
}
Call this code on click of any button to show and hide the view.
Try this for top to bottom Animation:
- (CAAnimation*)movedown;
{
CABasicAnimation *animation = [CABasicAnimation animation];
animation.keyPath = #"position.y";
animation.fromValue = #600;
animation.toValue = #50;
animation.duration = 0.25;
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
[trashView.layer addAnimation:animation forKey:#"basic"];
trashView.layer.position =CGPointMake(0,-20);
return animation;
}
and Code for Bottom to Top:
- (CAAnimation*)moveup;
{
CABasicAnimation *animation = [CABasicAnimation animation];
animation.keyPath = #"position.y";
animation.fromValue = #-500;
animation.toValue = #10;
animation.duration = 0.25;
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
[trashView.layer addAnimation:animation forKey:#"basic"];
trashView.layer.position =CGPointMake(0,20);
return animation;
}
for first block of code you can use to animate view but you have to replace your viewcontroller at trashview in code.
and second block use for button but you have to replace your button at trashview.
but you can set value of animation according to your need.
basic animation which may fit your requirement
[UIView transitionWithView:view
duration:0.5
options:UIViewAnimationOptionTransitionNone
animations:^{
//update your frame here;
}
completion:nil];
Please go thru Apple Documentation and stack overflow
private func startAnimation() {
let animation = CABasicAnimation(keyPath: "position.y")
animation.fromValue = 10 //Top Y
animation.toValue = 204 //Bottom Y
animation.duration = 15 * 0.10 //duration * speed
animation.repeatCount = 100
animation.autoreverses = false
animation.isRemovedOnCompletion = true
animation.fillMode = .forwards
self.yourView.layer.add(animation, forKey: "position.y")
}
private func stopAnimation() {
self.yourView.layer.removeAllAnimations()
}

Add a bounce effect to a flip animation

I animated a flip for a pie chart I have. Here is my code"
CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:#"transform.scale.x"];
scaleAnimation.fromValue = [NSNumber numberWithFloat:1.0];
scaleAnimation.toValue = [NSNumber numberWithFloat:0.5];
scaleAnimation.duration = 1.0f;
scaleAnimation.removedOnCompletion = NO;
[self.pieChart addAnimation:scaleAnimation forKey:#"scale"];
animationDidStop:finished:
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:#"transform.scale.x"];
animation.fromValue = [NSNumber numberWithFloat:0.5];
animation.toValue = [NSNumber numberWithFloat:1.0];
animation.duration = 1.0f;
[self.pieChart addAnimation:animation forKey:#"scale"];
How can I add a bounce effect to the second animation? (The animation in animationDidStop:finished:)
Go with a CAKeyFrameAnimation instead of two CABasicAnimation:
CAKeyframeAnimation *scaleAnimation = [CAKeyframeAnimation animationWithKeyPath:#"transform.scale.x"];
scaleAnimation.keyTimes = #[#(0), #(0.5), #(0.9), #(1)];
scaleAnimation.values = #[#(1.0), #(0.5), #(1.1), #(1.0)];
scaleAnimation.duration = 1.0f;
scaleAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
With keyTimes and values, you can specify multiple stances in your animation. Here, I made it start with a scale of 1, animating to a scale of 0.5 (your first animation values), then 1.1 (an overshoot to create a "bounce") and finally 1 (your second animation values). Tweak those to your liking!
If you want to do this animation in two parts, you can keep your first animation, then start a CAKeyFrameAnimation in the animationDidStop:finished: similar to this instead:
CAKeyframeAnimation *scaleAnimation = [CAKeyframeAnimation animationWithKeyPath:#"transform.scale.x"];
scaleAnimation.keyTimes = #[#(0), #(0.8), #(1)];
scaleAnimation.values = #[#(0.5), #(1.1), #(1.0)];
scaleAnimation.duration = 1.0f;
scaleAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
If you instead want to use UIView animation blocks, you'll need to do something similar to this:
[UIView animateWithDuration:0.5 delay:0 options:UIViewAnimationOptionCurveEaseIn animations:^{
self.squareView.transform = CGAffineTransformMakeScale(0.5, 1);
} completion:^(BOOL finished) {
[UIView animateWithDuration:1 delay:0 usingSpringWithDamping:0.6 initialSpringVelocity:0 options:0 animations:^{
self.squareView.transform = CGAffineTransformIdentity;
} completion:nil];
}];
You will probably want to play with the params to tweak the animation.

Animation with UIViewAnimationOptionRepeat does not repeat

[UIView animateWithDuration:speedOfCutout
delay:0.2f
options:UIViewAnimationCurveEaseInOut | UIViewAnimationOptionRepeat //| UIViewAnimationOptionAutoreverse
animations:^{
CABasicAnimation *animation = [CABasicAnimation animation];
animation.keyPath = #"position.y";
animation.fromValue = #77;
animation.toValue = #600;
animation.duration = speedOfCutout;
[cutout.layer addAnimation:animation forKey: #"basic"];
cutout.layer.position = CGPointMake(160, 61);
[cutout.layer addAnimation:animation forKey: #"basic"];
cutout.layer.position = CGPointMake(160, 61);
[cutout.layer addAnimation:animation forKey: #"basic"];
cutout.layer.position = CGPointMake(160, 61);
}
completion:^(BOOL fin) {
}];
if (CGRectIntersectsRect(cutout.frame, shape.frame)) {
cutout.hidden = YES;
shape.hidden = YES;
[cutoutMovementTimer invalidate];
[self gameOver];
}
I have this code that is supposed to loop the animation until it runs into another shape. But, it only runs through once and does not do anything afterwords.
You're using CoreAnimation object, will not affected by UIView Animation block, remove UIView Animation block and add:
animation.autoreverses = YES;
animation.repeatCount = HUGE_VAL;
It'll work.
Try this:
set animation.repeatCount = -1;
And is the completion block handle the shape change event and stop the animation.

navigationBar and it's titleView rightBarButtonItem became smaller with animation

At normal state UI is like follow
when tableview slide up, i want the navigationBar became small with animation.
Code like follow
CABasicAnimation *shake = [CABasicAnimation animationWithKeyPath:#"transform"];
shake.duration = DURATION_TIME;
shake.fromValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(1.0, 1.0 ,1.0)];
shake.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(1.0, 0.5, 1.0)];
shake.removedOnCompletion = NO;
shake.fillMode = kCAFillModeForwards;
[self.navigationController.navigationBar.layer addAnimation:shake forKey:#"shakeAnimation"];
after the animation UI like follow
I don't want the navigationBar's y position change. And the titleView and rightbarItem became flat, How to avoid them becomes flat?
Try the code below. It works before ios7
UIView * testView = self.navigationController.navigationBar ;
CGRect frame = testView.layer.frame ;
testView.layer.anchorPoint = CGPointMake(0.5f, 0.0f) ;
testView.layer.frame = frame ;
[UIView animateWithDuration:1.0 animations:^{
CABasicAnimation *shake = [CABasicAnimation animationWithKeyPath:#"transform"];
shake.duration = 1.0;
shake.fromValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(1.0, 1.0 ,1.0)];
shake.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(1.0, 0.5, 1.0)];
shake.removedOnCompletion = NO;
shake.fillMode = kCAFillModeForwards;
[testView.layer addAnimation:shake forKey:#"shakeAnimation"];
}];

Resources