ios - 如何将圆形动画应用于单元格？

Question

我在每个单元格中都有一个播放按钮，当它被点击时，我希望圆动画将启动并围绕按钮的圆周。我有一个单独的动画 swift 文件，但我不知道如何将它实现到单元格。我该怎么做？下面是单元格中按钮的代码。

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {

    let cell = table.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath) 


    cell.textLabel?.text = ret[indexPath.row]
    cell.textLabel?.font = UIFont(name: "Lombok", size: 22)
    cell.textLabel?.textColor =  UIColorFromRGB("4A90E2")

    let playButton : UIButton = UIButton(type: UIButtonType.Custom)
    playButton.tag = indexPath.row
    let imageret = "playbutton"
    playButton.setImage(UIImage(named: imageret), forState: .Normal)
    playButton.frame = CGRectMake(230, 20, 100, 100)
    playButton.addTarget(self,action: "playit:", forControlEvents: UIControlEvents.TouchUpInside)
    for view: UIView in cell.contentView.subviews {
        view.removeFromSuperview()
    }


    cell.contentView.addSubview(playButton)

    cell.backgroundColor = UIColor.clearColor()

    return cell
}

 func playit(sender: UIButton!){


} 

下面是圆形动画的代码。

import UIKit
class Shape: UIView {

    /*
    // Only override drawRect: if you perform custom drawing.
    // An empty implementation adversely affects performance during animation.
    override func drawRect(rect: CGRect) {
        // Drawing code
    }
    */
    var circleLayer: CAShapeLayer!

    override init(frame: CGRect) {
        super.init(frame: frame)
        self.backgroundColor = UIColor.clearColor()

        // Use UIBezierPath as an easy way to create the CGPath for the layer.
        // The path should be the entire circle.
        let circlePath = UIBezierPath(arcCenter: CGPoint(x: frame.size.width / 2.0, y: frame.size.height / 2.0), radius: (frame.size.width - 10)/2, startAngle: 0.0, endAngle: CGFloat(M_PI * 2.0), clockwise: true)

        // Setup the CAShapeLayer with the path, colors, and line width
        circleLayer = CAShapeLayer()
        circleLayer.path = circlePath.CGPath
        circleLayer.fillColor = UIColor.clearColor().CGColor
        circleLayer.strokeColor = UIColor.redColor().CGColor
        circleLayer.lineWidth = 5.0;

        // Don't draw the circle initially
        circleLayer.strokeEnd = 0.0

        // Add the circleLayer to the view's layer's sublayers
        layer.addSublayer(circleLayer)
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    func animateCircle(duration: NSTimeInterval) {
        // We want to animate the strokeEnd property of the circleLayer
        let animation = CABasicAnimation(keyPath: "strokeEnd")

        // Set the animation duration appropriately
        animation.duration = duration

        // Animate from 0 (no circle) to 1 (full circle)
        animation.fromValue = 0
        animation.toValue = 1

        // Do a linear animation (i.e. the speed of the animation stays the same)
        animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)

        // Set the circleLayer's strokeEnd property to 1.0 now so that it's the
        // right value when the animation ends.
        circleLayer.strokeEnd = 1.0

        // Do the actual animation
        circleLayer.addAnimation(animation, forKey: "animateCircle")
    }

    func addCircleView() {
        let diceRoll = CGFloat(Int(arc4random_uniform(7))*50)
        var circleWidth = CGFloat(200)
        var circleHeight = circleWidth

        // Create a new CircleView
        var circleView = Shape(frame: CGRectMake(diceRoll, 0, circleWidth, circleHeight))

        self.addSubview(circleView)

        // Animate the drawing of the circle over the course of 1 second
        circleView.animateCircle(1.0)
    }

    }

Answer 1

看来您的开端不错。您需要重写您的 cellForRowAtIndexPath 方法，以便它仅在您创建新单元格时添加按钮(如果 dequeueReusableCellWithIdentifier 返回 nil。)

然后您需要在按钮的 IBAction (`playIt') 中添加代码来调用您的动画。

但是，您的动画代码不能使用全局 circleLayer 属性。您需要一种从按钮中获取形状层的方法。您可以创建具有形状层属性的 UIButton 的自定义子类，或者您可以在 IBAction 中循环遍历发送者的子层，寻找形状层。