ios - 如何在内容增长的同时为 UIView 的阴影边框设置动画
问题描述
我正在开发一个将所有视图嵌入到视图容器中的项目,如下所示:
今天,当堆栈视图显示其排列的子视图时,我必须使其中一个容器以动画方式垂直增长。所以,第一个问题是这个容器的阴影边框没有动画,我意识到阴影路径应该以另一种方式动画,而不仅仅是在 UIView.animate 块中。
我在一个小项目中隔离了这个问题:
如您所见,我正在尝试根据内部堆栈视图排列的子视图来部署/取消部署容器视图。问题是阴影路径,我已经在尝试了解它是如何工作的。
当您需要在动画块中更新 UIView 的高度时,您能帮我了解如何管理 UIView 阴影层吗?
容器阴影视图代码:
import UIKit
@IBDesignable final class ShadowView: UIView {
@IBInspectable var cornerRadius: CGFloat = 0.0 {
didSet {
setNeedsLayout()
}
}
@IBInspectable var shadowColor: UIColor = UIColor.darkGray {
didSet {
setNeedsLayout()
}
}
@IBInspectable var shadowOffsetWidth: CGFloat = 0.0 {
didSet {
setNeedsLayout()
}
}
@IBInspectable var shadowOffsetHeight: CGFloat = 1.8 {
didSet {
setNeedsLayout()
}
}
@IBInspectable var shadowOpacity: Float = 0.30 {
didSet {
setNeedsLayout()
}
}
@IBInspectable var shadowRadius: CGFloat = 3.0 {
didSet {
setNeedsLayout()
}
}
@IBInspectable var isAnimatable: Bool = false
private var shadowLayer: CAShapeLayer = CAShapeLayer() {
didSet {
setNeedsLayout()
}
}
private var previousPat: CGPath = CGPath(rect: CGRect(x: 0, y: 0, width: 0, height: 0), transform: .none)
override func layoutSubviews() {
super.layoutSubviews()
layer.cornerRadius = cornerRadius
shadowLayer.path = UIBezierPath(roundedRect: bounds,
cornerRadius: cornerRadius).cgPath
shadowLayer.fillColor = backgroundColor?.cgColor
shadowLayer.shadowColor = shadowColor.cgColor
shadowLayer.shadowPath = shadowLayer.path
shadowLayer.shadowOffset = CGSize(width: shadowOffsetWidth,
height: shadowOffsetHeight)
shadowLayer.shadowOpacity = shadowOpacity
shadowLayer.shadowRadius = shadowRadius
if isAnimatable {
let animation = CABasicAnimation(keyPath: "shadowPath")
animation.fromValue = previousPat
animation.toValue = shadowLayer.path
animation.autoreverses = false
animation.duration = 0.8
shadowLayer.add(animation, forKey: "pathAnimation")
}
layer.insertSublayer(shadowLayer, at: 0)
previousPat = shadowLayer.path!
}
}
主视图控制器代码:
final class ViewController: UIViewController {
@IBOutlet weak var stack: UIStackView!
@IBOutlet weak var redContainerLabel: UILabel!
override func viewDidLoad() {
super.viewDidLoad()
}
@IBAction func animateAction(_ sender: Any) {
UIView.animate(withDuration: 0.8) {
self.redContainerLabel.alpha = self.redContainerLabel.alpha == 0 ? 1 : 0
self.stack.arrangedSubviews.forEach {
$0.isHidden.toggle()
}
}
}
}
解决方案
我一直在寻找这个问题的答案,并在这里遇到了这篇文章,我相信这就是你要找的:
在 UITableviewCell 高度动画的同时动画 CALayer 阴影
解决方案有点冗长(我很惊讶用例如此罕见以至于没有提示苹果修复(?)它)并且在这一点上已经有几年了,但我能找到最新的。最终我决定通过在调整大小之前淡出我的阴影来解决它,但你可能会发现它很有用!
我发现的其他一些较旧的帖子似乎证实了这种效果所需的努力程度(同样,Apple 有一个奇怪的列表,它认为是你的问题),所以第一篇文章可能是你最好的选择。
如果您设法找到更直接的解决方案,请务必告诉我;同时,我希望这会有所帮助。
推荐阅读
- php - 在 websdrver 上创建用于打印的高质量图像 (CMYK)
- python - 为 tensorflow 安装 protobuf 时 conda 失败
- jquery - jquery:如何使用 jquery 函数为不同的下拉菜单存储数据
- regex - 从 SNP rsid 名称中删除不必要的信息
- python - Python 3 从页面中提取 html 信息
- c++ - 通过 CMake target_compile_feature 检查是否支持 std::make_unique
- java - Build.getSerial() 方法返回什么样的序列号
- docker - 仅使用 GoogleContainerTools/jib 构建而不部署?
- javascript - 为什么每次单击父表的行时子表(切换表)都会重复?
- python - 如何准确知道正在调用哪个函数/方法/对象?