如何逐渐减小UIImage框架的宽度而不会使其失真? [英] How to decrease the width of a frame of an UIImage gradually without distorting it?

查看:66
本文介绍了如何逐渐减小UIImage框架的宽度而不会使其失真?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我认为这是一个非常基本的问题,但是我为此感到困惑。

I think this is a very basic question, but I am struggling with this one.

我有一个屏幕快照(一个UIImage),并将其放入UIView中(在下面的示例中称为screenShotView)。我想通过逐步揭示此screenShotView背后的内容来摆脱它。现在,我的screenShotView紧靠左侧,但是我希望它的帧越来越小,直到无法再看到screenShotView(没有挤压)为止。

I have a screenshot (an UIImage) which I put into an UIView (called screenShotView in my sample below). I want to get rid of this screenShotView by gradually revealing what is behind this screenShotView. Right now my screenShotView SQUEEZES to the left, but I would like its FRAME to become less and less until the screenShotView is no longer seen (without Squeezing).

这是我的码。如果我对UITextView(而不是UIImage)进行了相同的转换,它将完全按照我希望的方式工作(不进行转换)。

This is my code. If I did the same transformation with an UITextView (instead of an UIImage) it would work exactly how I would like it to behave (without transformation).

也许我不不能获得框架UIImages的概念?

Perhaps I don't get the concept of framing UIImages?

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

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

[UIView commitAnimations];






这就是中间的样子动画:


And this is how it looks like in the middle of the animation:

这就是我希望在动画中间显示的样子:

And this is how I would like it to look like in the middle of the animation:

这是已更新为Codo建议的代码(请参见下文),结果是我不再有动画了。按下按钮后,仅弹出蓝色屏幕。我猜我在添加子视图时做错了-问题似乎是没有添加子视图,因此无法消失:

This is the code updated to Codo's suggestions (see below), with the result that I have no animation anymore. The blue screen simply pops up once the button is pressed. I guess that I am doing something wrong with adding the subviews -- the problem appears to be that no subviews are added and can therefore not disappear:

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

}


推荐答案

回答问题

实际上非常简单:我制作了一个示例应用程序,以使星球大战(在这里称其为)过渡工作正常。为简单起见,我仅将这两个视图称为firstView和secondView。显示firstView(将是您的屏幕截图),secondView将从左侧滑入。我在每个视图上都放置了一个按钮来为过渡设置动画,这是 doTransition 的意思。重要的部分是设置视图属性的滑动 clipsToBounds = YES autoresizesSubviews = NO 。而已。我将发布一些屏幕截图。

It's actually very simple: I've made a sample app to get the star wars(just calling it here) transition working. For simplicity I'll just call the two views firstView and secondView. firstView is shown (would be your screenshot) and secondView will slide in from the left. I've put a button on each view to animate the transition, which is wirde to doTransition. The important part is to set the sliding in view's properties clipsToBounds = YES and autoresizesSubviews = NO. That's it. I'll post some screenshots.

- (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翻页效果,但是它可以访问私有方法和类。我仍然鼓励任何人看看它,因为有一天可能会打开它。

I did some research on the page turn / curl effect. Mainly this is all present in iOS, with little effort you can create the iBook page turn effect, but it's accessing private methods and classes. I still encourage anyone to have a look at it, cause it might some day be opened.

  • Apple's iBooks Dynamic Page Curl - Demo App by Steven Troughton-Smith

叶子-具有以下功能的应用由Tom Brow定制的页面卷曲,经过尝试,编译并且看起来不错!

Leaves - An App with a custom page curl by Tom Brow, tried, compiled and looks nice!

应用程序商店安全的页面卷曲动画-关于Tom Brow的Leafs应用程序的文章(已分支( twoPages )作者Ole Begemann

App Store-safe Page Curl animations - Article on Tom Brow's Leaves App which has been branched (twoPages) by the author Ole Begemann

实现iBooks页面卷曲功能g圆锥形变形算法-借助MacOS演示应用程序,它非常专业和先进,尽管不是鼓舞人心的快速射击选项。下载该应用程序!

Implementing iBooks page curling using a conical deformation algorithm - With a MacOS Demo App, very professional and advanced, though not an option for a quick shot still inspiring. Download the App!

页面卷曲的剖析-数学方法

这篇关于如何逐渐减小UIImage框架的宽度而不会使其失真?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆