UICollectionViewセルのマテリアルリップル効果

Question

UICollectioViewセルのマテリアルリップルエフェクトを作成しようとしています。 Androidの場合、そうするためのいくつかの重要なデザインオプションがありますが、iOSの場合はそうではないようです。以下は、私がUICollectioViewを移入するためにプロトタイプとして使用しています私のカスタムセルである：私はCollectioViewCell初期化

import UIKit 

class PollCell: UICollectionViewCell { 


    @IBOutlet weak var imageView: UIImageView! 

    @IBOutlet weak var pollQuestion: UILabel! 

} 

：ここ

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 
    } 

は、デバイス上の細胞の一つの画像です：

Answer 1

Materialを使用する場合は、パルスアニメーションが組み込まれたCollectionViewCellがあります。pulseAnimationプロパティで設定できます。お役に立てれば。

Answer 2

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、touchまたはリップルをトリガするために使用しているものに渡すこともできます。

しかし、あなたが私に言っていることに基づいて、循環パルスが視野をカバーしたいので、これを試しました。私はいくつかの図書館をコメントに入れましたが、ここではあなたが望んでいるものを簡単に試してみます。

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() 
    } 

私はおそらく始まったタッチでこれを実行しないと、代わりにタップジェスチャーを使用していますがこれを行うことができます。