Question

我们正在尝试按下类似于Frontback应用程序（frontback.me）的相机按钮后创建动画，并且无法找到动画的可可荚或正确的术语。动画类似于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，然后将调用委托方法animationDidStop:finished。此时屏幕全黑，您必须从相机会话中捕获图像。拍摄后，请拨打playCaptureEndAnimation，然后播放反向动画。

按下相机按钮后Frontback应用程序用于相机的动画是什么？

1 个答案: