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

Question

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

我有一个屏幕截图（UIImage），我将其放入 UIView（在下面的示例中称为 screenShotView）。我想通过逐渐揭示这个screenShotView背后的东西来摆脱这个screenShotView。现在我的 screenShotView 向左挤压，但我希望它的 FRAME 越来越少，直到不再看到 screenShotView（没有挤压）。

这是我的代码。如果我使用 UITextView（而不是 UIImage）进行相同的转换，它将完全按照我希望的方式工作（无需转换）。

也许我没有理解框架 UIImages 的概念？

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

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

[UIView commitAnimations];

---

这就是它在动画中间的样子：

这就是我希望它在动画中间的样子：

---

这是根据 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

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

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

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

Answer 2

我不确定我是否完全理解您希望您的视图如何消失。

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

[screenShotView setAlpha: 0.0f];

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

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

Answer 3

回答问题

实际上非常简单：我制作了一个示例应用程序来让星球大战（只是在这里调用它）过渡工作。为简单起见，我只称这两个视图为 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);
                     }];
}

卷曲研究

我对翻页/卷曲效果做了一些研究。主要是这些都存在于 iOS 中，您可以毫不费力地创建 iBook 翻页效果，但它正在访问私有方法和类。我仍然鼓励任何人看看它，因为它可能有一天会被打开。

• Apple's iBooks Dynamic Page Curl - Steven Troughton-Smith 的演示应用

• Leaves - Tom Brow 的一个带有自定义页面卷曲的应用程序，经过尝试、编译并且看起来不错！

• App Store-safe Page Curl animations - 关于 Tom Brow 的 Leaves 应用程序的文章，作者 Ole Begemann 已分支 (twoPages)

• Implementing iBooks page curling using a conical deformation algorithm - 带有 MacOS 演示应用程序，非常专业和先进，虽然不是快速拍摄的选择，但仍然令人鼓舞。下载应用程序！

• The anatomy of a page curl - 数学方法

Answer 4

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

接下来您在 UIScrollView 上制作原始动画 (setFrame)。

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

Answer 5

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];