How to make this animation? viz. Connect the shared element

Question

There is this great ui guide which shows some cool ui transitions.

I would like to know how to do this animation (the great one).

I know how to do the good one. I also have some success with the great one (by taking snapshot of the next viewcontroller to be presented and expanding it inside animateTransition(using transitionContext: UIViewControllerContextTransitioning)).

However I do not know how the great one pushes it's adjecent views on both sides.

I would like get an idea on how to do exactly that(push out). I do not need code. Just a general guide is fine.

EDIT: I ended up implementing Kubba's idea.

trungduc's idea of animating tableview cell height has some drawbacks. The cell position is not proper before and after transition. Also, syncing the animation of viewcontroller frame with tableview cell height proved to be futile. Nevertheless it was a good solution although perhaps for a slightly different problem.

Project

why not you shall checkout this : https://github.com/Touchwonders/Transition — Rathish, Mar 20 '18 at 09:21
Thanks for the link. But it doesn't have what I am looking for. — Rishab, Mar 20 '18 at 09:49

score 3 · Accepted Answer · edited Oct 16 '21 at 10:22

3

I'd try something like this:

take a snapshot of current controller
extract two pieces from it: (1) from top of the card to top of the screen and (2) from the bottom of the card to bottom of the screen
place them in places where they should be
move (1) tho the top and (2) to the bottom along with your current transition

Another idea, which could be easier to achieve: you can just divide the snapshot on two pieces in the middle of expanding card but I'm not sure how animation would behave

edited Oct 16 '21 at 10:22

marc_s

732,580
175
1,330
1,459

answered Mar 21 '18 at 09:57

Kubba

3,390
19
34

I'll try that. Thanks. – Rishab Mar 21 '18 at 10:00
So I ended up implementing your idea. I'll be providing you with points after 24 hrs. – Rishab Mar 27 '18 at 09:58
@Rishab can you share a gif how it looks like? – Kubba Apr 03 '18 at 22:24
It's on the github page. Click on Project (last line of edit). – Rishab Apr 04 '18 at 01:56

score 2 · Answer 2 · answered Mar 22 '18 at 11:43

2

My solution is quite simple without snapshots.

When tapping on cell, save tableView.contentOffset.
Increase height of selected cell to screen height.
Update cell height, move cell to top of screen with an animation and pushing transition.
When you want to come back, decrease height of selected cell, change contentOffset by cached value with animation and transition.

Result.

enter link description here

I use the below code to make animation for tableView, put it inside didSelectRowAtIndexPath method.

[UIView beginAnimations:@"animation" context:nil];
[UIView setAnimationDuration:4.f];
[CATransaction begin];
[tableView beginUpdates];
[tableView endUpdates];
[tableView scrollToRowAtIndexPath:indexPath atScrollPosition:UITableViewScrollPositionTop animated:NO];
[CATransaction commit];
[UIView commitAnimations];

Sorry I'm not good at Swift ;)

answered Mar 22 '18 at 11:43

trungduc

11,926
4
31
55

No need to be sorry. That's quite a trick you have implemented. Really good except in my project I need to go to a view controller. But this did give me a new angle. – Rishab Mar 22 '18 at 12:54
Seem like you didn't understand my answer totally. My answer is used to push a new view controller. That's why I always say **animation and transition**. I mean pushing new view controller transition and **come back** means dismiss view controller. – trungduc Mar 22 '18 at 13:57
As I understand, your question is about pushing adjecent views on both sides and you know how to implement `animateTransition` method to push new view controller. That's why my demo just display how animation works on tableView. If you need my help to finish it, tell me. But I think with my guide, you can implement it yourself ;) – trungduc Mar 22 '18 at 13:59
I am working with your given solution. That's why I said I got a new angle. Thanks for the clarification though. – Rishab Mar 22 '18 at 14:10
Good luck. Hope I can see the result after you finish it. – trungduc Mar 22 '18 at 14:18
One more, taking snapshot of the next view controller to be presented somehow will affect performance. In my opinion, you just need to give next view controller a suitable layout for transition. – trungduc Mar 22 '18 at 14:18
I have provided a link to my project. – Rishab Mar 27 '18 at 09:59

score 1 · Answer 3 · answered Mar 23 '18 at 10:37

1

You can use Hero UIViewController based transitions animation library which support many type of animation.

Integration is very simple, to achieve beautiful animation.

You can use below sample screenshot, Which is create using Hero.

answered Mar 23 '18 at 10:37

Jaydeep Vora

6,085
1
22
40

How to make this animation? viz. Connect the shared element

3 Answers3