swift - 使用在矩形中绘制对 UIView 中的属性进行动画处理

Question

我有这样的自定义 View :

@IBDesignable
class MyTableViewCell: UITableViewCell {

@IBInspectable var cardColor : UIColor = UIColor.white
@IBInspectable var cardHorizontalPadding : Int = 20
@IBInspectable var cardVerticalPadding : Int = 20
@IBInspectable var cardCornerRadius : Int = 10
@IBInspectable var cardShadowRadius : Int = 6

var cardLayer : CAShapeLayer = CAShapeLayer()
var cardRect = CGRect.zero;

override func awakeFromNib() {
    super.awakeFromNib()

}

override func draw(_ rect: CGRect) {

    self.backgroundColor = UIColor.clear
    print("Sublayers count is \(layer.sublayers?.count)")
    let cardRect = rect.insetBy(dx: CGFloat(self.cardHorizontalPadding), dy: CGFloat(self.cardVerticalPadding))
    let cardPath = UIBezierPath(roundedRect: cardRect, cornerRadius: CGFloat(self.cardCornerRadius)).cgPath

    cardLayer.lineWidth = 0
    cardLayer.fillColor = self.cardColor.cgColor

    cardLayer.path = cardPath
    cardLayer.shadowRadius = CGFloat(self.cardShadowRadius)
    cardLayer.shadowOffset = CGSize.init(width: -0.2, height: -0.2)
    cardLayer.shadowPath = cardPath
    cardLayer.shadowOpacity = 0.2
    layer.addSublayer(cardLayer)
    layer.replaceSublayer(cardLayer, with: cardLayer)



}



override func setSelected(_ selected: Bool, animated: Bool) {


    // Configure the view for the selected state
}

}

我想在cardVerticalPadding上制作动画，就像这样

UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 1/10, animations: {

                currentCell.cardVerticalPadding = 10
            })

它不起作用。

Answer 1

来自 UIView documentation :

The following properties of the UIView class are animatable:

• frame
• bounds
• center
• transform
• alpha
• backgroundColor

所以原因是 UIKit动画框架可以管理的属性非常有限。解决方案是使用 CADisplayLink 管理您自己的动画每次刷新显示时更新您的属性。我编写了一个框架来使这变得 super 简单，它可以在这里找到:https://github.com/j-h-a/Animation (使用非常宽松的 MIT 许可证)。还可与 Cocoapods 一起使用，只需添加 pod 'Animation'给您Podfile .

该 API 与 UIKit 略有不同动画，而不是设置最终值，您的闭包会被重复调用，并且您根据 progress 设置当时想要的任何值。传入的值。以下是您的案例的示例用法:

import Animation

...

Animation.animate(identifier: "animateVerticalPadding", duration: 0.1,
    update: { progress in
        currentCell.cardVerticalPadding = 20.0 <~~ progress ~~> 10.0
    })

<~~和~~>运算符是我的线性插值语法，相当于 lerp(20.0, 10.0, progress) 。 20.0是初始值，10.0是最终值。如果您想使用缓入缓出曲线而不是线性，那么您可以这样做:

currentCell.cardVerticalPadding = 20.0 <~~ Curve.easeInEaseOut[progress] ~~> 10.0

或者，您可以使用您喜欢的任何方式计算当前值，例如 progress (在持续时间内从 0.0 增加到 1.0)来计算所需的当前值。插值和曲线只是帮助者。