动画了在矩形
问题描述:
使用战平的UIView属性我有这样我的自定义视图:动画了在矩形
@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
})
,它是行不通的。
答
UIView类的以下属性动画:
- 帧
- 界限
- 中心
- 变换
- 阿尔法
- 的backgroundColor
所以原因是UIKit
动画框架,它可以管理的属性相当有限。解决方案是使用CADisplayLink
来管理您自己的动画,以便在每次刷新显示时更新属性。我已经写了一个框架来使这个超级简单,它可以在这里: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
持续时间)来计算你想要的当前值。插值和曲线只是帮手。