I'm trying to recreate the passbook UI using a collection view with a custom layout.
So far so good, but there's this thing I can't seem to find a solution for.
Problem: When I click on a cell I want it to move up to the top of the screen (content offset of the cv). Most of the cells don't have a problem with this and they perform as such. However, when the selected cell is near the bottom of the screen, there's no moving at all... just a fade-out and fade-in.
To achieve this animation, I embedded the layout subclass' invalidateLayout in an animation block to be performed by UIView. No matter how high or low I set the time interval, the duration is still the same, and so no effect on the fade-in fade-out behaviour.
I'll paste here the methods that I believe to need to be modified and also a link to a video on youtube. Hopefully, someone can find a solution for this >_<".
YT: https://www.youtube.com/watch?v=3xIL-fFUcJo
Code: http://pastebin.com/QKLKGwdN
Related
I have an iPad app similar to the iPad Keynote with a narrow overview on the left and a paged UICollectionView of my "slides" on the right. The collection view is using the default FlowLayout. Some of these slides are standard PDFs and some are embedded UIViewControllers that have been scaled (with a CGAffineTransform) and embedded in the cell. I'd like to smoothly animate the overview sidebar offscreen and zoom the current page cell to fullscreen. The collection view should allow paged swiping at whatever size. I'm using storyboards and autolayout.
I think I need to simultaneously animate about three things:
The collection view constraints (to the sidebar) to enlarge/shrink it
The flow layout's sizeForItemAt: value
The CGAffineTransform on the embedded view controller.
I have some pieces working (a single embedded View Controller "slide" that scales correctly) but cannot get the collectionView/cell resize dance to work correctly. The cell resize animation is jerky, or ends up with the wrong offset, or works for the leftmost cell but not for other cells.
I've tried most of the suggestions in the answers to this question but with no convincing success. I can't believe it's impossible but at this point I'm considering the smoke and mirrors approach of animating a static slide and hiding it after the animation completes. The attached video - ignoring the glitches - illustrates the kind of effect I'm after:
It's worth noting, on close inspection, that Keynote cheats somewhat when it comes to swiping between slides in edit mode, and manually manages the next slide sliding onscreen, so probably doesn't use a UICollectionView.
Has anyone done anything similar, or have any suggestions for things to try?
I managed to solve this. There's a proof-of-concept GitHub repo here.
There are a few moving parts:
There are two pieces of UIView scaling code. I suspect these could be combined with suitable delegate references as the nested view controllers are embedded. The first piece scales (statically) correctly when the Collection View cell is created. The second is an animated scale/translate when the sidebar size is changed.
I added a FlowLayout subclass to remove flicker as the collection's layout is invalidated during scaling.
The sidebar-related transform in the top-level VC uses most of the tricks in the book - invalidateLayout(), performBatchUpdates(...), layoutIfNeeded() etc. as well as animating the contentOffset to the correct value. Some manual tracking of the correct page/slide is required.
There's still a slight flicker occasionally at the start of resizing. This may not be an issue with my particular colour-scheme which will be black on dark gray. Bonus points if anyone can suggest how to track this down or alleviate it.
I'm trying to add dynamic, animated movement to the cells in my UICollectionView / custom layout.
Basically... when a user taps cell A, it moves to the center, pushing all the other nearby cells (radially) out of its way, and then those cells crowd around it, filling up the space.
Now, when the user taps it again, I want the animation to invert.
And if the user scrolls, I want the animation to fluidly, continuously, and incrementally proceed or rewind, until some threshold point where it goes all the way in that direction.
Brainstorm
Recalculating the relevant cells' frames upon every signal from the UIScrollView, then continuously animating the change from the old layout to the new one with setCollectionViewLayout: animated: crossed my mind... but not only does it feel a horribly stupid way to do it... it won't work when new signals come mid-animation.
Can I not just grab the frames of the visible cells and animate their frame changes, like with any regular view? Using transitionWithView:duration:options:animations:completion: and UIViewAnimationOptionBeginFromCurrentState to keep the motion continuous and updatable?
Any other ideas?
EDIT-- Current Tentative Solution
At the moment, I'm going to try...
1) Reach into the collection view's visible cells, to just grab the relevant cells and animate the frame changes when necessary.
2) I'm going to use this CALayer trick Core animation progress callback, so that I can get continuous position update signals for the driving cell, to drive the animations of the cells it needs to push away when they come into contact.
3) I'll use shouldInvalidateLayoutForBoundsChange: with transitionWithView:duration:options:animations:completion: and UIViewAnimationOptionBeginFromCurrentState to implement the fluid, on demand, play / rewind function
(quick visual example)
I'm playing around with UICollectionView interactive transitions.
The very basic implementation is here.
Now I'm a bit stuck with Cells transitioning.
The idea is to change content of cells simultaneously with interactive layout transition.
Here is how it looks now.
The first layout
And the second layout
When transitioning is finished, I want to change content of cells on second layout.
1) Text label "Some label" should disappear from every cells
2) Text label "Another label" should appear on the right corner of each cell.
Key issue is I want this changes fade in/out according to UICollectionViewTransitionLayout.transitionProgress value during transitioning.
Something very similar implemented in Facebook Paper App.
Take look how content of cells is changing below (click on it).
Is anybody know an elegant way to replicate this effect?
This library will help you achieve what you are trying. If you are interested in custom animations I would suggest you use FB pop library
Well.
The solution is to subclass UICollectionViewCell.
Subclass should contain two UIView. One for big layout & one for small.
Initially UICollectionViewCell shows only small one.
Once we starting to update UICollectionViewTransitionLayout.transitionProgress for example from small to big we should do following steps:
Make an UIImage from big UIView
Put this image above small UIView
Set alpha of the image to 0
Continuously change alpha of UIImage to UICollectionViewTransitionLayout.transitionProgress value
Once transition is done just switch this to UIView
When you transitioning back you should switch big with small.
Done :-)
I am working on a UICollectionView that reload the cells animatedly.
I have wrote an animation code in my layout class in
- (UICollectionViewLayoutAttributes*)initialLayoutAttributesForAppearingItemAtIndexPath:(NSIndexPath *)itemIndexPath
And its works perfectly i just want to know is that somehow can i introduce an delay in cells animations so it will be like first cell reaches its place than second and then third cell and so far.
So is there any specific way to achieve this?
Unfortunately, the framework is not designed to work in that way. I would not animate the frames directly – that is a dark path that leads to pain. You'd basically need to add one model to the data source backing the collection view, wait, and repeat. It shouldn't be too hard, but it is a bit hacky.
If the appearance animation you'd like to achieve is a frame animation you can adjust the initial start position instead of adding a delay.
Let's say you want your cells to fly in from the right. For the first cell you can set the initial offset to 500px, for the second 600px for the third 700px and so on. Even though they all start animating at the same time, they'll reach their positions in succession.
Hope this helps.
Scenario:
Horizontally scrolling UIScrollView with reused page views (so that there are only few page viewcontrollers which are being reused similar way like UITableView cells). So that they are able to be updated with new content and reused I need to know exact position of UIScrollView's content view (offset). This works great.
Now I need to implement custom scrolling animation - I mean to programatically move the content view, so that user touches some buttons, and the scroll view scrolls to desired position with this custom animation. The movement can be very quick and very far. I can not use Core Animation for this, as I could not track position during animation (CA reports you only start and end of the movement). So I decided to use CADisplayLink, and calculate each UIScrollView content for each position. This works great too.
The only problem is, that sometimes I see stroboscopic effect - say I am moving the content to the right, and it looks like it is moving to left. If I look at builtin animation within UISCrollView using setContentOffset:animated:, the animation is smooth and nice. Does anyone know, how to get rid of this stroboscopic effect?
Most likely your issue is that timestamp is a double and you're assigning it to a float
Floats have 7 digits while Doubles have 15-16 digits.
So in other words you're experiencing data loss. By using double you should see a silky smooth animation.