Question

我一直在寻找一种方法，让圆在表格视图单元格中向上移动并在此过程中拉伸其高度。

如下图所示，进入单元格时，应将圆的高度压缩，然后在中间将其扩展到一个完整的圆，然后将其压缩回一半的高度，直到退出顶部为止。

这是我想出的课程，您可以猜到我在位置等方面做了很多尝试，但结果却很奇怪（在我的情况下，单元格高度为60.0），看起来像是卡住了。似乎动画仅在作为一个组添加时才起作用，但随后出现了时序问题，因为y比例应自动恢复到其原始值：

import UIKit

final class AnimatedCircleLayer: CALayer {

  override init(layer: Any) {
    super.init(layer: layer)

    position = (layer as AnyObject).position
  }

  let radius: CGFloat = 7.0

  init(atPosition position: CGPoint, width: CGFloat, height: CGFloat, color: UIColor) {
    super.init()

    bounds = CGRect(x: 0.0, y: 0.0, width: width, height: height)
    self.position = position
    //zPosition = -100.0
    anchorPoint = CGPoint(x: 0.0, y: 0.0)
    name = Keys.eqLayerName

    //let _ = Timer.scheduledTimer(withTimeInterval: 0.3, repeats: true, block: { _ in
      let circle = self.createAnimatedCircle(atPosition: CGPoint(x: CGFloat(arc4random_uniform(UInt32(width))),
                                                                 y: self.frame.height / 2.0), // -7.0), //self.frame.height + 5.0),
                                             withColor: color)
      self.addSublayer(circle)
    //})

    masksToBounds = true

    //backgroundColor = UIColor.green.cgColor
  }

  func createAnimatedCircle(atPosition position: CGPoint, withColor color: UIColor) -> CALayer {
    //let layer = CALayer()
    let circle = CAShapeLayer()
    let rect = CGRect(x: position.x,
                      y: position.y,
                      width: radius * 2.0,
                      height: radius)
    circle.path = UIBezierPath(ovalIn: rect).cgPath
    circle.backgroundColor = color.cgColor
    circle.fillColor = color.cgColor
    circle.cornerRadius = self.radius
    circle.position = position
    circle.anchorPoint = CGPoint(x: 0.5, y: 0.5)
    circle.name = "circle"

    animate(circle)

    return circle
  }

  required init?(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
  }

  func animate(_ circle: CALayer) {
    let moveAnimation = CABasicAnimation(keyPath: "position.y")

    //move.toValue = -frame.height / 2.0 - circle.frame.height
    moveAnimation.byValue = -140
    moveAnimation.duration = 4.0
    moveAnimation.autoreverses = false
    moveAnimation.repeatCount = 0
    //moveAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
    moveAnimation.isRemovedOnCompletion = true


    let stretchAnimation = CABasicAnimation(keyPath: "transform.scale.y")
    stretchAnimation.fromValue = 1.0
    stretchAnimation.toValue = 2.0
    stretchAnimation.autoreverses = true
    stretchAnimation.repeatCount = 1
    //stretchAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
    //stretchAnimation.duration = 2.0
    stretchAnimation.isRemovedOnCompletion = true

    let animations = CAAnimationGroup()
    animations.duration = 2.0
    animations.repeatCount = 0
    animations.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
    animations.animations = [moveAnimation, stretchAnimation]

    circle.add(animations, forKey: "animations")

  }

}

任何想法/帮助都值得赞赏！

CABasicAnimation同时移动和y缩放圆CALayer

0 个答案: