将动画放在基于页面的应用程序中

时间:2014-05-10 11:03:22

标签: ios objective-c animation

我已经在Xcode中使用了基于页面的应用程序模板,并将其从日历小册子转换为漫画书。每个页面都有一个包含12个视图的网格 - 3个横跨& 4下来。每个视图都有一个.png文件,显示我的角色在与他的存在斗争时。我将简要介绍代码,然后解释我想要的内容,也许你们中的一些人可以指出我正确的方向。

在XTBModelController.m文件中,我创建了一个“@property NSArray * Pages;”来处理漫画中的所有页面,然后为每个单独的页面创建一系列NSArrays,范围从“* Page0到* Pagewhatever”。< / p>

代码如下所示:

@property (strong, nonatomic)NSArray *Pages; // This array handles all the pages of the comic

// the rest of the arrays (Page#) take care of the content for each page which are simple .png     graphic files
@property (strong, nonatomic)NSArray *Page0;
@property (strong, nonatomic)NSArray *Page1;
@property (strong, nonatomic)NSArray *Page2;

...等等到漫画书的结尾......

@end


@implementation XTBModelController

- (id)init
  {
    self = [super init];
    if (self)
      {
        // Create the data model.

        _Page0 = [[NSArray alloc]initWithObjects:[UIImage imageNamed:@"Cover.png"], nil];

        _Page1 = [[NSArray alloc]initWithObjects:[UIImage imageNamed:@"1.png"],[UIImage imageNamed:@"2.png"],[UIImage imageNamed:@"3.png"], ... and so on up to 12.png, nil];

        _Page2 = [[NSArray alloc]initWithObjects:[UIImage imageNamed:@"13.png"],[UIImage imageNamed:@"14.png"],[UIImage imageNamed:@"15.png"], ... and so on up to 32.png, nil];

......等等到漫画书的结尾。

        _Pages = [[NSArray alloc]initWithObjects:_Page0,_Page1, ... and so on up to the last page in the comic book, nil];
  }

    return self;

有。这应该给你一个想法。 iPad上的结果是一本漫画书,平均有12个视图; 3对,4对。

滑动页面,您会看到漫画书的下12帧。但这是你典型的漫画书,只是一堆静态图画排成一列讲故事。

我想用_Page1做什么会让我的应用程序与纯静态漫画书不同。我想用动画书风格的动画制作动画。

_Page0是漫画书封面 - 只有一个大的静态.png文件。 _Page1是动画部分。页面从_Page0刷新到_Page1时动画自动开始,并在250帧后停止。它经历了这个动画周期只有一次,最终看起来像漫画的其余部分 - 12个视图的网格。当动画停止时,阅读器会滑动到_Page2,这是您的3x4网格静态.png文件,就像跟随_Page2的所有页面一样。

我在使用NSArrays的单个视图应用程序上完成了这个(仅限动画)并且它工作得很好。但是我不能把代码放到行_Page1 = ??在我的基于页面的应用程序如果你需要,我会发布那些代码,这样你就可以看到我做了什么,但我不想让我的信息继续下去。

我确定在基于页面的应用程序的其中一个页面上放置一个动画书动画可以完成,但我无处可去。你们有什么建议吗?


这是对Duncan S的要求的回应。

下面的代码是单个视图应用程序中翻书动画的代码。

xOxAViewController.h文件

#import <UIKit/UIKit.h>

@interface xOxAViewController : UIViewController

- (IBAction)cellAnimation:(id)sender;



/* This IBOutlet is where the animation will be shown */
@property IBOutlet UIImageView *imgView;

/* This NSArray holds all the images in the animation. */
@property NSArray* images;

@end

xOXAViewcontroller.m文件

#import "xOxAViewController.h"
#import <AVFoundation/AVFoundation.h>

@interface xOxAViewController ()

@end

@implementation xOxAViewController

- (void)viewDidLoad
{
  [super viewDidLoad];
}

  // Do any additional setup after loading the view, typically from a nib.
  self.images=[NSArray arrayWithObjects:[UIImage imageNamed:@"a0.png"], [UIImage     imageNamed:@"a1.png"],
               [UIImage imageNamed:@"a2.png"],[UIImage imageNamed:@"a3.png"],
               [UIImage imageNamed:@"a4.png"], ... [UIImage imageNamed:@"a47.png"],
               [UIImage imageNamed:@"a48.png"], nil];
}
-(IBAction)cellAnimation:(id)sender
  {
    self.imgView.animationImages=self.images;
    self.imgView.animationDuration=10;
    self.imgView.animationRepeatCount=1;
    [self.imgView startAnimating];
  }



- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

这很好。很容易搞清楚。动画只在故事板中的一个图像视图中发生。

但是在基于页面的应用程序中放置相同的动画会更复杂。而且很多复杂性与故事板有关。我将嵌入两个项目的故事板的两个图形,然后解释我的观点。我希望我能为你说清楚。

以下是单一视图应用中动画的故事板。

First the story board for the single view application.

真的没什么。我希望这可以使单个视图应用程序中的代码和故事板之间的关系清晰。


现在,我将向您展示基于页面的应用程序的故事板,后面是相关代码:

Now I will show you the storyboard of the page-based app followed by relevant code:

正如您在故事板中看到的那样,只有一个Root View Controller和一个Data View Controller。 Apple的基于页面的应用程序模板中的代码非常聪明。如果我使用正确的术语来处理内存问题,那么我可以根据需要输入任意数量的页面并在每个页面上显示图像视图。具有所需图像视图的所有视图场景都位于一个数据视图控制器上,所有这些都是相互堆叠的。由XTBDataViewController类中的代码调用。我会在这里给你看代码。

XTBDataViewContoller.h

#import <UIKit/UIKit.h>

@interface XTBDataViewController : UIViewController
@property (strong, nonatomic) id dataObject;

@property (strong, nonatomic) IBOutlet UIImageView *Image1Outlet;
@property (strong, nonatomic) IBOutlet UIImageView *Image2Outlet;
@property (strong, nonatomic) IBOutlet UIImageView *Image3Outlet;
@property (strong, nonatomic) IBOutlet UIImageView *Image4Outlet;
@property (strong, nonatomic) IBOutlet UIImageView *Image5Outlet;
@property (strong, nonatomic) IBOutlet UIImageView *Image6Outlet;
@property (strong, nonatomic) IBOutlet UIImageView *Image7Outlet;
@property (strong, nonatomic) IBOutlet UIImageView *Image8Outlet;
@property (strong, nonatomic) IBOutlet UIImageView *Image9Outlet;
@property (strong, nonatomic) IBOutlet UIImageView *Image10Outlet;
@property (strong, nonatomic) IBOutlet UIImageView *Image11Outlet;
@property (strong, nonatomic) IBOutlet UIImageView *Image12Outlet;

@property (strong, nonatomic) IBOutlet UIImageView *VillageViewOutlet;

@property (strong, nonatomic) IBOutlet UIImageView *CoverImageOutlet;

@end

XTBDataViewContoller.m

#import "XTBDataViewController.h"

@interface XTBDataViewController ()

@end

@implementation XTBDataViewController

- (void)viewDidLoad
  {
    [super viewDidLoad];
  }

- (void)didReceiveMemoryWarning
  {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
  }


- (void)viewWillAppear:(BOOL)animated
  {
    [super viewWillAppear:animated];

    if([_dataObject count]==1)

      // this code supports the comic's cover which has just one big Image View.
      {
        _CoverImageOutlet.image=[_dataObject objectAtIndex:0];
      }

    // and this code supports the pages that have 6 small Image Views at the top of the page and one big Image View at the bottom
    else if([_dataObject count]==7)
      {
        _Image1Outlet.image=[_dataObject objectAtIndex:0];
        _Image2Outlet.image=[_dataObject objectAtIndex:1];
        _Image3Outlet.image=[_dataObject objectAtIndex:2];
        _Image4Outlet.image=[_dataObject objectAtIndex:3];
        _Image5Outlet.image=[_dataObject objectAtIndex:4];
        _Image6Outlet.image=[_dataObject objectAtIndex:5];
        _VillageViewOutlet.image=[_dataObject objectAtIndex:6];
      }

    else
    // and this code supports the pages that have 12 small Image Views - 3 across by 4 down (most of the pages in the comic book are like this)
      {
        _Image1Outlet.image=[_dataObject objectAtIndex:0];
        _Image2Outlet.image=[_dataObject objectAtIndex:1];
        _Image3Outlet.image=[_dataObject objectAtIndex:2];
        _Image4Outlet.image=[_dataObject objectAtIndex:3];
        _Image5Outlet.image=[_dataObject objectAtIndex:4];
        _Image6Outlet.image=[_dataObject objectAtIndex:5];
        _Image7Outlet.image=[_dataObject objectAtIndex:6];
        _Image8Outlet.image=[_dataObject objectAtIndex:7];
        _Image9Outlet.image=[_dataObject objectAtIndex:8];
        _Image10Outlet.image=[_dataObject objectAtIndex:9];
        _Image11Outlet.image=[_dataObject objectAtIndex:10];
        _Image12Outlet.image=[_dataObject objectAtIndex:11];

      }
  }

@end

就是这样。我希望我已经为你解释得很好。在单视图动画中制作动画效果并不太难。但是让基于页面的模板中的动画工作......好吧,我只是不知道如何开始。我累了很多次,但有时候我觉得自己已经把自己编成了角落。

我首先关注的是我已经清楚地向您解释了这个问题。也许我的问题非常复杂,Stack Overflow不是发布它的格式。也许我需要通过GitHub(我正试图解决这个问题)。

你觉得怎么样,邓肯?

0 个答案:

没有答案