iphone - 在 Epub 中添加类似动画的书籍

Question

我是iPad开发人员的新手，

我正在阅读EPUB内容UIWebView

我UIWebView在 iPhone 上使用来显示EPUB内容，但我想实现类似于 book 的翻页动画。

这是演示示例。和

这是我的代码片段，

http://www.mediafire.com/?pxb6xxfknxoarz6

提前致谢！

score 2 · Accepted Answer

目标iOS5。
使用 UIPageViewController。这是一个例子

萨顿女士有开源代码，可以在这里构建您的页面

这是另一个人的教程

一旦翻页动画正常工作，内容可以是任何内容，包括 HTML 页面/链接。

我用 Erica 的样本制作了一本书。大多数页面都是 png，但我使用 html 页面作为目录。该页面有指向书中特定页面的链接。内联 CSS 用于设置页面样式。

请注意，UIPageViewController 仅适用于 iPad。

以下代码是我实现它的方式。请注意，我的版本一次显示一页，而不是两页。

这是我的页面视图控制器代码：

/*
 About this class:

 - it assumes western left-to-right usage for the page flips
 - it assumes one page in both landscape and portrait
 - it stores but does not use the current page 
 */



#import "InfoPageController.h"

#define IS_IPHONE   ([[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPhone)
#define SAFE_ADD(_Array_, _Object_) {if (_Object_ && [_Array_ isKindOfClass:[NSMutableArray class]]) [pageControllers addObject:_Object_];}
#define SAFE_PERFORM_WITH_ARG(THE_OBJECT, THE_SELECTOR, THE_ARG) (([THE_OBJECT respondsToSelector:THE_SELECTOR]) ? [THE_OBJECT performSelector:THE_SELECTOR withObject:THE_ARG] : nil)



#pragma Utility Class - VC that Rotates
@interface RotatableInfoVC : UIViewController 
@end

@implementation RotatableInfoVC
- (void) loadView 
{
    [super loadView]; 

    self.view.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
    self.view.backgroundColor = [UIColor whiteColor];

}

- (BOOL) shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation 
{
    return YES;
}
@end


#pragma Page Controller

@implementation InfoPageController

@synthesize infoPageDelegate, pageNumber;

/*
 #pragma mark Debug / Utility
 - (int) currentPage
 {
 NSLog(@"%s", __FUNCTION__);
 int pageCheck = ((UIViewController *)[self.viewControllers objectAtIndex:0]).view.tag;
 NSLog(@"pageCheck is %i", pageCheck);
 return pageCheck;
 }
 */

#pragma mark Page Handling

// Update if you'd rather use some other decision style
- (BOOL) useSideBySide: (UIInterfaceOrientation) orientation
{
    return NO; 
}



// Store the new page and update the delegate
- (void) updatePageTo: (uint) newPageNumber
{
    //NSLog(@"%s", __FUNCTION__);
    pageNumber = newPageNumber;

    [[NSUserDefaults standardUserDefaults] setInteger:pageNumber forKey:DEFAULTS_INFOPAGE];
    [[NSUserDefaults standardUserDefaults] synchronize];

    SAFE_PERFORM_WITH_ARG(infoPageDelegate, @selector(infoPageControllerDidTurnToPage:), [NSNumber numberWithInt:pageNumber]);
}


// Request controller from delegate
- (UIViewController *) controllerAtPage: (int) aPageNumber
{
    //NSLog(@"%s", __FUNCTION__);
    if (infoPageDelegate && 
        [infoPageDelegate respondsToSelector:@selector(viewControllerForPage:)])
    {
        UIViewController *controller = [infoPageDelegate viewControllerForPage:aPageNumber];
        controller.view.tag = aPageNumber;
        return controller;
    }
    return nil;
}

// Update interface to the given page
- (void) fetchControllersForPage: (uint) requestedPage orientation: (UIInterfaceOrientation) orientation
{
    //NSLog(@"%s", __FUNCTION__);

    int numberOfPagesNeeded = 1; 
    int currentCount = self.viewControllers.count;

    uint leftPage = requestedPage;


    // Only check against current page when count is appropriate
    if (currentCount && (currentCount == numberOfPagesNeeded))
    {
        if (pageNumber == requestedPage) return;
        if (pageNumber == leftPage) return;
    }

    // Decide the prevailing direction by checking the new page against the old
    UIPageViewControllerNavigationDirection direction = (requestedPage > pageNumber) ? UIPageViewControllerNavigationDirectionForward : UIPageViewControllerNavigationDirectionReverse;
    [self updatePageTo:requestedPage];

    // Update the controllers
    NSMutableArray *pageControllers = [NSMutableArray array];
    SAFE_ADD(pageControllers, [self controllerAtPage:leftPage]);    
    //SAFE_ADD(pageControllers, [self controllerAtPage:leftPage + 1]);

    [self setViewControllers:pageControllers direction: direction animated:YES completion:nil];
}

// Entry point for external move request
- (void) moveToPage: (uint) requestedPage
{
    //NSLog(@"%s", __FUNCTION__);
    [self fetchControllersForPage:requestedPage orientation:(UIInterfaceOrientation)[UIDevice currentDevice].orientation];
}

#pragma mark Data Source

- (UIViewController *)pageViewController:(UIPageViewController *)pageViewController viewControllerAfterViewController:(UIViewController *)viewController
{
    //NSLog(@"%s", __FUNCTION__);
    [self updatePageTo:pageNumber + 1];
    return [self controllerAtPage:(viewController.view.tag + 1)];
}

- (UIViewController *)pageViewController:(UIPageViewController *)pageViewController viewControllerBeforeViewController:(UIViewController *)viewController
{
    //NSLog(@"%s", __FUNCTION__);
    [self updatePageTo:pageNumber - 1];
    return [self controllerAtPage:(viewController.view.tag - 1)];
}

#pragma mark Delegate

- (UIPageViewControllerSpineLocation)pageViewController:(UIPageViewController *)pageViewController spineLocationForInterfaceOrientation:(UIInterfaceOrientation)orientation
{
    //NSLog(@"%s", __FUNCTION__);
    return UIPageViewControllerSpineLocationMin;
}


#pragma mark Class utility routines
// Return a UIViewController that knows how to rotate
+ (id) rotatableInfoViewController
{
    //NSLog(@"%s", __FUNCTION__);
    UIViewController *vc = [[RotatableInfoVC alloc] init];
    return vc;

}

// Return a new book
+ (id) infoPageWithDelegate: (id) theDelegate
{
    //NSLog(@"%s", __FUNCTION__);
    InfoPageController *infoPage = [[InfoPageController alloc] initWithTransitionStyle:UIPageViewControllerTransitionStylePageCurl navigationOrientation:UIPageViewControllerNavigationOrientationHorizontal options:nil];

    infoPage.dataSource = infoPage;
    infoPage.delegate = infoPage;
    infoPage.infoPageDelegate = theDelegate;

    return infoPage;
}

这是我用来将页面提供给页面视图控制器类的代码：

@implementation InfoViewController

@synthesize delegate;
@synthesize infoViewController;


- (void) viewDidLoad
{
    //NSLog(@"%s", __FUNCTION__);
    // Add the child controller, and set it to the first page
    [self.view addSubview:infoPageController.view];
    [self addChildViewController:infoPageController];

    [infoPageController didMoveToParentViewController:self];
    [infoPageController moveToPage:0];
}

- (void) loadView
{
    [super loadView];
    //NSLog(@"%s", __FUNCTION__);
    // Build the view
    CGRect appRect = [[UIScreen mainScreen] bounds];
    self.view = [[UIView alloc] initWithFrame: appRect];
    self.view.backgroundColor = [UIColor whiteColor];
    self.view.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;

    self.navigationItem.rightBarButtonItem = nil;



    UIBarButtonItem *doneButton = [[UIBarButtonItem alloc] initWithTitle:NSLocalizedString(@"DONE", @"") style:UIBarButtonItemStyleBordered  
                                              target:self 
                                              action:@selector(dismiss:)];
    self.navigationItem.rightBarButtonItem = doneButton;

    UIBarButtonItem *tocButton = [[UIBarButtonItem alloc] initWithTitle:NSLocalizedString(@"TOC", @"") style:UIBarButtonItemStyleBordered 
                                             target:self action:@selector(tocButtonTapped:)];


    self.navigationItem.leftBarButtonItem = tocButton;

    self.navigationController.navigationBar.tintColor = [UIColor blackColor];
    self.title = NSLocalizedString(@"Information", @"");

    // Establish the page view controller
    infoPageController = [InfoPageController infoPageWithDelegate:self];
    infoPageController.view.frame = (CGRect){.size = appRect.size};

}



- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    return YES;
}


// THIS IS WHERE THE PAGES ARE CREATED / LOADED.

- (id) viewControllerForPage: (int) pageNumber
{    
    // CHANGE THIS TO PAGE NUMBER - DEPENDING ON HOW MANY PAGES YOU HAVE.
    //NSLog(@"%s", __FUNCTION__);
    AppDelegate *mainDelegate = (AppDelegate *) [[UIApplication sharedApplication] delegate];

    if (pageNumber < 0) return nil;


    if (pageNumber > [mainDelegate.infoPageData count]) {
        pageNumber = 1;
    }

    //NSLog(@"viewControllerForPage - selectedPage is: %i", pageNumber);



    // Establish a new controller
    UIViewController *controller = [InfoPageController rotatableInfoViewController];

    // Add an image

    if (pageNumber == 2) { //TOC

        UIWebView *webView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 0, 320, 460)];
        [webView loadRequest:[NSURLRequest requestWithURL:[NSURL fileURLWithPath:[[NSBundle mainBundle] 
                                                          pathForResource:@"infotoc" ofType:@"html"]isDirectory:NO]]];
        //webView.backgroundColor = [UIColor clearColor];
        webView.frame = CGRectMake(0,0,550,800);

        webView.delegate = self;
        [controller.view addSubview:webView];


    } else {

        NSString *imageName = [NSString stringWithFormat:@"dreamcatchingInstructions.%i.png", pageNumber +1];
        //NSLog(@"imageName is: %@", imageName);    
        UIImage *image = [UIImage imageNamed: imageName]; 
        CGRect viewFrame = self.view.frame;
        //viewFrame.origin.y = 50;
        viewFrame.size.width = 540;
        viewFrame.size.height = 600;

        UIImageView *imageView = [[UIImageView alloc] initWithFrame:viewFrame];
        imageView.image = image;


        [controller.view addSubview:imageView];
    }



    return controller;
}


- (void)doneButtonTapped {    
    [delegate doneButtonTapped];
}

- (IBAction)dismiss:(id)sender {
    //NSLog(@"%s", __FUNCTION__);
    [self dismissModalViewControllerAnimated:YES];
}



-(void)tocButton {
    //NSLog(@"%s", __FUNCTION__);
    [delegate tocButton];

}

- (IBAction)tocButtonTapped:(id)sender {    
    //NSLog(@"%s", __FUNCTION__);
    [infoPageController moveToPage:2];

}

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
    //NSLog(@"%s", __FUNCTION__);
    NSString *absoluteUrl = [[request URL] absoluteString];
    //NSLog(@"absoluteUrl is %@", absoluteUrl);

    if ([absoluteUrl isEqualToString:@"didtap://button1"]) {
        //NSLog(@"Button1");
        [self didTapButton1];
        return NO;
    }
    if ([absoluteUrl isEqualToString:@"didtap://button2"]) {
        //NSLog(@"Button2");
        [self didTapButton2];
        return NO;
    }
    if ([absoluteUrl isEqualToString:@"didtap://button3"]) {
        //NSLog(@"Button3");
        [self didTapButton3];
        return NO;
    }
    if ([absoluteUrl isEqualToString:@"didtap://button4"]) {
        //NSLog(@"Button4");
        [self didTapButton4];
        return NO;
    }
    if ([absoluteUrl isEqualToString:@"didtap://button5"]) {
        //NSLog(@"Button5");
        [self didTapButton5];
        return NO;
    }
    if ([absoluteUrl isEqualToString:@"didtap://button6"]) {
        //NSLog(@"Button6");
        [self didTapButton6];
        return NO;
    }
    if ([absoluteUrl isEqualToString:@"didtap://button7"]) {
        //NSLog(@"Button7");
        [self didTapButton7];
        return NO;
    }
    if ([absoluteUrl isEqualToString:@"didtap://button8"]) {
        //NSLog(@"Button8");
        [self didTapButton8];
        return NO;
    }
    if ([absoluteUrl isEqualToString:@"didtap://button9"]) {
        //NSLog(@"Button9");
        [self didTapButton9];
        return NO;
    }

    //NSLog(@"No");
    return YES;
}

-(void)didTapButton1 {
    //NSLog(@"%s", __FUNCTION__);
    [infoPageController moveToPage:3];
}
-(void)didTapButton2 {
    //NSLog(@"%s", __FUNCTION__);
    [infoPageController moveToPage:11];
}
-(void)didTapButton3 {
    //NSLog(@"%s", __FUNCTION__);
    [infoPageController moveToPage:15];
}


-(void)didTapButton4 {
    //NSLog(@"%s", __FUNCTION__);
    [infoPageController moveToPage:29];
}
-(void)didTapButton5 {
    //NSLog(@"%s", __FUNCTION__);
    [infoPageController moveToPage:43];
}
-(void)didTapButton6 {
    //NSLog(@"%s", __FUNCTION__);
    [infoPageController moveToPage:50];
}


-(void)didTapButton7 {
    //NSLog(@"%s", __FUNCTION__);
    [infoPageController moveToPage:56];
}
-(void)didTapButton8 {
    //NSLog(@"%s", __FUNCTION__);
    [infoPageController moveToPage:60];
}
-(void)didTapButton9 {
    //NSLog(@"%s", __FUNCTION__);
    [infoPageController moveToPage:67];
}

最后，我的目录页面（网络写作）是这样的：

<html>
    <head>
        <title>DreamCatching</title> 

        <style type="text/css">

            body  {
                /*width: 700px;*/
                position: relative;

                background: url('DreamCatchingWhite3.png') no-repeat;
                opacity:0.6;
                font: 30px "Copperplate",sans-serif;
                font-weight: 100; 
                /*margin: 0;*/
                font-style: normal;
            }

            img {
                opacity:0.3;
            }


            h1 {
                height: 70px;
                font: 36px "Gill Sans",sans-serif;
                font-weight: 200;
                text-align: center;
            }

            h2 {
                font: 28px "Gill Sans",sans-serif;
                font-weight: 200;
                text-align: center;
            }



            #header1 {
                position: relative;
                margin-top: 40;
                text-align:center;
                width: 100%;
                font: 36px "Copperplate",sans-serif;
                font-weight: 200; 
                 text-transform: small-caps; 
                /*border-bottom: 3px double #600;*/ 
                height: 100px;
            }

            #body1 {
                position: relative;
                /*width: 80%;*/
                font: 26px "Copperplate",sans-serif;
                font-weight: 200; 
                background-image:DreamCatchingWhite2.png;
                /*border-bottom: 3px double #600;*/ 
                height: 300px;
            }

            p {
                text-align: center;
            }

            td, th { 
                /*border: 1px solid #eee;*/
                font: 20px "Copperplate",sans-serif;
                margin-bottom:40;
                font-weight: 200; 
            }

            tr {
                position:relative;
                border:10;
                margin-bottom:40;
                height:70;
                text-align: center;
                text-transform: small-caps; 
            }

            table {
                width:100%;
                margin-bottom:40;
                border-collapse:collapse;
                font: 20px "Copperplate",sans-serif;
                font-weight: 200;
                text-transform: small-caps;
            }

            a { 
                color: black;
                text-decoration: none; 
                text-align: center; 
                text-transform: small-caps; 


            }

            </style>


    </head>
    <body>

        <div id="header1">

            <h1>TABLE OF CONTENTS</h1>
        </div>

        <div id="body1">
            <table border="0" cellspacing="6">

                <tr>
                    <td><a href="didtap://button1">Getting Started</a></td>
                    <td><a href="didtap://button2">Voice Recording</a></td>
                    <td><a href="didtap://button3">Adding Details</a></td>
                </tr> 

                <tr>

                    <td><a href="didtap://button4">Styles</a></td>
                    <td><a href="didtap://button5">Exploration</a></td>
                    <td><a href="didtap://button6">Deleting and Saving</a></td>
                </tr> 

                <tr>
                    <td><a href="didtap://button7">Email and Sharing</a></td>
                    <td><a href="didtap://button8">Drawing</a></td>
                    <td><a href="didtap://button9">Summary</a></td>
                </tr>
            </table>            

        </div> 



    </body>
</html>

score 0 · Accepted Answer

由于您使用的是 UIWebView，因此您需要使用 JavaScript 和/或 CSS 来完成翻页动画。

有几条路线你可以去这里。

查看turn.js和jquery 移动页面转换。这些解决方案之一应该适合您。

这是 turn.js 的示例代码：

#magazine{
    width:800px;
    height:400px;
}
#magazine .turn-page{
    width:400px;
    height:400px;
    background-color:#ccc;
}
<div id='magazine'>
    <div> Page 1 </div>
    <div> Page 2 </div>
    <div> Page 3 </div>
</div>
$('#magazine').turn();

iphone - 在 Epub 中添加类似动画的书籍

2 回答 2

Related

Reference