Question

我认为这是一个非常基本的问题，但我正在努力解决这个问题。

我有一个截图（一个UIImage），我把它放入UIView（在下面的示例中称为screenShotView）。我想通过逐渐揭示这个screenShotView背后的内容来摆脱这个screenShotView。现在我的screenShotView SQUEEZES向左，但我希望它的FRAME变得越来越少，直到screenShotView不再被看到（没有Squeezing）。

这是我的代码。如果我使用UITextView（而不是UIImage）进行相同的转换，它将完全按照我希望它的行为（没有转换）。

也许我没有得到构建UIImages的概念？

 [UIView beginAnimations:nil context:NULL];
    [UIView setAnimationDuration:10];

    [screenShotView setFrame:CGRectMake(0, 0, 0, 480)];

[UIView commitAnimations];

这就是动画中间的样子：

enter image description here

这就是我想在动画中间看起来的样子： enter image description here

这是代码更新为Codo的建议（见下文），结果我不再有动画了。按下按钮后，蓝屏只会弹出。我想我在添加子视图时做错了 - 问题似乎是没有添加子视图，因此不会消失：

    -(IBAction)showNextText
{


    screenShotView = [[UIImageView alloc] initWithImage:[self screenshot]];

    [screenShotView setFrame:CGRectMake(0, 0, 320, 480)];
    [screenShotScrollView setFrame:CGRectMake(0, 0, 320, 480)];

    [self.view addSubview:screenShotScrollView];
    [screenShotScrollView addSubview:screenShotView];
    screenShotScrollView.scrollEnabled = NO;


    [self setUpNextText];
    [self removeOldText];

}

-(void)setUpNextText
{
    NSString* secondText = @"This is the second text shown if the user clicks next.";
    textView.text = secondText;
    textView.textColor = [UIColor redColor];
    textView.backgroundColor = [UIColor blueColor];
}

-(IBAction)removeOldText{
    [UIView beginAnimations:nil context:NULL];
    [UIView setAnimationDuration:5];

    [screenShotScrollView setFrame:CGRectMake(0,0,320,480)];

    [UIView commitAnimations];

}

Answer 1

回答问题

实际上非常简单：我已经制作了一个示例应用来获得星球大战（只是在这里调用它）过渡工作。为简单起见，我只需调用两个视图firstView和secondView。显示firstView（将是您的屏幕截图），secondView将从左侧滑入。我在每个视图上都放了一个按钮来设置转换动画，这是doTransition的结尾。重要的是在视图的属性clipsToBounds = YES和autoresizesSubviews = NO中设置滑动。而已。我会发布一些截图。

- (void)viewDidLoad 
{
    [super viewDidLoad];
    secondView.frame = CGRectMake(0, 0, 0, 480);
    secondView.clipsToBounds = YES;
    secondView.autoresizesSubviews = NO;

    [self.view addSubview:firstView];   
    [self.view addSubview:secondView];  
}

- (IBAction)doTransition
{
    [UIView animateWithDuration:1.0 
                     animations:^{
                         self.secondView.frame = CGRectMake(0, 
                                                            0, 
                                                            320, 
                                                            480);
                     }];
}

enter image description here

关于页面卷曲的研究

我对翻页/卷曲效果进行了一些研究。主要是这一切都存在于iOS中，您可以轻松创建iBook页面转换效果，但它正在访问私有方法和类。我仍然鼓励任何人看一下它，因为有一天它可能会被打开。

Apple's iBooks Dynamic Page Curl - Steven Troughton-Smith的演示应用程序
Leaves - Tom Brow自定义页面卷曲的应用程序，经过试用，编译并且看起来不错！
App Store-safe Page Curl animations - 关于Tom Brow's Leaves App的文章，由作者Ole Begemann分支（twoPages）
Implementing iBooks page curling using a conical deformation algorithm - 使用MacOS演示应用程序，非常专业和高级，但不是快速拍摄的选项仍然鼓舞人心。下载App！
The anatomy of a page curl - 数学方法

Answer 2

我猜你必须把你的上层视图放到 UIScrollView 中。然后将内容大小设置为与 UIScrollView 的大小相同，并禁用滚动。

接下来，您在 UIScrollView 上执行原始动画（ setFrame ）。

基本上，您可以使用UIScrollView为内部视图引入单独的坐标系。当外部视图（滚动视图）变小时，它不会扭曲内部视图，而是剪切它。

Answer 3

CGRect fillRect = self.view.bounds;

leftImageView.clipsToBounds = YES;
leftImageView.contentMode = UIViewContentModeTopLeft;
leftImageView.frame = fillRect;

rightImageView.clipsToBounds = YES;
rightImageView.contentMode = UIViewContentModeTopRight;
rightImageView.frame = CGRectMake(fillRect.size.width, 0, 0, fillRect.size.height);

[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:3];

leftImageView.frame = CGRectMake(0, 0, 0, fillRect.size.height);
rightImageView.frame = fillRect;

[UIView commitAnimations];

Answer 4

请勿为frame设置动画，而为center设置动画。请参阅文档here。

此外，如果您只需要兼容iOS 4，请使用-animateWithDuration:animations:

[UIView animateWithDuration:10
                 animations:^{ screenShotView.center = CGPointMake(x, y) } ];

Answer 5

我不确定我是否完全理解你希望你的观点如何消失。

如果它应该变得越来越透明，请使用以下代码（而不是 setFrame ）：

[screenShotView setAlpha: 0.0f];

如果它应该变得越来越小（但保持其中心），那么试试：

[screenShotView setFrame:CGRectMake(screenShotView.frame.x, screenShotView.frame,y, 0, 0)];

如何在不扭曲的情况下逐渐减小UIImage框架的宽度？

5 个答案: