Anybody have any idea how this is done?
http://youtu.be/r_cII4_aq_A
In general, the idea is awesome, but I would like to know how to do each specific thing. In the video, the pages are being swiped too fast so you can't see, but as you transition from one page to the next, each pixel smoothly transitions to it's new color. Also, it's really cool how the icon gets smaller to a minimum size as you transition away from a screen.
Maybe there's some 3rd party library that provides a protocol and it's relatively easy to implement, but I can't find it. If there's not, I'm thinking it's just one view controller with many views side by side and as you drag your finger, it calculates where each view needs to be..and what color every pixel needs to be.
I imagine you already have it by now. But in case you still have any doubts, I made gist that does the animation: https://gist.github.com/mnmaraes/9536364
Anyways, have fun.
It's a fade animation, so:
[UIView animateWithDuration:0.5
delay:0.0
options:UIViewAnimationOptionTransitionCrossDissolve
animations:^{
_backgroundImageView.image = nextImage;
} completion:nil];
should do the trick for the background part.
For the foreground/icon part you can animate the transform to scale and translate the views as they slide in and out.
Related
I was trying to create animation like skype bottom menu in iPhone. I tried many ways to solve it but wasn't able to configure the accurate solution.
I have tried,
(1)CGPathAddLineToPoint
(2)CGPathAddArc
(3)CGPathAddArcToPoint
(4)[UIView animateWithDuration:5000 delay:500 usingSpringWithDamping:0.5 initialSpringVelocity:0.5 options:option animations:^{
square.layer.cornerRadius = 25;
square.layer.masksToBounds = YES;
} completion:^(BOOL flag){
square.layer.cornerRadius = 0;
square.layer.masksToBounds = YES;
}];
and some UIKit Dynamic approaches too. Unfortunately none of them worked for me to get exact solution. Main problem that i was facing was that CornerRadius rounds whole view, where i need something Curved/Arc. Ark approach also didn't provides needed solution.
Animation in Skype works this way.
Working Demo
(1)Firstly user taps on bottom right,
(2)Then menu animates upward with a curved (curved outside) effect,
(3) After collision with top boundary (i guess it is using UIKit Dynamic and on top there is an invisible boundary), Menu shows a bounce back effect and again shows a curved effect but this time curve inside,
Kindly guide if i'm using right approach or what should i do?
Thanks
this is a nicely written tutorial on how to create such animation: http://holko.pl/2014/06/26/recreating-skypes-action-sheet-animation/
At the end of the tutorial, the author also includes the github address that hosts a reusable framework that you can directly use to create such effect.
Hope this helps.
I'm fairly new to modern programming (the last serious experience I had was AMOS on my old Amiga!), but I've done my best to learn objective C with a view to developing an app (for iOS only at the moment). I've got a (hopefully very simple) question which I've done my best to research already without any joy.
I've got the bulk of my relatively basic app laid down already. From my home ViewController, I've got four options, all of which have colour-coded buttons, linked by segue to the content ViewControllers.
As a nice flourish, more than anything else, I'd like to make the whole screen flash briefly in the colour of the button pressed (this app is aimed at non-programmers, and a bit of theming will not only make things look good, but also hopefully aid orientation/ intuititivity.
So far I have tried:
adding a new ViewController with a screen blank except for the themed colour and an automated custom segue controlled by NSTimer. // This is sub-optimal as if the user wants to navigate back to the home page they have to jump through two pages rather than one, and if they're a bit slow then they may get stuck in a loop.
dicking around with NSTimer and self.window.backgroundColor/ setBackgroundColor. // both of these options end up with my app crashing - probably due to coding ineptitude!
Any ideas? For example, if my user clicked the 'Emergency Guidelines' UIButton, then I would have the screen flash red (the chosen theme colour for this section) for a barely perceptibly but subconsciously awesome period before seamlessly transitioning the app to the relevant page.
Sorry if it's a bit of a noobish question. I'm keen to hear any answers, even appropriately directed tough love.
I would suggest a different way. Don't use an extra viewController, instead add a colored UIView that covers the whole screen when the button was pressed. Animate a fade out, and once it's faded out completely remove that view and perform the push to the next viewController.
That's probably the easiest way, takes only this much code:
- (IBAction)demoButtonPressed:(UIButton *)sender {
UIView *flashView = [[UIView alloc] initWithFrame:self.view.bounds];
flashView.backgroundColor = [UIColor redColor];
[self.view addSubview:flashView];
[UIView animateWithDuration:0.3 delay:0.1 options:0 animations:^{
flashView.alpha = 0.0f;
} completion:^(BOOL finished) {
[flashView removeFromSuperview];
[self performSegueWithIdentifier:#"pushDemo1" sender:sender];
}];
}
Play around with duration and delay until you are satisfied.
have you looked into core animation? it would help if you therw up some code but i thing Apple's Core Animation tutorial is pretty straight forward with how you can trigger animation effects especially if a button is pressed like you mentioned for your color flash idea.
https://developer.apple.com/library/Mac/DOCUMENTATION/Cocoa/Conceptual/CoreAnimation_guide/Introduction/Introduction.html
you can also pull this up in X code which i suggest, or youtube some tutorials or github etc.
veritas
I'm trying to design different layouts for my view controller. After googling, I've got this answer from SO. Basically, the answer instructs me to setup 2 scenes, one for landscape and one for portrait, when the device rotates, hide one and show the other one.
And my question is what if I want to add a sweet animation for the rotation process? For example, since I can setup the same view on different scenes, can I set the motion path for these views and disappear? Or, if it is easier, can I add some rotation and fade out animation?
I'm quite green with Core Animation, so a detailed explanation is very useful for me. Big big thanks in advance!
There are a few options here. The main methods you are looking for to do any of this are:
- (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation
duration:(NSTimeInterval)duration;
and
- (void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation;
If you want to move the elements around the screen while the rotation is happening you will be best off changing the frames of the elements rather than creating a separate view file. Using any motion animation would require some mapping between the two and I have never heard of anything like this before. Again, if you just change the frames though, you can preform basically any screen movements you would like (for views and subviews).
To do the fading you could just throw an animation block in the first method:
[UIView animateWithDuration:duration
animations:^{
// set alphas for old and new views here.
}];
Is there any way to lock scrollview programatically at specific place with having native
apple bounce back effect?
I have infinite scrollview and would like to lock at some specific place. I found out that
I can use scrollViewWillEndDragging:withVelocity:targetContentOffset to figure out that the locking point
is going to be crossed and intervene like this:
[self setContentOffset:CGPointMake(LockPositionX, LockPositionY) animated:YES];
However this doesn't have native bounce back and rubber banding effect. I try to workaround it with
modifying scrollview.decelerationRate but it looks like it cannot have values other than
UIScrollViewDecelerationRateNormal or UIScrollViewDecelerationRateFast.
Maybe I'm missing something and there is some hidden way to achieve that?
add below code in scrollViewWillEndDragging:withVelocity:targetContentOffset
if(lockingpointreached)
{
[UIView animateWithDuration:0.3f delay:0.0f options:UIViewAnimationOptionCurveEaseIn animations:^ {
[self setContentOffset:CGPointMake(LockPositionX-20, LockPositionY-20)];
} completion:NULL];
}
Hope this will help you.
I found out that the easiest way is to actually use native bounce back implementation.
Event though our scrollView contentSize have e.g. vertical bounds from 0 to 1000 if we put some all the previous with negative origin (out of screen) its going to be visible (rendered) when we bounce back.
If then for some reason we want to move the locking point the previous elements we just have to shift all the elements down so that only elements above the locking points have negative origin
I am trying to flip a UIView around one edge of the view, as if the view were a page of a calendar with a rigid page moving over like so : Calendar.
I am trying to do it like so :
[UIView transitionWithView:self.upperCard
duration:0.5
options:UIViewAnimationOptionTransitionFlipFromBottom
animations:^{
topView.frame = [self bottomHalfRectFromBounds];
bottomView.frame = [self topHalfRectFromBounds];
topView.flippedOver = YES;
bottomView.flippedOver = NO;
}
completion:NULL];
[self setNeedsDisplay];
The only problem with this method is that because the animation of the view's frame is Linear and so is the flipping animation the animation's are out of time with each other (This is due to the fact that flipping at a constant velocity the area which is visible of the view is proportional to Cos(t), learn some maths if you didn't know that ;P).
So basically I'm either looking for a way to make the frame animation have an easing function... or a completely alternative method... I don't want this to look like a page curl as it is going to be used for a scoreboard app, so please don't just tell me to use the UIViewAnimationOptionCurlDown option :P
Thanks for your time!
In general, animating your view’s frame is not a good way to approach this: it causes the view to have to redraw itself at every step of the animation, and, as you’ve noticed, doesn’t look like a flip so much as a linear scale.
Check out this answer—specifically the second part of it, discussing how to do it in CA—for a better approach.