转载

iOS特效之破碎的ViewController

我是自豪的占位图

前言

我在iOS特效之你家玻璃碎了中介绍了一个没什么用的破碎效果，在这篇文章中我将把它用在ViewController的dismiss过渡动画中。效果如下，我调整了点的大小，食用效果更佳。不过要注意的是，不要在debug环境下把点的大小调整到15以下，否则你的机器可能承受不了，FPS也许会降到10以下。想要更小的点，则需要在release环境下编译。下面是调整点大小的相关代码。

 private func buildPointData() -> [Float] {
  ...
        let pointSize: Float = 2
  ...
}

原理

使用苹果提供的自定义ViewController过渡动画技术，可以很方便的将BrokenGlassEffectView植入到过渡动画中。将要被dismiss掉的ViewController渲染到一张图片上，传递给BrokenGlassEffectView，然后使用这张图片做破碎的动画，这样就可以产生ViewController破碎的效果了。

实现自定义ViewController过渡动画

想要实现自定义过渡动画，首先要实现一个动画管理类，这个类控制着过渡动画如何进行。本文的动画控制类在BrokenGlassTransitionAnimator.swift中。下面是动画的核心代码。

func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {
    let containerView = transitionContext.containerView
    guard let fromVC = transitionContext.viewController(forKey: UITransitionContextViewControllerKey.from),
        let toVC = transitionContext.viewController(forKey: UITransitionContextViewControllerKey.to) else {
            return
    }
    let snapshotImage = createImage(layer: fromVC.view.layer)
    let brokenGlassView = BrokenGlassEffectView.init(frame: fromVC.view.bounds)
    fromVC.view.removeFromSuperview()
    containerView.addSubview(toVC.view)
    containerView.addSubview(brokenGlassView)
    brokenGlassView.setImageForBroke(image: snapshotImage)
    brokenGlassView.beginBroke()
    DispatchQueue.main.asyncAfter(deadline: .now() + 1.2) { [weak brokenGlassView] in
        brokenGlassView?.removeFromSuperview()
        brokenGlassView?.destroy()
        transitionContext.completeTransition(!transitionContext.transitionWasCancelled)
    }
}

transitionContext为我们提供了过渡的来源VC，目的VC，动画执行的容器View。我们要做的是dismiss动画，所以先把目的VC的View加入容器View，再把BrokenGlassEffectView加入容器View，给来源VC截图，通过setImageForBroke传递给BrokenGlassEffectView。我通过经验给了一个1.2的动画结束时间，你也可以通过计算最慢的一个点到达底部的时间来确定动画时间，使用位移和加速度的物理公式，可以计算出来动画时间。

本文y轴的初始速度是0，所以公式可以简化为s=at*t*0.5，位移s最远为2，a最小为3，let yAccelerate = (-Float(arc4random()) / Float(RAND_MAX)) * 1.5 - 3.0，所以我们可以计算出t=1.154s。由于我们限制了y轴最大速度为6，因此可以计算出到达最大速度最多需要6/3 = 2s，最少需要6/4.5 = 1.33s，也就是说所有的点离开屏幕时都没有到达最大速度，所以t=1.154s没有任何问题。

iOS特效之破碎的ViewController

VC截图

在给VC截图时我偷懒没有在Y轴上翻转图片。

func createImage(layer: CALayer) -> UIImage {
    let bitsPerComponent = 8
    let bytesPerPixel = 4
    let width:Int = Int(layer.bounds.size.width)
    let height:Int = Int(layer.bounds.size.height)
    let imageData = UnsafeMutableRawPointer.allocate(bytes: Int(width * height * bytesPerPixel), alignedTo: 8)
    
    let colorSpace = CGColorSpaceCreateDeviceRGB()
    let imageContext = CGContext.init(data: imageData, width: width, height: height, bitsPerComponent: bitsPerComponent, bytesPerRow:
width * bytesPerPixel, space: colorSpace, bitmapInfo: CGImageAlphaInfo.premultipliedLast.rawValue |
CGImageByteOrderInfo.order32Big.rawValue )
    layer.render(in: imageContext!)
    
    let cgImage = imageContext?.makeImage()
    let image = UIImage.init(cgImage: cgImage!)
    return image
}

因此我移除了Fragment Shader里的UV翻转。uv = float2(uv[0], uv[1]);。

fragment float4 passThroughFragment(VertexOut inFrag [[stage_in]],
                                    float2 pointCoord  [[point_coord]],
                                     texture2d diffuse [[ texture(0) ]],
                                    const device Uniforms& uniforms [[ buffer(0) ]])
{
    float2 additionUV = float2((pointCoord[0]) * uniforms.pointTexcoordScale[0], (1.0 - pointCoord[1]) * uniforms.pointTexcoordScale[1]);
    float2 uv = inFrag.pointPosition + additionUV;
    uv = float2(uv[0], uv[1]);
    float4 finalColor = diffuse.sample(s, uv);
    return finalColor;
};

使用自定义过渡

例子中有两个VC，我在第一个VC中实现了UIViewControllerTransitioningDelegate，并且为dismiss动画提供了动画控制类实例。

let brokenGlassAnimator: BrokenGlassTransitionAnimator = BrokenGlassTransitionAnimator.init()
...
func animationController(forDismissed dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning? {
    return brokenGlassAnimator
}

在跳转时将要跳转到的VC的transitioningDelegate设为第一个VC，这样它dismiss时就会使用brokenGlassAnimator了。

let vc = PresentedViewController.instance()
vc.transitioningDelegate = self
self.present(vc, animated: true) {
    
}

总结

本文利用了自定义ViewController过渡动画的特性，将破碎动画融入到dismiss动画里。这篇和上一篇文章提供了制作基于Metal的VC过渡动画的思路，按照这个思路，发挥想象力就可以做出更多炫酷的过渡动画了。

作者：handyTOOL
链接：http://www.jianshu.com/p/1f4984c4e653
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

正文到此结束

所属分类：移动开发

本文标签： UI 实例 src 图片 map DOM build ORM cat HTML Swift tar 时间苹果 queue ip 代码总结 IOS tab API final 文章 bug 编译管理 value ACE id NSA key http IO
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

iOS特效之破碎的ViewController

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流