[英]Material Ripple Effect for UICollectionView Cell
我正在嘗試為UICollectioView單元創建材質波紋效果。 對於Android,可以使用多種材料設計選項,但對於iOS似乎並非如此。 以下是我用作模板填充UICollectioView的自定義單元格:
import UIKit
class PollCell: UICollectionViewCell {
@IBOutlet weak var imageView: UIImageView!
@IBOutlet weak var pollQuestion: UILabel!
}
我在哪里初始化CollectioViewCell:
override func viewDidLoad() {
super.viewDidLoad()
ref = FIRDatabase.database().reference()
prepareMenuButton()
// Uncomment the following line to preserve selection between presentations
// self.clearsSelectionOnViewWillAppear = false
// Register cell classes
self.dataSource = self.collectionView?.bind(to: self.ref.child("Polls")) { collectionView, indexPath, snap in
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: reuseIdentifier, for: indexPath) as! PollCell
//Here is where I am having issues
cell.pulseAnimation
/* populate cell */
cell.pollQuestion.text = snap.childSnapshot(forPath: "question").value as! String?
let urlPollImage = snap.childSnapshot(forPath: "image_URL").value as! String?
cell.imageView.sd_setImage(with: URL(string: urlPollImage!), placeholderImage: UIImage(named: "Fan_Polls_Logo.png"))
//Comment
return cell
}
這是設備上一個單元的圖像:
使用CATransition
func ripple(view:UIView){
let ripple = CATransition()
ripple.type = "rippleEffect"
ripple.duration = 0.5
view.layer.add(ripple, forKey: nil)
}
您可以傳遞任何您想要波動的東西,它會。 例
self.ripple(view: imageView)
或者您可以通過單元格本身進行didselect操作,觸摸開始或您用來觸發紋波的任何方法。
但是根據您告訴我的內容,您想要一個圓形脈沖來覆蓋視圖,因此我嘗試了此操作。 我在評論中加入了一些庫,但在這里您可以快速嘗試一下。
var scaleFactor : CGFloat = 0.6
var animationColor : UIColor = UIColor.green
var animationDuration : Double = 0.4
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {.
super.touchesBegan(touches, with: event)
let coverView = UIView(frame: bounds)
coverView.autoresizingMask = [.flexibleWidth,.flexibleHeight]
coverView.backgroundColor = UIColor.clear
self.addSubview(coverView)
let touch = touches.first!
let point = touch.location(in: self)
let ourTouchView = UIView(frame: CGRect(x: point.x - 5, y: point.y - 5, width: 10, height: 10))
print(ourTouchView)
print(point)
let circleMaskPathInitial = UIBezierPath(ovalIn: ourTouchView.frame)
let radius = max((self.bounds.width * scaleFactor) , (self.bounds.height * scaleFactor))
let circleMaskPathFinal = UIBezierPath(ovalIn: ourTouchView.frame.insetBy(dx: -radius, dy: -radius))
let rippleLayer = CAShapeLayer()
rippleLayer.opacity = 0.4
rippleLayer.fillColor = animationColor.cgColor
rippleLayer.path = circleMaskPathFinal.cgPath
coverView.layer.addSublayer(rippleLayer)
//fade up
let fadeUp = CABasicAnimation(keyPath: "opacity")
fadeUp.beginTime = CACurrentMediaTime()
fadeUp.duration = animationDuration * 0.6
fadeUp.toValue = 0.6
fadeUp.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut)
fadeUp.fillMode = kCAFillModeForwards
fadeUp.isRemovedOnCompletion = false
rippleLayer.add(fadeUp, forKey: nil)
//fade down
let fade = CABasicAnimation(keyPath: "opacity")
fade.beginTime = CACurrentMediaTime() + animationDuration * 0.60
fade.duration = animationDuration * 0.40
fade.toValue = 0
fade.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut)
fade.fillMode = kCAFillModeForwards
fade.isRemovedOnCompletion = false
rippleLayer.add(fade, forKey: nil)
//change path
CATransaction.begin()
let maskLayerAnimation = CABasicAnimation(keyPath: "path")
maskLayerAnimation.fromValue = circleMaskPathInitial.cgPath
maskLayerAnimation.toValue = circleMaskPathFinal.cgPath
maskLayerAnimation.beginTime = CACurrentMediaTime()
maskLayerAnimation.duration = animationDuration
maskLayerAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut)
CATransaction.setCompletionBlock({
coverView.removeFromSuperview()
})
rippleLayer.add(maskLayerAnimation, forKey: "path")
CATransaction.commit()
}
我可能不會在開始觸摸時執行此操作,而是使用輕擊手勢,但是您可以執行此操作。
如果使用Material,則它將具有一個CollectionViewCell
,它內置了脈沖動畫。您可以使用pulseAnimation
屬性進行設置。 希望這可以幫助。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.