使用动画效果实现WebView页面转换

Question

我一直在搜索网页，寻找如何将动画整合到我的UIWebView控件中的示例，但是一直没有发现。我不挑剔动画类型（一旦了解了如何将其附加到操作中，我就可以进行修改），我只是想要比单纯的从一个网页到另一个网页的切换更加生动的效果，例如翻转页面、从左侧（旧页面）到右侧（新页面）的动画等等。请问有人能提供一个示例或者指导我应该如何做吗？我已经阅读了CATransition的文档，但我仍然不知道如何将其整合到我的UIWebView导航中。

- C4W

---

你是否想要在点击网页链接时控制动画，以便在导航网页时进行操作？ - Subbu

Answer 1

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

在执行loadRequest之前（我现在已经更改了我的代码，通过shouldStartLoadWithRequest捕获所有页面更改，然后使用webview loadRequest手动设置新页面），我会转到一个名为animatePage的卷曲动画例程：

- (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例程，这并没有太大关系。

我知道这可能不是完成工作的“正确”方法，但似乎确实可以完成工作。就像我说的，我需要在这里和那里进行微调，但到目前为止，我对结果感到满意。

- C4W

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")

- Kishor Pahalwani