使用动画进行 WebView 页面更改

Question

我一直在网上搜索有关如何将动画合并到我的 UIWebView 控件中的示例，但一无所获。

我对动画不挑剔（一旦我了解如何将它附加到动作上，我就可以弄乱它），我只想要一些不仅仅是从一个网页到另一个网页的明显过渡，卷曲的页面, 从左（旧页面）到右（新页面）的动画，随心所欲。

有人可以 post 举个例子或引导我访问解释我如何执行此操作的页面吗？我阅读了有关 CATransition 的文档，但我仍然不知道如何将它合并到我的 UIWebView 导航中。

Answer 1

经过一些尝试，我得到了我想要的效果，我可能需要稍微调整一下，但这是我想出的：

在执行 loadRequest 之前（我现在更改了我的代码，以便通过 shouldStartLoadWithRequest 捕获所有页面更改，然后使用 webview loadRequest 手动设置新页面）我转到我编写的名为 animatePage 的 curl 动画例程:

- (void) animatePage 
{
  CATransition *animation = [CATransition animation];
  [animation setDelegate:self];
  [animation setDuration:1.0f];
  animation.startProgress = 0.5;
  animation.endProgress   = 1;
  [animation setTimingFunction:UIViewAnimationCurveEaseInOut];
  [animation setType:@"pageCurl"];

  //[animation setType:kcat];
  [animation setSubtype:kCATransitionMoveIn];

  [animation setRemovedOnCompletion:NO];
  [animation setFillMode: @"extended"];
  [animation setRemovedOnCompletion: NO];
  [[myWebView layer] addAnimation:animation forKey:@"WebPageCurl"];
}

因此，要使用向上卷曲的页面动画为页面更改设置动画，我基本上会这样做：

[self animatePage];
[myWebView loadRequest:myRequest];

我可以在 loadRequest 之前或之后调用 animatePage 例程，这并不重要。

我知道这可能不是 "right" 完成工作的方法，但它似乎确实完成了工作。就像我说的，我需要在这里和那里拨它，但我对目前的结果很满意。

Answer 2

使用Swift：-

let animation = CATransition()//= [CATransition animation];
    animation.delegate = self
    animation.duration = 1.0
    animation.startProgress = 0.5
    animation.endProgress = 1
    animation.timingFunction = CAMediaTimingFunction.init(name: kCAMediaTimingFunctionLinear)//kCAMediaTimingFunctionEaseInEaseOut)//kCAMediaTimingFunctionEaseOut
    animation.type = "pageCurl"

    animation.subtype = kCATransitionMoveIn
    animation.isRemovedOnCompletion = false
    animation.fillMode = "extended"
    animation.isRemovedOnCompletion = false
    webView?.layer.add(animation, forKey: "WebPageCurl")

使用动画进行 WebView 页面更改

Using animation for WebView page changes

cocoa-touch

objective-c

uiwebview

uikit

ios