I want to make something like this:
Reference of image.
What I do: two UIImagesView, one with UIViewContentModeLeft and another with UIViewContentModeRight. I have a slider where I can change image frames. The solution seems to be ok, but I am not sure if this is the "right" one. Other suggestions are welcome.
Thanks!
use single Imageview for your concept it is my suggestion If you feel free use this else use your concept else go some thirdparty, where you need for modify the transparent, add the one Transparent UIView above the ImageView . set the frame as of Transparent UIView for Show as (0, 0, ImageView.frame.size.width/2,ImageView.frame.size.height) , for Hide (ImageView.frame.origin.X - 40, 0, ImageView.frame.size.width/2,ImageView.frame.size.height)
for example
To Show
TransparentView.hidden = NO;
TransparentView.alpha = 0.1;
[UIView animateWithDuration:0.25 animations:^{
TransparentView.frame = CGRectMake(0,
0,
ImageView.frame.size.width/2,
ImageView.frame.size.height);
TransparentView.alpha = 1.0f;
} completion:^(BOOL finished) {
// do some
}];
To hide
[UIView animateWithDuration:0.25 animations:^{
TransparentView.frame = CGRectMake(0 - self.view.frame.size.width,
0,
ImageView.frame.size.width/2,
ImageView.frame.size.height);
[TransparentView setAlpha:0.1f];
} completion:^(BOOL finished) {
TransparentView.hidden = YES;
}];
Related
I have created custom buttons and worked with custom UIViews in the past. However I am not sure how to go about with this.
I am trying to create something similar to the twitter heart animation.
What I am unable to get is those tiny colored circles around the heart as shown in this gif:
https://dribbble.com/shots/2416983-Twitter-Heart-Animation
Any ideas?
Also is it possible for me to simply have a gif and add the gif as a custom view in a UIButton and play the gif when button is pressed?
Here's a concept:
- (void)viewDidAppear:(BOOL)animated {
[super viewDidAppear:animated];
UIView *bubble = [[UIView alloc] initWithFrame:CGRectMake(0.0, 0.0, 16.0, 16.0)];
bubble.layer.cornerRadius = 8.0;
bubble.center = self.view.center;
bubble.backgroundColor = [UIColor greenColor];
[self.view addSubview:bubble];
UIView *heart = [[UIView alloc] initWithFrame:CGRectMake(0.0, 0.0, 100.0, 100.0)];
heart.layer.cornerRadius = 50.0;
heart.center = self.view.center;
heart.backgroundColor = [UIColor blueColor];
[self.view addSubview:heart];
[UIView animateKeyframesWithDuration:2.0
delay:0.0
options:UIViewKeyframeAnimationOptionRepeat
animations:^{
// Heart expands
[UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:0.10 animations:^{
heart.transform = CGAffineTransformMakeScale(1.3, 1.3);
}];
// Heart contracts.
[UIView addKeyframeWithRelativeStartTime:0.15 relativeDuration:0.25 animations:^{
heart.transform = CGAffineTransformMakeScale(1.0, 1.0);
}];
// Bubble travels.
[UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:0.4 animations:^{
CGPoint destination = self.view.center;
destination.x += 100;
destination.y -= 100;
bubble.center = destination;
}];
// Bubble shrinks.
[UIView addKeyframeWithRelativeStartTime:0.6 relativeDuration:0.2 animations:^{
bubble.transform = CGAffineTransformMakeScale(0.3, 0.3);
}];
// Bubble fades.
[UIView addKeyframeWithRelativeStartTime:0.8 relativeDuration:0.2 animations:^{
bubble.alpha = 0.0;
}];
} completion:nil];
}
To get the full effect, you will need to add any a few more key frames so the bubble curves around before the fade. Given that you have a couple of bubbles, it might be a good idea to create a key frame generator.
Alternatively, you can use SKEmitterNode and add real particles to your button.
Late Answer but useful to other developers.
Here is the Link for exact same animation: https://github.com/xhamr/fave-button
Same Animation in Objective-C also: https://github.com/tljackyi/fave-button
I'm trying to make a user interface that animates when I click on it.
This is my sketch:
It starts with the mapview as small as on the left sketch. The rest is filled with a tableview. Now when I click on the map view it slides to the bottom like on the right sketch so the mapview fills the most off the screen. Ans visa versa when I click on the small Tableview.
How can I achieve this?
I thought off creating a View and then add mapview and tableview as subviews, but then I don't know how to animate that. Did some real simple animations until now.
Can someone point me in the right direction?
NSNumber isMapExpanded = 0;
- (void) expandMap
{
[UIView animateWithDuration:1.0
delay:0.2
options:nil
animations:^{
if([isMapExtended integerValue] == 0)
{
mapview.frame = CGRectMake(mapview.frame.origin.x, mapview.frame.origin.y, mapview.frame.size.width, mapview.frame.size.height + heightTobeExpanded);
tableView.frame = CGrectMake(tableView.frame.origin.x, tableView.frame.origin.y - heightTobeExpanded, tableView.frame.size.width, tableView.frame.size.height + heightTobeExpanded);
}
else if([isMapExtended integerValue] == 1)
{
mapview.frame = CGRectMake(mapview.frame.origin.x, mapview.frame.origin.y, mapview.frame.size.width, mapview.frame.size.height - heightTobeExpanded);
tableView.frame = CGrectMake(tableView.frame.origin.x, tableView.frame.origin.y + heightTobeExpanded, tableView.frame.size.width, tableView.frame.size.height - heightTobeExpanded);
}
}
completion:nil];
}
something along the lines of:
[UIView animateWithDuration:1.0
delay:0
options:nil
animations:^{
map.frame = CGRectMake(0,0,newheight,320);
table.frame = CGrectMake(0,newheight,screenheight-newheight, 320);
}
completion:nil];
you can call something like that in your click method. this is just an example - you should not use hardcoded numbers in your application :)
Please try this code:-
[UIView beginAnimations:#"Expand MApview" context:nil];
[tblView setFrame:CGRectMake(0, self.view.frame.size.height-50, tblView.frame.size.width,tblView.frame.size.height)];
[mapview setFrame:CGRectMake(0,0,mapview.frame.size.width,self.view.frame.size.height-50)];
[UIView setAnimationDelay:2];
[UIView commitAnimations];
As you already stated, put both the map and the table in a superview.
On click, you may use the following :
[UIView animateWithDuration:0.5 animations:^{
map.frame = CGRectMake(x,y,width,newHeight); //Set the frame to be with the new map height
tableView.frame = CGRectMake(x,NewYCoordinate,width,height); //Move the tableView down
}];
- (void) changeFrameBetweenMapAndTable
{
[UIView animateWithDuration:1.0
delay:0.5
options:nil
animations:^{
CGRect mapRect = mapview.frame;
mapview.frame = tableView.frame;
tableView.frame = mapRect;
}
completion:nil];
}
I am wanting to animate a ImageView's X Position and reset it if it reaches a certain X Position. For example, Start out a 700 and move to the left.. if it reaches 100 I want to reset it to 700. And do this continually over and over.
Pretty sure a timer would be needed, but not sure how to go about this as this is my first IOS app. Searching google turned up alot of animation stuff, but all was different which led to confusion. :)
Use this code
call [self animate:your_image_view];
- (void)animate:(UIImageView*)your_image
{
if (need_to_animate)
{
CGRect from = CGRectMake(10, 100, 200, 200);
CGRect to = CGRectMake(10, 700, 200, 200);
[UIView animateWithDuration:2 animations:^{
your_image.frame = from;
} completion:^(BOOL finished) {
your_image.frame = to;
[UIView animateWithDuration:2 animations:^{
your_image.frame = from;
} completion:^(BOOL finished) {
[self animate:your_image];
}];
}];
}
}
See here how to use UIView animations iPhone UIView Animation Best Practice Alternatively set up a timer loop and then adjust the frame/center of your view
I'm using animation in my app and get confused, because animation is lagging on device, on simulator everything seems OK. First I tried to use
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:0.3];
[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
And before commit animation there were something like ~30 lines of code with "if" blocks so I thought this might cause the problem, but then I start to use
[UIView animateWithDuration:0.3
delay:0.0
options: UIViewAnimationCurveEaseIn
animations:^{
mainView.frame = CGRectMake(0, 0, 320, 420);
buttonsView.transform = CGAffineTransformMakeTranslation(0, 68);
radioBar.transform = CGAffineTransformMakeTranslation(0, -50);
vk_controller.view.frame = CGRectMake(0, 0, 320, 440);
}
completion:^(BOOL finished){
button.isHiddenDown = YES;
}];
in terms of "if" blocks, but lags seems to stay. When I press button there is delay ~0.5-1 sec (why?) and then animation starts. But when I'm on table view
[UIView animateWithDuration:0.3
delay:0.0
options: UIViewAnimationCurveEaseIn
animations:^{
mainView.frame = CGRectMake(0, 0, 320, 420);
buttonsView.transform = CGAffineTransformMakeTranslation(0, 68);
radioBar.transform = CGAffineTransformMakeTranslation(0, -50);
goha_news_controller.view.frame = CGRectMake(0, 0, 320, 420);
goha_news_controller.feed_table.frame = CGRectMake(0, 0, 320, 420);
if(goha_news_controller.backgroundView)
{
goha_news_controller.backgroundView.frame = CGRectMake(0, 0, 320, 420);
goha_news_controller.newsDetailView.frame = CGRectMake(0, 0, 320, 420);
}
}
completion:^(BOOL finished){
button.isHiddenDown = YES;
}];
in addition to the unexpected delay before the animation, there is harshness animation with bursts.
Can anyone explain why does it happen and how can I fix it?
Another possible cause. Are you using shadows in any of the on-screen views or layers? iOS does not handle animating with shadows very well at all.
You cannot use the simulator to gauge performance. It has completely different (not just better or worse) performance characteristics than a device (and the devices also differ from generation to generation).
If statements are not causing significant delay; they are very cheap.
Your performance problems probably lie elsewhere. I can't see anything in the code you've shown us that looks like an obvious performance problem.
If you resize images in controls while animation, this can cause lags, because image resizing is a very expensive process for CPU. You should make thumbnails of images before you run animation and change images.
Also, try to use Begin animations - commit animations instead of animating using blocks.
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:0.75];
// Here some more animation settings
// Here your animations
[UIView commitAnimations];
I have a zoom animation in which when I perform an action, a view comes up in a zooming fashion.
The code I use to do this is,
CGFloat xpos = self.view.frame.origin.x;
CGFloat ypos = self.view.frame.origin.y;
popContents.view.frame = CGRectMake(xpos+100,ypos+150,5,5);
[UIView beginAnimations:#"Zoom" context:NULL];
[UIView setAnimationDuration:0.8];
popContents.view.frame = CGRectMake(320, ypos-70, 350, 350);
[UIView commitAnimations];
[self.view.superview addSubview:popContents.view];
I just realized that in ios4.0 usage in this fashion is not recommended and animations using block based methods is recommended..
I tried looking for any sort of example which would give me a hint to get the zooming effect I need using the block based methods but I have not been able to find any...
It would be great if anyone could help me out in this...
i figured it out...
Apparently "zoom" is just a name and does not do anything( as far as I experimented with it)
Here is how I achieve the effect using animate with block based methods...
[UIView animateWithDuration:0.8 animations:^ { popContents.view.frame = CGRectMake(160, 70, 350, 350);
[self.view.superview bringSubviewToFront:self.view];
[self.view.superview addSubview:popContents.view]; }
completion: ^(BOOL finished) {
NSLog(#"DONE");
}
];
Now there is just 1 issue I am not able to figure out..
Here is the edited code -
[UIView transitionWithView:self.view duration:1
options:UIViewAnimationOptionTransitionFlipFromLeft
animations:^
{
popContents.view.frame = CGRectMake(160, 70, 350, 350);
[self.view.superview bringSubviewToFront:self.view];
[self.view.superview addSubview:popContents.view];
}
completion: ^(BOOL finished)
{
NSLog(#"DONE");
}];
so what happens here is that the table view rotates while the popContents view zooms to position.. I understand that is what will happen since I had given transitionWithView:self.view
however, how will I be able to add this effect to the popContents view ( the view which zooms to position)... is it possible?
I tried transitionWithView:popContents.view but that does not seem to have any additional effect to the zooming animation.
Could someone tell me what I am doing wrong?