为 WebView 页面更改使用动画答案

【问题标题】：Using animation for WebView page changes为 WebView 页面更改使用动画
【发布时间】：2015-09-29 16:05:22
【问题描述】：

我一直在网上搜索如何将动画合并到我的 UIWebView 控件中的示例，但我一直空白。

我对动画并不挑剔（一旦我了解如何将它附加到动作上，我就可以搞砸它），我只想要一些东西，而不仅仅是从一个网页到另一个网页的明显过渡、卷曲的页面、动画从左（旧页面）到右（新页面），随便怎么做。

有人可以发布示例或将我引导到解释我如何执行此操作的页面吗？我阅读了 CATransition 上的文档，但我仍然不知道如何将其合并到我的 UIWebView 导航中。

【问题讨论】：

当您点击网页中的链接时，您是否想要控制在网页之间导航时的动画？

标签： ios objective-c cocoa-touch uiwebview uikit

【解决方案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 例程，这并不重要。

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

【讨论】：

【解决方案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")

【讨论】：