I'm trying to implement transition used in settings menu in Facebook's Paper app: http://blog.brianlovin.com/design-details-paper-by-facebook/#1. I'm using my custom UIViewControllerAnimatedTransitioning object, but I can't achieve the same effect, no matter what type of animation I'm using. So I have some questions:
1) Which animation is used? It looks like cells start to move really fast, and then halt to their final position. Looks like I need POPDecayAnimation, but the result isn't even close.
2) Is delay between animations achieved with setting animation's beginTime depending on cell's index? Or first cells have bigger velocity than last cells?
As Injectios suggested AMWaveTransition is kinda close to Paper's animation. I ended up using it with some adjustments.
I also asked this question on pop github page, you can view it here. Their answer might be useful if you want to implement this animation yourself:
Hey! I implemented that in Paper. The animations on each cell are POPSpringAnimations, and they're connected together by (every frame) updating the toValue of each animation to point to the current value of the one before. Hope that helps!
In cellForRowAtIndexPath, use UIViewAnimation block.
Set cell properties as per your requirement:
indentationLevel
indentationWidth
shouldIndentWhileEditing
Then in animation block, change frame position.
For example for first cell, indetationLevel = 1, and indentationWidth = cell.frame.size.width, then update it to indetationLevel = 0 and indentationWidth = 0 in that animation block. And for the further cells you can multiply this values by (cellIndexPath+1)
For more details visit : https://developer.apple.com/library/ios/Documentation/UIKit/Reference/UITableViewCell_Class/index.htm
P.S.: Update the logic as per your requirement
Related
I have made a CAAnimation (CAAnimationGroup to be precise) that scale and fade (opacity) from 0 -> 1 and then back 0 -> 1. The animation also repeats forever
since I have set animationGroup.repeatCount = .greatestFiniteMagnitude. This animation is applied to a UILabel and makes the label appear and disappear with a nice animation over and over.
I now want to change the text between each repetition of the animation (after it disappears but before it appears again). What is the correct way of doing this?
I managed to get this working by removing the animationGroup.repeatCount = .greatestFiniteMagnitude line and manually restarting the animation in the animation delegate method animationDidStop(_:finished:). I also change the text of the label in the delegate method before restarting the animation. I'm not sure if this is the best solution though.
I need some kind of start point or concept advise on how to get this kind of animation, like in stock iOS calendar app.
I need infinite scrolling view, animating day numbers and date. If there is some Calendar app clone where this part presents, I would appreciate link. I have searched a lot in Github, but couldn't find particularly this part. Is it only page control on scrollable area and just labels on top? How I get the circle part to invert font? Or is it 2 sets of pictures from 1 to 31?
Not enough rep to comment, but I think I might be able to shed at least a little bit of light. I just had a similar problem with the scroll view part. To get it to switch the date at the top, implement scrollViewDidScroll inside your scrollView class. Like this:
func scrollViewDidScroll(scrollView: UIScrollView){
let xOffset = scrollView.contentOffset.x;
if xOffset >= currentViewsFarRightSide
{
//move date to the next date
}
}
So you are checking the xOffset of the scroll view and once it has reached the next multiple of the screen width, it jumps to the next date above. Now for the inverting and stuff, there might be a better way, but having two images would also work like you suggested. You can even create a transition and inside the if statement you could do a
UIView.animateWithDuration
With your image transition and it could look pretty nice. Hope I helped in some way. Good luck!
I've followed this answer to create an animated circle, and it works just fine. In addition to the path, I draw a text in the center of the view with drawInRect. I would like that text to change during the animation, to reflect the percentage of the path that is visible at each moment. How can I achieve that?
Thanks.
The most promising post would likely be this one. It describes creating a new CALayer that keeps track of the progress, which can then fire a call back.
Otherwise you'll likely need to wangle something together by observing your view's presentationLayer.
So I'm making a simple trivia game and I have a timerView that shrinks as time passes. When the user selects an answer, it needs to stop shrinking immediately - it must be very responsive. I give the user 10 seconds per question. Originally I would animate 10 times (with a duration of 1.0f), calling the next "segment" of animation in the completion block of the previous animation. In the completion block I would check to see if the user has tapped an answer, and if so I don't continue the chain. That solution works fine except that it's not very responsive because it's on a per second basis-- user taps an answer at the start of the second segment and the bar has a noticeable continuation.
My solution to THAT problem was to instead have 1000 animation calls with a duration of 0.01f. After doing that, the responsiveness was on point - the view stops animating as soon as I tap an answer -- the issue though, is that it's not actually 10 seconds, it takes more like 20.
So question number 1: what's the smallest time interval animateWithDuration can actually process properly?
Question number 2: is there a better way to accomplish what I'm trying to do accomplish?
ill answer question two: yes there definitely is a better way, have a look at CADisplayLink
use it to shrink your view a little bit each frame, and end the display link when you need to
the most responsive way is: the user taps an answer, you response in the touch callback, remove animations. you can remove animations by CALayer's removeAllAnimations method
Another way to do it is to set the view to shrinking using a single animation with linear timing, and then set the speed of the view's layer to 0 to pause the animation. When you set the speed on the layer to 0 the animation pauses instantly.
This works because under the covers, UIView animation actually creates and installs CAAnimation objects on the view's layers. It's possible to pause and continue an in-flight UIView animation just like you can a CAAnimation.
I have a project called KeyframeViewAnimations (link) on github that allows you to pause, continue, or "scrub" UIView and CAAnimations back and forth with a slider. You could use that technique. The tricky bit will be figuring out how far along the animation is.
I'm using CPPickerView in my app to accomplish a horizontal UIPickerView, and it works great, but with large data sources (dozens of items) it scrolls very slowly which makes navigation before (especially considering a normal UIPickerView can go very fast through them).
I don't mean performance-wise, by the way, I mean the view decelerates very quickly, making traversal difficult.
It's just a subclass of UIScrollView with pagingEnabled set to YES. What can I do?
I looked in the source, and it seems CPPickerView is using a scroll view. Scroll views have a decelerationRate property. Play with that and see which value makes for the best result.
Don't fill CPPickerView with all data.
For example fill with first 20 items and if it reaches to the end add another 20.
Creator of CPPickerView here - I've recently updated CPPickerView to add an allowSlowDeceleration property, which should do what you're looking for. Check out the latest code on Github, or Cocoapods version 1.2.0.
For the purposes of documentation, here's how the solution works. Like you mentioned CPPickerView just a scrollview with pagingEnabled set to YES, so the solution I found was to disable paging when the user scrolls with enough velocity.
UIScrollViewDelegate has an optional method scrollViewWillEndDragging:withVelocity:targetContentOffset:, which is called when the user's finger is lifted after swiping/scrolling on the scrollview, and it's still called even when paging is enabled. Based on that value you can tell if the user was trying to scroll quickly through items, or just move one or two items.
I played around with the CPPickerViews in the Demo project, and found that a velocity of about 2.9f seems to be about the normal "fast swipe" threshold. So if the velocity is greater than this threshold (which I defined as kCPPickerDecelerationThreshold in CPPickerView.m) and allowSlowDeceleration is set to YES, CPPickerView now sets pagingEnabled to NO before the deceleration starts. This allows the picker to "coast" and decelerate like a normal scrollview.
It then catches the end of the deceleration, OR the user touching to stop the scroll, by the call to the scrollViewDidEndDecelerating: delegate method. The current item is determined (based on the offset of the scrollview), and then if the scrollview's pagingEnabled property is set to NO a call to the private method scrollToIndex:animated: is made with animation set to YES. This scrolls the CPPickerView to the current item, which necessary as it's unlikely the coasting scroll ended right on a page boundary.
Finally, when the animated scroll completes, the scrollViewDidEndScrollingAnimation: delegate method is called, at which point pagingEnabled is set back to YES.
If you find that you're having trouble getting it to recognize a "fast" swipe, try playing with the kCPPickerDecelerationThreshold value. In hindsight that maybe should be a customizable property, so perhaps I'll roll that into the next update.
As mentioned above you can use the decelerationRate property, setting it to UIScrollViewDecelerationRateNormal might help.
scrollView.decelerationRate = UIScrollViewDecelerationRateNormal;
If that still doesn't solve your problem you could also buffer your inputs into the scroll. See this:
Advanced scrollview techniques