Webview 的滑动过渡动画答案

【问题标题】：Swipe Transition Animation for WebviewWebview 的滑动过渡动画
【发布时间】：2015-04-17 12:33:29
【问题描述】：

在从右向左滑动手势后，我正在为 web 视图加载新内容。执行手势后，webview 会加载其新内容。如何为此 webview 制作动画，根据手势显示 webview 内容的“滑动”？因此，当用户从右向左滑动时，webview 也应该从右向左移动。并最终“飞走”。我认为某些音乐应用程序具有此功能，您可以通过滑动一首来加载新曲目。谢谢！

【问题讨论】：

标签： ios objective-c webview

【解决方案1】：

您可以通过以下代码使用单个UIWebView 应用滑动动画。

- (void)viewDidLoad
{
    [super viewDidLoad];

    UISwipeGestureRecognizer *recognizerRight;
    recognizerRight.delegate=self;

    recognizerRight = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(swipeRight:)];
    [recognizerRight setDirection:UISwipeGestureRecognizerDirectionRight];
    [webView addGestureRecognizer:recognizerRight];


    UISwipeGestureRecognizer *recognizerLeft;
recognizerLeft.delegate=self;
    recognizerLeft = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(swipeleft:)];
    [recognizerLeft setDirection:UISwipeGestureRecognizerDirectionLeft];
    [webView addGestureRecognizer:recognizerLeft];


}

现在借助CATransition 应用滑动效果。

-(void)swipeleft:(UISwipeGestureRecognizer *)swipeGesture
{


        CATransition *animation = [CATransition animation];
        [animation setDelegate:self];
        [animation setType:kCATransitionPush];
        [animation setSubtype:kCATransitionFromRight];
        [animation setDuration:0.50];
        [animation setTimingFunction:
         [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
        [webView.layer addAnimation:animation forKey:kCATransition];



}
-(void)swipeRight:(UISwipeGestureRecognizer *)swipeGesture
{

        CATransition *animation = [CATransition animation];
        [animation setDelegate:self];
        [animation setType:kCATransitionPush];
        [animation setSubtype:kCATransitionFromLeft];
        [animation setDuration:0.40];
        [animation setTimingFunction:
         [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
        [webView.layer addAnimation:animation forKey:kCATransition];


}

希望对您有所帮助。

【讨论】：

谢谢，我觉得很整洁。唯一的问题是在“新”视图上看到“旧”内容的时间很短，然后加载了 web 视图的新内容。有什么想法吗？
编辑：好的，我也添加了这个以在刷卡之前清理内容：[myWebView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"about:blank"]]];

【解决方案2】：

您将需要使用两个 UIWebView，一个用于飞行，一个用于新内容。要让它飞走，您可以使用众多库之一，例如ZLSwipeableView。

同时，我会在第一个位置创建一个新的 UIWebView。您可能应该首先使其不可见，并根据第一个视图的移动使其可见，以便它逐渐出现。

【讨论】：

【解决方案3】：

对于滑动手势和加载新内容，您可以使用：

UISwipeGestureRecognizer *swipeGR;
    swipeGR = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(handleSwipeLeft)];
    swipeGR.direction = UISwipeGestureRecognizerDirectionLeft;
    swipeGR.delegate = self;
    swipeGR.numberOfTouchesRequired = 1;
    [webview addGestureRecognizer:swipeGR];

【讨论】：

缺少动画！