我一直在寻找一种方法,让圆在表格视图单元格中向上移动并在此过程中拉伸其高度。
如下图所示,进入单元格时,应将圆的高度压缩,然后在中间将其扩展到一个完整的圆,然后将其压缩回一半的高度,直到退出顶部为止。
这是我想出的课程,您可以猜到我在位置等方面做了很多尝试,但结果却很奇怪(在我的情况下,单元格高度为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")
}
}
任何想法/帮助都值得赞赏!