I want to animate UITableView on Button Click - ios

I have UITableView and i want to animate when user click on Button.
For Selected State --> BOTTOM TO TOP
For UnSelected State --> TOP TO BOTTOM
For that I have tried Below Code.
My TableView frame (0,39, width, height)
- (IBAction)onInviteFriendsButtonClick:(UIButton *)sender {
sender.selected =! sender.selected;
if (sender.selected) {
CGRect napkinBottomFrame = self.tblVWInviteFriend.frame;
napkinBottomFrame.origin.y = [UIScreen mainScreen].bounds.size.height;
self.tblVWInviteFriend.frame = napkinBottomFrame;
[UIView animateWithDuration:0.5 delay:0.0 options: UIViewAnimationOptionTransitionCurlUp animations:^{
self.tblVWInviteFriend.frame = CGRectMake(0, 39, self.tblVWInviteFriend.frame.size.width, self.tblVWInviteFriend.frame.size.height);
} completion:^(BOOL finished){/*done*/}];
}
else {
CGRect napkinBottomFrame = self.tblVWInviteFriend.frame;
napkinBottomFrame.origin.y = 39;
self.tblVWInviteFriend.frame = napkinBottomFrame;
[UIView animateWithDuration:0.5 delay:0.0 options: UIViewAnimationOptionTransitionCurlDown animations:^{
self.tblVWInviteFriend.frame = CGRectMake(0, -[UIScreen mainScreen].bounds.size.height, self.tblVWInviteFriend.frame.size.width, self.tblVWInviteFriend.frame.size.height);
} completion:^(BOOL finished){/*done*/}];
}
}
When i click button it will animate from BOTTOM TO TOP properly.
but when i click button again it will again gone from BOTTOM TO TOP.

Because you have set frame.origin.y of tableview is -y or XY coordinate.
self.tblVWInviteFriend.frame = CGRectMake(0, -[UIScreen mainScreen].bounds.size.height, self.tblVWInviteFriend.frame.size.width, self.tblVWInviteFriend.frame.size.height);
replace with this
self.tblVWInviteFriend.frame = CGRectMake(0, [UIScreen mainScreen].bounds.size.height, self.tblVWInviteFriend.frame.size.width, self.tblVWInviteFriend.frame.size.height);

Try this :
- (IBAction)onInviteFriendsButtonClick:(UIButton *)sender {
sender.selected =! sender.selected;
if (sender.selected) {
CGRect napkinBottomFrame = txtAOP.frame;
napkinBottomFrame.origin.y = [UIScreen mainScreen].bounds.size.height;
txtAOP.frame = napkinBottomFrame;
[UIView animateWithDuration:0.5 delay:0.0 options: UIViewAnimationOptionTransitionCurlUp animations:^{
txtAOP.frame = CGRectMake(0, 39, txtAOP.frame.size.width, txtAOP.frame.size.height);
} completion:^(BOOL finished){/*done*/}];
}
else {
CGRect napkinBottomFrame = txtAOP.frame;
napkinBottomFrame.origin.y = -[UIScreen mainScreen].bounds.size.height;
txtAOP.frame = napkinBottomFrame;
[UIView animateWithDuration:0.5 delay:0.0 options: UIViewAnimationOptionTransitionCurlDown animations:^{
txtAOP.frame = CGRectMake(0,39 , txtAOP.frame.size.width, txtAOP.frame.size.height);
} completion:^(BOOL finished){/*done*/}];
}
}

Related

iOS transform and frame animation

I want to change view frame to full screen bounds and transform to landscape.
I used UIView animation change frame and view's transform.
- (void)enterFullScreen {
CGRect frame = CGRectMake(0, 0, CGRectGetHeight(UIScreen.mainScreen.bounds), CGRectGetWidth(UIScreen.mainScreen.bounds));
self.originFrame = self.presentView.frame;
[UIView animateWithDuration:ZXYAnimationDuration animations:^{
self.presentView.transform = CGAffineTransformMakeRotation(M_PI_2);
self.presentView.frame = frame;
} completion:^(BOOL finished) {
}];
}
- (void)exitFullScreen {
[UIView animateWithDuration:ZXYAnimationDuration animations:^{
self.presentView.transform = CGAffineTransformIdentity;
self.presentView.frame = self.originFrame;
} completion:^(BOOL finished) {
}];
}
I expect the view rotate to landscape and full screen, but seems rotate error.
Finally, I tried it out, the answer is, do not exchange width and heigh, just like below:
- (void)enterFullScreen {
CGRect frame = CGRectMake(0, 0, CGRectGetWidth(UIScreen.mainScreen.bounds), CGRectGetHeight(UIScreen.mainScreen.bounds));
self.originFrame = self.presentView.frame;
[UIView animateWithDuration:ZXYAnimationDuration animations:^{
self.presentView.transform = CGAffineTransformMakeRotation(M_PI_2);
self.presentView.frame = frame;
} completion:^(BOOL finished) {
}];
}
- (void)exitFullScreen {
[UIView animateWithDuration:ZXYAnimationDuration animations:^{
self.presentView.transform = CGAffineTransformIdentity;
self.presentView.frame = self.originFrame;
} completion:^(BOOL finished) {
}];
}

how to change position of button with Animation

change position when it is pressed.
UIButton * button = sender;
CGPoint position = button.frame.origin;
[UIButton setAnimationDuration:1.0];
CGSize size = button.frame.size;
button.frame = CGRectMake(position.x + 80,position.y,size.width,size.height);
Try this:
[UIView animateWithDuration:1.0 animations:^{
btn.frame = CGRectOffset(btn.frame, 0, 20);
}];
For animating the position of UIButton with duration 1.0 seconds
CGPoint position = button.frame.origin;
CGSize size = button.frame.size;
-(IBAction)btnClick:(id)sender {
[UIView animateWithDuration:1.0 animations:^{
button.frame = CGRectMake(position.x+80,position.y,size.width,size.height);
}];
}
Try this :
button.frame = CGRectMake(position.x + 80,position.y,size.width,size.height); // initial frame
[UIView animateWithDuration:2 animations:^{
button.frame = CGRectMake(position.x + 80,position.y,size.width,size.height); // new frame frame
} completion:^(BOOL finished) {
}];
you can use Animation block of UIView class ...
whatever you change the frame inside this block , the canvas fill the frame in between
Set the Start frame
button.frame= yourInitialFrame;
[UIView animateWithDuration:1.0 animations:^{
// set the End Frame here
button.frame = CGRectMake(position.x +
80,position.y,size.width,size.height); // new frame frame
} completion:^(BOOL finished) {
}];
also see this see this for more help
[UIView animateWithDuration:1.0 animations:^{
// set the End Frame here
button.frame = CGRectMake(position.x +
80,position.y,size.width,size.height); // new frame frame
} completion:^(BOOL finished) {
}];
Try this:
-(IBAction)ButtonClick:(id)sender
{
UIButton *aBtnRef = sender;
[UIView animateWithDuration:0.5 animations:^{
aBtnRef.frame = CGRectMake(aBtnRef.frame.origin.x + 50,aBtnRef.frame.origin.y, aBtnRef.frame.size.width, aBtnRef.frame.size.height);
} completion:^(BOOL finished) {
}];
}
For More Info :
Animation : How to make UIbutton move from right to left when view is loaded?
Moving UIButton position, animated
[UIView animateWithDuration:0.2 animations:^{
CGRect rect = button.frame;
rect.origin.x = rect.origin.x + 80;
button.frame = rect;
} completion:^(BOOL finished) {
}];

Frame animation doesnt work

viewDidLoad :
topBarMenu = [[TopBarMenu alloc] initWithFrame:CGRectMake(0, 64, 1024, 0)];
[self.view addSubview:topBarMenu];
topBarMenu.clipsToBounds = YES;
- (void)menuButton_TouchUpInside:(TopBarIcon *)sender
{
isTopBarMenuShown = !isTopBarMenuShown;
if (isTopBarMenuShown) {
[UIView animateWithDuration:1.5 animations:^{
topBarMenu.frame = CGRectMake(0, 64, 1024, 600);
}];
}else {
[UIView animateWithDuration:1.5 animations:^{
topBarMenu.frame = CGRectMake(0, 64, 1024, 0);
}];
}
}
In my code i want to animate showing and hiding my menu. Showing is very stepped and dosen't look nice. Hiding immediately remove the screen without any animation. How to solve this problem ?
You need to set constant when you are using Autolayout and Animation. So, set constant before you begin the Animation. So, create outlet of constrain of y position.
topbaryposition.constant=0; (IBOutlet of Top position (Y postion of Topbar))
- (void)menuButton_TouchUpInside:(TopBarIcon *)sender
{
isTopBarMenuShown = !isTopBarMenuShown;
if (isTopBarMenuShown) {
[UIView animateWithDuration:1.5 animations:^{
topBarMenu.frame = CGRectMake(0, 64, 1024, 600);
}];
}else {
[UIView animateWithDuration:1.5 animations:^{
topBarMenu.frame = CGRectMake(0, 64, 1024, 0);
}];
}
}
Something like ,
Edit :-
I found your Issue .
Your issue is seeting the frame in else when you hiding the topbar.you have set only height as 0 but you also need to set y positioan as 0..
Something like ,
topBarMenu.frame = CGRectMake(0, 0, 1024, 0);
- (void)menuButton_TouchUpInside:(TopBarIcon *)sender
{
isTopBarMenuShown = !isTopBarMenuShown;
if (isTopBarMenuShown) {
[UIView animateWithDuration:1.5 animations:^{
topBarMenu.frame = CGRectMake(0, 64, 1024, 600);
}];
}else {
[UIView animateWithDuration:1.5 animations:^{
topBarMenu.frame = CGRectMake(0, 0, 1024, 0);
}];
}
}
try this
if (sideView.frame.origin.x >= 0 )
{
[UIView animateKeyframesWithDuration:0.5 delay:0 options:UIViewKeyframeAnimationOptionBeginFromCurrentState animations:^{
sideView.frame=CGRectMake(-400, 45, CGRectGetWidth(sideView.frame), CGRectGetHeight(sideView.frame));
} completion:^(BOOL finished) {
}];
}
else
{
[UIView animateKeyframesWithDuration:0.5 delay:0 options:UIViewKeyframeAnimationOptionBeginFromCurrentState animations:^{
sideView.frame=CGRectMake(0, 45, CGRectGetWidth(sideView.frame), CGRectGetHeight(sideView.frame));
} completion:^(BOOL finished)
{
}];
}
I think set frame directly is not a very good method,I suggest to change frame is more appropriate.
Such as:
- (void)menuButton_TouchUpInside:(TopBarIcon *)sender
{
isTopBarMenuShown = !isTopBarMenuShown;
if (isTopBarMenuShown) {
[UIView animateWithDuration:1.5 animations:^{
CGRect rect = topBarMenu.frame;
rect.size.height = 600.0f;
topBarMenu.frame = rect;
//topBarMenu.frame = CGRectMake(0, 64, 1024, 600);
}];
} else {
[UIView animateWithDuration:1.5 animations:^{
CGRect rect = topBarMenu.frame;
rect.size.height = 0.0f;
topBarMenu.frame = rect;
//topBarMenu.frame = CGRectMake(0, 64, 1024, 0);
}];
}
}

Is There Anyway I can make my image jump then fall back down

I want my image to jump up 7 y-axis Lines or something, but then i want him to fall back down. Any Help?
Heres My Code:
CGRect frame = Guy.frame;
frame.origin.x = frame.origin.x - 0;
frame.origin.y = frame.origin.y - 7;
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:0.60];
Guy.frame = frame;
[UIView commitAnimations];
Try this:
CGRect frame = Guy.frame;
[UIView animateWithDuration:0.6 delay: 0 options:UIViewAnimationCurveEaseInOut animations: ^{
Guy.frame = CGRectMake(frame.origin.x, frame.origin.y - 7,
frame.size.width, frame.size.height);
} completion: ^(BOOL finished) {
if (finished) {
[UIView animateWithDuration:0.6 delay: 0 options:UIViewAnimationCurveEaseInOut animations: ^{
Guy.frame = CGRectMake(frame.origin.x, frame.origin.y + 7,
frame.size.width, frame.size.height);
}];
}
}];
[UIView animateWithDuration:1.0
delay: 0.0
animations:^{
image.frame = CGRectMake(image.frame.origin.x, image.frame.origin.y-7, image.frame.size.width, image.frame.size.height);
}
completion:^(BOOL finished){
// move it ba
[UIView animateWithDuration:1.0
delay: 1.0
options:UIViewAnimationOptionCurveEaseOut
animations:^{
image.frame = CGRectMake(image.frame.origin.x, image.frame.origin.y+7, image.frame.size.width, image.frame.size.height);
}
completion:nil];
}];
[UIView animateWithDuration:.5 delay:0.0
options:UIViewAnimationOptionCurveEaseIn
animations:^{
CGRect f = imageview.frame;
f.origin.y -= 40;
imageview.frame = f;
}
completion:nil];
if (imageview.frame.origin.y) {
[UIView animateWithDuration:.6 delay:0.1
options:UIViewAnimationOptionCurveEaseIn
animations:^{
CGRect f = imageview.frame;
f.origin.y += 80;
imageview.frame = f;
}
completion:nil];}

Create Continous uiimage animation in x axis

i want to create background like http://disqus.com/ continues background but i can't get it after try with my code like this
continuesBackground =[[UIImageView alloc]initWithImage:[UIImage imageNamed:#"pattern"]];
continuesBackground.frame=CGRectMake(0, 56, 320, 102);
continuesBackground.layer.zPosition=100;
[UIView animateWithDuration:5.0
delay:0.0
options:UIViewAnimationOptionCurveLinear
animations:^{
continuesBackground.transform = CGAffineTransformMakeTranslation(0, 200); }
completion:^(BOOL finish) {
continuesBackground.transform = CGAffineTransformMakeTranslation(200, 0);
}];
how to make it ? do i need nstimer?
Try this:
- (void)animateImageViewFromStartPosition:(CGPoint)aStartPosition toEndPosition:(CGPoint)aEndPosition; {
CGRect oldFrame = CGRectMake(aStartPosition.x, aStartPosition.y, continuesBackground.frame.size.width, continuesBackground.frame.size.height);
[continuesBackground setFrame:oldFrame];
[UIView animateWithDuration:5.0f
delay:0.0f
options:UIViewAnimationOptionCurveEaseInOut
animations:^(void){
CGRect newFrame = continuesBackground.frame;
newFrame.origin = aEndPosition;
continuesBackground.frame = newFrame;
}
completion:^(BOOL finished){
if(finished){
[self animateImageViewFromStartPosition:aStartPosition toEndPosition:aEndPosition];
}
}];
}
Then call the method in your viewDidLoad method:
- (void)viewDidLoad; {
[super viewDidLoad];
[self animateImageViewFromStartPosition:CGPointMake(0.0f, 56.0f) toEndPosition:CGPointMake(320.0f, 56.0f)];
}
You can easily modify this to a transform, or whatever you want, and it will keep the animation going indefinitely. Hope that Helps!
- (void)animateImageViewFromStartPosition:(CGPoint)aStartPosition toEndPosition:(CGPoint)aEndPosition; {
CGRect oldFrame = CGRectMake(aStartPosition.x, aStartPosition.y,continuesBackground.frame.size.width, continuesBackground.frame.size.height);
[continuesBackground setFrame:oldFrame];
[UIView animateWithDuration:5.0f
delay:0.0f
options:UIViewAnimationOptionCurveEaseInOut
animations:^(void){
CGRect newFrame = continuesBackground.frame;
newFrame.origin = aEndPosition;
continuesBackground.frame = newFrame;
}
completion:^(BOOL finished){
if(finished){
[self animateImageViewFromStartPosition:aStartPosition toEndPosition:aEndPosition];
}
}];
}
Then call the method in your viewDidLoad method:
- (void)viewDidLoad; {
[super viewDidLoad];
[self animateImageViewFromStartPosition:CGPointMake(0.0f, 56.0f) toEndPosition:CGPointMake(320.0f, 56.0f)];
}
talking about this code please let me know where to apply an code for
The following correct answer of the problem in Swift 4.2 version:
func animateImageViewFrom(startPosition aStartPosition: CGPoint, toEndPosition aEndPosition: CGPoint) {
let oldFrame = CGRect(x: aStartPosition.x, y: aStartPosition.y, width: continuesBackground.frame.size.width, height: continuesBackground.frame.size.height)
continuesBackground.frame = oldFrame
UIView.animate(withDuration: 0.5, delay: 0.0, options: .curveEaseInOut, animations: {
var newFrame = self.continuesBackground.frame
newFrame.origin = aEndPosition
self. continuesBackground.frame = newFrame
}) { (finished) in
if finished {
self.animateImageViewFrom(startPosition: aStartPosition, toEndPosition: aEndPosition)
}
}
}

Resources