iOS和Objective C中的循环过渡（掩码）

我们想知道我们如何轻松地构建一个圆形蒙版，将背景混合并转换为新视图，使用新按钮？ 看这里的例子（看红色星球被触发）：

Answer 1

//斯威夫特4

这是从点屏幕进行圆形气泡转换的简单静态方法。

//如此链接https://github.com/andreamazz/BubbleTransition所示

import UIKit class AnimationUtility: UIViewController { static func animateBubbleTrnsitionView( selfView: UIView, point : CGPoint) { //let button = CGRect.init(x: 30, y: selfView.frame.size.height - 15, width: 45, height: 45) let button = CGRect.init(x: point.x, y: point.y, width: 0, height: 0) let circleMaskPathInitial = UIBezierPath(ovalIn: CGRect.init(x: point.x, y: point.y, width: 1, height: 1)) let extremePoint = CGPoint(x: point.x, y: 15 - selfView.frame.size.height - 200) let radius = sqrt((extremePoint.x*extremePoint.x) + (extremePoint.y*extremePoint.y)) let circleMaskPathFinal = UIBezierPath(ovalIn: (button.insetBy(dx: -radius, dy: -radius))) let maskLayer = CAShapeLayer() maskLayer.path = circleMaskPathFinal.cgPath selfView.layer.mask = maskLayer let maskLayerAnimation = CABasicAnimation(keyPath: "path") maskLayerAnimation.fromValue = circleMaskPathInitial.cgPath maskLayerAnimation.toValue = circleMaskPathFinal.cgPath maskLayerAnimation.duration = 0.9 maskLayer.add(maskLayerAnimation, forKey: "path") } } 

以下方式使用此代码执行segue或push而不使用动画。

  override func prepare(for segue: UIStoryboardSegue, sender: Any?) { // Get the new view controller using segue.destinationViewController. // Pass the selected object to the new view controller. switch segue.identifier! { case "navToHomeWithoutanimation": self.navigationController?.view.backgroundColor = APP_ORANGE_COLOR //which ever color you want let vc = segue.destination as! MapViewController AnimationUtility.animateBubbleTrnsitionView(selfView: vc.view, point: self.view.center) break } } 

//动画将从给定点开始动画。

Answer 2

SWIFT代码 ：

我写了所有代码appdelegate文件。 使用了时间轴的截图，而不是完整的UITableView。

首先，让我们在窗口上添加屏幕截图：

 let imageView = UIImageView(frame: self.window!.frame) imageView.image = UIImage(named: "twitterscreen") self.window!.addSubview(imageView) self.mask = CALayer() self.mask!.contents = UIImage(named: "twitter logo mask").CGImage self.mask!.bounds = CGRect(x: 0, y: 0, width: 100, height: 100) self.mask!.anchorPoint = CGPoint(x: 0.5, y: 0.5) self.mask!.position = CGPoint(x: imageView.frame.size.width/2, y: imageView.frame.size.height/2) imageView.layer.mask = mask 

动画面具。 您将观察到鸟的大小减小了一点，然后增加了大小，所以要使用一个动画，让我们使用CAKeyframeAnimation。

 let keyFrameAnimation = CAKeyframeAnimation(keyPath: "bounds") keyFrameAnimation.duration = 1 keyFrameAnimation.timingFunctions = [CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut), CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)] let initalBounds = NSValue(CGRect: mask!.bounds) let secondBounds = NSValue(CGRect: CGRect(x: 0, y: 0, width: 90, height: 90)) let finalBounds = NSValue(CGRect: CGRect(x: 0, y: 0, width: 1500, height: 1500)) keyFrameAnimation.values = [initalBounds, secondBounds, finalBounds] keyFrameAnimation.keyTimes = [0, 0.3, 1] self.mask!.addAnimation(keyFrameAnimation, forKey: "bounds") 

如果您看到结果，请访问github repo。 https://github.com/rounak/TwitterBirdAnimation/