ios - 按下相机按钮后，Frontback 应用程序会为其相机使用什么动画？

Question

我们正在尝试在您按下类似于 Frontback 应用程序 (frontback.me) 的相机按钮后创建动画，但未能找到 cocoa pod 或动画的正确术语。该动画类似于 Apple 过去使用的旧 Iris 快门动画。

按下相机按钮后，会出现动画。动画是一个覆盖捕获图像的圆圈。圆圈内是拍摄的图像，外面是黑色。圆圈越来越小，直到到达中心，然后显示捕获的整个图像。

请告知我在哪里可以找到此动画、自定义创建它和/或此特定动画的正确术语。谢谢!

这是我正在寻找的动画吗，我对 Xcode 很陌生:CAShapeLayer path animation -- shrinking a circle

再次感谢!

Answer 1

实际上，我是 Frontback 的联合创始人和开发者，是我制作了这个。我就是这样做的，它在 Rubymotion 中，但它可以很容易地移植回 Obj-C(或者更容易移植到 Swift)，你明白了。

def setupCaptureAnimation
  w = view.bounds.size.width
  h = view.bounds.size.height
  location = CGPointMake(w/2, h/2)
  shapeLayer = CAShapeLayer.layer

  outerRadius = 0.5 * Math.sqrt(w**2 + h**2) # circle around the view bounds
  @animStartPath = makeCircleAtLocation(location, radius:outerRadius).CGPath
  @animEndPath = makeCircleAtLocation(location, radius:0).CGPath

  shapeLayer.path = @animStartPath
  shapeLayer.fillColor = UIColor.blackColor.CGColor

  @animLayer = shapeLayer
end

def playCaptureStartAnimation
  view.layer.addSublayer(@animLayer)
  pathAnimation = CABasicAnimation.animationWithKeyPath("path")
  pathAnimation.setValue("start", forKey:"id")
  pathAnimation.duration = 0.1
  pathAnimation.fromValue = @animStartPath
  pathAnimation.toValue = @animEndPath
  pathAnimation.delegate = self
  @animLayer.addAnimation(pathAnimation, forKey:nil)
  @animLayer.path = @animEndPath
end

def playCaptureEndAnimation
  pathAnimation = CABasicAnimation.animationWithKeyPath("path")
  pathAnimation.setValue("end", forKey:"id")
  pathAnimation.duration = 0.2
  pathAnimation.fromValue = @animEndPath
  pathAnimation.toValue = @animStartPath
  pathAnimation.delegate = self
  @animLayer.addAnimation(pathAnimation, forKey:nil)
  @animLayer.path = @animStartPath
end

def makeCircleAtLocation(location, radius:radius)
  path = UIBezierPath.bezierPath
  # fill rectangle
  rect = view.bounds
  path.moveToPoint(CGPointMake(CGRectGetMinX(rect), CGRectGetMinY(rect)))
  path.addLineToPoint(CGPointMake(CGRectGetMinX(rect), CGRectGetMaxY(rect)))
  path.addLineToPoint(CGPointMake(CGRectGetMaxX(rect), CGRectGetMaxY(rect)))
  path.addLineToPoint(CGPointMake(CGRectGetMaxX(rect), CGRectGetMinY(rect)))
  path.addLineToPoint(CGPointMake(CGRectGetMinX(rect), CGRectGetMinY(rect)))
  # remove circle
  path.addArcWithCenter(location, radius:radius, startAngle:0.0, endAngle:2 * Math::PI, clockwise:true)
  path.closePath

  path
end

def animationDidStop(anim, finished:finished)
  if anim.valueForKey("id") == "start"
    # trigger capture and after that playCaptureEndAnimation
  else
    @animLayer.removeFromSuperlayer
    # done
  end
end

绘图技巧在于 makeCircleAtLocation:radius::当您绘制一条路径时，如果您将某些东西(例如圆形)叠加在其他东西(例如矩形)之上，交点实际上是从路径中删除。因此，通过在矩形中绘制圆，圆从矩形中移除。

您首先必须在初始化时调用 setupCaptureAnimation。然后，当用户点击相机按钮时，您必须调用将播放收缩动画的 playCaptureStartAnimation，然后将调用委托(delegate)方法 animationDidStop:finished。在那一刻屏幕全黑，你必须从相机 session 中捕捉图像。拍摄时，调用 playCaptureEndAnimation 它将播放反向动画。