Question

I am using the Leaves project to move from one pdf page to another it is working fine. Now the page curl is from left to right and from right to left like a note book. I need to curl it from top to bottom and bottom to top. Does anyone know the methods to do it, or any other templates to do this?

Answer 1

The existing leaves view is hard-coded to be left-to-right. You can create a hard-coded top-to-bottom version easily enough, but there may well be more robust generic solutions.

However, if you definitely must use leaves, you can rewrite its source to suit. The solution below hard-codes for vertical motion. If you need horizontal and vertical options, you will have more work do do.

---

Display

setUpLayers

Reverse the axes in every call to CGPointMake. This fixes up the gradients that display the shadows.

Also change topPage.contentsGravity = kCAGravityLeft; to topPage.contentsGravity = kCAGravityBottom; and topPageReverseImage.contentsGravity = kCAGravityRight; to topPageReverseImage.contentsGravity = kCAGravityTop;. This is a subtle change that makes sure incoming pages are displayed with the correct edges.

setLayerFrames

Most of the geometry changes happen here. The original code oddly uses view bounds in some places and layer bounds in others. I duplicated those, but it would be good to understand if the distinction is meaningful before using this code in production.

- (void) setLayerFrames {
    topPage.frame = CGRectMake(self.layer.bounds.origin.x, 
                               self.layer.bounds.origin.y, 
                               self.bounds.size.width,
                               leafEdge * self.layer.bounds.size.height);
    topPageReverse.frame = CGRectMake(self.layer.bounds.origin.x,
                                      self.layer.bounds.origin.y + (2*leafEdge-1) * self.layer.bounds.size.height,
                                      self.bounds.size.width,
                                      (1-leafEdge) * self.layer.bounds.size.height);
    bottomPage.frame = self.layer.bounds;
    topPageShadow.frame = CGRectMake(0,
                                     topPageReverse.frame.origin.y - 40,
                                     bottomPage.bounds.size.width,
                                     40);
    topPageReverseImage.frame = topPageReverse.bounds;
    topPageReverseImage.transform = CATransform3DMakeScale(1, -1, 1);
    topPageReverseOverlay.frame = topPageReverse.bounds;
    topPageReverseShading.frame = CGRectMake(0,
                                             topPageReverse.bounds.size.height - 50,
                                             topPageReverse.bounds.size.width,
                                             50 + 1);
    bottomPageShadow.frame = CGRectMake(0,
                                        leafEdge * self.bounds.size.height,
                                        bottomPage.bounds.size.width,
                                        40);
    topPageOverlay.frame = topPage.bounds;
}

---

Interaction

updateTargetRects

Where this calculates nextPageRect and prevPageRect, put them on the bottom and top instead of the right and left.

touchesMoved:withEvent:

Change self.leafEdge = touchPoint.x / self.bounds.size.width; to self.leafEdge = touchPoint.y / self.bounds.size.height;.