Geek Answers Handbook

UITableViewCell Panning to show options: Animated

So, I have a very good panning implementation in a tableview cell. I mainly use panGestureRecognizer and move the cell off-screen and show a different view below the ViewCell table. This is working fine. When I click on tableViewCell, I basically expand the 5 buttons at the bottom.

My goal is to animate 5 buttons while moving the table. For instance,

| 1 | 2 | 3 | 4 | 5 |

If I scroll and move the cell to the right, and I cross with button 1, I will close the button that appears and becomes visible to the user. If I cross 2, then 2 will animate, exiting and becoming visible to the user. And when I am in button 5, all buttons are already inserted and ready for user actions.

I do it with

//Scale Animation CABasicAnimation *scaleAnim = [CABasicAnimation animationWithKeyPath:@"transform"]; scaleAnim.duration = 0.3; scaleAnim.toValue = [NSValue valueWithCATransform3D:CATransform3DIdentity]; scaleAnim.fromValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.1,0.1, 1.0)]; scaleAnim.removedOnCompletion = YES; [view.layer addAnimation:scaleAnim forKey:nil];

**

My goal:

**

So, when I am in the middle of the pan gestures, and I decided to close it (move to the left), the buttons should appear and become inaccessible to the user.

In addition, when I move the cell, the button should gradually increase and become available to the user. Therefore, I essentially need to convey the origin of the cell and use the math to calculate the scale for the buttons based on the start and width of the button (pretty straightforward).

 if (CGRectIntersectsRect(button.frame, self.movingCell.frame)) { CGFloat xScale = cellTranslation - xOriginForButton; [self popOutAnimate:button withScale:xScale/ (xWidthForButtons + xSpaceBetweenButtons)]; }

But the problem arises when I move the cell very quickly, the views do not get all the changes in the movement of the cells, and they get stuck in a semi-animated state.

I have a feeling that I do not understand the law of logic. The entire implementation is similar to the Sparrow iphone mail application. When you click on a cell, the buttons are displayed with animation when you move the cell. For those who did not use a sparrow. You can see the panning progress at 1:25 https://www.youtube.com/watch?v=XLX6XV0SbWI&t=1m25s

Is logic correct? Did I miss something?

Any help is greatly appreciated.

+4
source share
2 answers

After working with this in several different ways, I got a solution for this, and I type it below.

Algorithm:

The principle for scrolling or panning a ViewCell table is straightforward. The push button algorithm below the cell is based on the current location of the cell compared to the position of the buttons. There are several ways to do this, and one that is used in the following example: _NOT_THE_MOST_OPTIMAL_ complications that occur when changing the order of buttons. (i.e. if the buttons are reordered, the algorithm does not work).

Let's look at the best solution to this problem.

  • Do a hit_test using ( CGRectIntersects(rect1, rect2) to find out where the cell matches any of the buttons. ==> This would be the most ideal solution, since replacing or replacing the buttons would still work fine. But we cannot use this approach, because hit_test will fail when the cell is moved quickly, this will leave the buttons in a very irregular state.

  • Use the button frame directly on the basis of the translation and enlarge them. ===> We cannot use the button frame for anyone because, by scaling them, (x, y, size, width) vary greatly

  • Download the button frames before the animation and use them to scale them. ===> Caching them may work for certain situations, but we will need to update them very regularly, as well as monitor their cache after ORIENTATION_CHANGE. This will again be a pain in the form of buttons after a change of orientation is also very strong (see pt 2).

IN:

So, if we are going to animate all the buttons under the cell, then you will only have one region ofOfAnimation. If you have a set of parts with static buttons and a set of buttons that should be animated, then we have 2 areas - one area with staticButtons, and the other areaOfAnimation.

These values ​​for the region were calculated based on the position of the animated region (as set in IB). We split the regionOfAnimation EVENLY again, based on the number of buttons present, and as the cell moves through each split, we animate the buttons below it.

 | Region of Static Buttons | Region of Animation | --------------------------------------------------------- | Static Button | Static Button | 1 | 2 | 3 | 4 | 5| --------------------------------------------------------- | | ===> CELL MOVES ====> | ---------------------------------------------------------

Advantages of this method:

  • Performance is better than hit_test (much needed gap)
  • Buttons will always animate correctly, since we don’t turn to their frames for calculations

Disadvantages:

  • The static button area and animation area must be calculated in advance for both orientations.
  • If the buttons are interchangeable, the algorithm needs to be updated to reflect new changes.
+2
source

you can find all your answers here https://github.com/spilliams/sparrowlike :) it is quite commented and will be more modular .. try editing this one.

-1
source

More articles:


All Articles