Question

I’m curious how to implement the following app animation:

after I click Alcides, the app will gradually show a new view on the right and the left table width will be 1/2 of the original.

if I want to implement it, how can I do?what data structure and animation should I use?

Answer 1

The answer with most custom animations is to think about what you want to do and do it. Trite but true.

1. Cut the width of the tableview in half at animation speed X

2. Move the RH detail table in from right at animation speed X

You will need to have your ViewController for the scene as a container for the pair of tables. But the tableviews may have their own view controllers which the container manger should keep a strong reference to.

ManagerViewController -> UIView -> PeopleTableView -> PeopleTableViewController
                                -> DetailTableView -> DetailTableViewController

So in code…

detailTableView.frame = Frame_with_x_aligned_to_RH_edge_of_screen;

[UIView animateWithDuration:X 
    animations:^{
       peopleTableView.frame = Frame_with_half_its_fully_expanded_width;
       detailTableView.frame = Frame_with_x_aligned_to_edge_of_peopleTable;
} 
    completion:^{ //stuff to do at the end of the animation  
}];