【问题标题】:iPhone Curl Left and Curl Right transitionsiPhone 左卷曲和右卷曲过渡
【发布时间】:2010-12-10 04:03:40
【问题描述】:

我正在寻找一种在 iPhone 上进行UIViewAnimationTransitionCurlUpUIViewAnimationTransitionCurlDown 转换的方法,但不是从上到下,而是从左到右(或横向模式下的上/下)。我已经看到这个问题在互联网上问了几次,但似乎没有一个得到答案。不过我觉得这是可行的。

我尝试过更改 View 的变换和 view.layer 的变换,但这并不影响过渡。由于当设备改变方向时转换会发生变化,我认为有一种方法可以欺骗设备在纵向模式下使用横向转换,反之亦然?

【问题讨论】:

    标签: iphone curl uiview transition cgaffinetransform


    【解决方案1】:

    我在iOS5上尝试了fluXa的解决方案(所以我不得不使用[UIView trans......])但它不起作用:卷曲仍然上升或下降。显然,过渡现在没有考虑到视图的变换。因此,如果其他人想在 iOS5 上做同样的事情,解决方案是在两者之间添加另一个容器并从那里为过渡设置动画。

    这是我的代码,它有点具体,因为我想向左“向上”卷曲,但下角卷曲。好像我正在从笔记本上撕下一页。

    UIView* parent = self.view; // the main view
    CGRect r = flipRectSize(parent.bounds);
    UIView* containerView = [[UIView alloc] initWithFrame:r];
    CGAffineTransform t = CGAffineTransformMakeRotation(-M_PI_2);
    t = CGAffineTransformTranslate(t, -80, -80);
    containerView.transform = CGAffineTransformScale(t, -1, 1);
    [parent addSubview:containerView]; 
    
    UIView* container2 = [[UIView alloc] initWithFrame:r];
    [containerView addSubview:container2]; 
    
    UIImageView* v = [[UIImageView alloc] initWithFrame:r];
    v.image = [UIImage imageWithCGImage:contents.CGImage scale:contents.scale orientation:UIImageOrientationLeftMirrored];
    [container2 addSubview:v];
    
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, 0.001 * NSEC_PER_SEC), dispatch_get_main_queue(), ^{
        [UIView transitionWithView:container2
                          duration:DURATION_CURL_ANIMATION
                           options:UIViewAnimationOptionTransitionCurlUp
                        animations:^{
                            [v removeFromSuperview];
                        } completion:^(BOOL finished) {
                            if (completion) {
                                completion(finished);
                            }
                            [containerView removeFromSuperview];}];});
    

    注意事项:

    1. 我必须承认,仿射变换 translate (80,80) 在我看来没有意义,但对于 iphone 是必需的,在 iPad 上可能行不通。
    2. flipSizeRect 翻转矩形的宽度和高度(你已经知道了,对吧?)
    3. dispatch_after 是必需的,因为我添加了容器,然后想从层次结构中删除视图。如果我省略了调度,则没有任何动画。我的最佳猜测是,我们首先需要让系统通过布局,然后才能为移除设置动画。

    【讨论】:

      【解决方案2】:

      我也为此苦苦挣扎。要让 curl 来自右侧或左侧,您可以创建一个中间视图并对其进行转换。因此,假设您正在转换的视图 (myView) 是主窗口 (parentView) 的子视图:

      -parentView
      -->myView
      

      您将在中间插入一个中间视图(在 Interface Builder 中很容易完成):

      -parentView
      -->containerView
      --->myView
      

      然后,使用以下代码将容器向左翻转 90 度,将过渡视图向右翻转 90 度:

      containerView.transform = CGAffineTransformMakeRotation(-M_PI_2);
      myView.transform = CGAffineTransformMakeRotation(M_PI_2);
      

      myView 仍将直立显示给用户,但过渡会认为它应用在距左侧 90 度的位置。

      请注意,根据视图的自动缩放方式,您可能必须在应用变换后修复帧大小,例如

        containerView.frame = CGRectMake(0.0, 0.0, 768.0, 1024.0);
        myWebView.frame = CGRectMake(0.0, 0.0, 768.0, 1024.0);
      

      希望这会有所帮助。这是最接近 UIViewAnimationTransitionCurlLeft 和 UIViewAnimationTransitionCurlRight 的地方。

      【讨论】:

        【解决方案3】:

        使用容器视图可以在四个方向中的任何一个方向上进行卷曲。将容器视图的转换设置为您想要的角度,然后通过将您的视图添加到容器视图而不是没有转换框架的应用程序的主视图来进行卷曲:

        NSView* parent = viewController.view; // the main view
        NSView* containerView = [[[UIView alloc] initWithFrame:parent.bounds] autorelease];
        containerView.transform = CGAffineTransformMakeRotation(<your angle here, should probably be M_PI_2 * some integer>);
        [parent addSubview:containerView]; 
        
        [UIView beginAnimations:nil context:nil];
        [UIView setAnimationTransition:UIViewAnimationTransitionCurlUp forView:containerView cache:YES];
        [containerView addSubview:view];
        [UIView commitAnimations];
        

        【讨论】:

        • 您要添加到 containerView 的视图是什么? @fluXa
        【解决方案4】:

        我实际上是通过改变 UIViewController 的方向来实现这个效果的。奇怪的是,当我的控制器不工作时,我将它嵌套在另一个控制器中,但是当我将他设置为即时视图控制器时,它就起作用了。

        执行此操作的代码:

        在我的应用程序委托中的主视图控制器 UIViewController 中,只允许横向(如您在下面的第二种方法中看到的)我有以下内容:

        -(void)goToPage:(int)page flipUp:(BOOL)flipUp {
        
             //do stuff...
        
             // start the animated transition
             [UIView beginAnimations:@"page transition" context:nil];
             [UIView setAnimationDuration:1.0];
             [UIView setAnimationTransition:flipUp ? UIViewAnimationTransitionCurlUp : UIViewAnimationTransitionCurlDown forView:self.view cache:YES];
        
             //insert your new subview
             //[self.view insertSubview:currentPage.view atIndex:self.view.subviews.count];
        
              // commit the transition animation
              [UIView commitAnimations];
        }
        
        - (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
             return (interfaceOrientation == UIInterfaceOrientationLandscapeRight);
        }
        

        【讨论】:

        • 状态栏呢? - 状态栏将显示在右侧 - 使用应用程序时?
        • 确保你的视图控制器没有嵌套,或者如果它确保它的父母正在实现正确的方向......
        【解决方案5】:

        我认为除了编写自定义动画之外别无他法。

        更重要的是,您可能不应该尝试它。 curl up 和 curl down 是用户界面语法的一部分,它告诉用户视图正在被提升或放下现有视图。它应该就像一张便条被放下然后被移除。左右卷曲很可能会被解释为从书中撕下一页。它会使用户感到困惑。

        每当你发现自己试图在接口中做一些标准 API 不容易做的事情时,你应该问问自己这种新颖的方法是否会向用户传达一些重要的东西,以及它是否类似于现有的接口语法。如果没有,那么你不应该打扰。

        不寻常的界面最初有令人惊叹的因素,但它们会导致日常使用中的挫败感和错误。它们还可能导致 Apple 拒绝您的应用。

        【讨论】:

        • 这并不罕见。完全一样。事实上,苹果就是这样做的,只是方向相反。我正在创建一本交互式风景书,所以我很肯定这个动画将把书的感觉传达给用户。上下效果适用于笔记本(如笔记应用程序)。但是对于一本合适的书,我需要一种不同的感觉。
        • 如果您查看 curl 过渡,您会看到它分离了视图的三个角。翻过的页面只会分离两个。卷曲沿对角线移动视图,而翻页仅从左到右移动。这种差异很微妙,但对用户的期望很重要。
        • 我不认为您可以通过简单的变换获得所需的过渡,因为卷曲过渡中的主要运动是右下角的对角线运动。无论您如何旋转或变换视图,该对角线运动都将保留,这将破坏简单的从左到右卷曲的错觉。
        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2018-05-28
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多