2016-09-20 71 views
0

使用戰平的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 
      }) 

,它是行不通的。

回答

0

UIView documentation

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.01.0持續時間)來計算你想要的當前值。插值和曲線只是幫手。