How do I apply the circle animation to the cell? - ios

Question

I have a play button in each cell, and when it is clicked I want the circle animation will initiate and circle the circumference of the button. I have a separate swift file for the animation, but I do not know how to implement that to the cell. How would I do that? Below is the code for the button in the cell.
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!){
}
Below is the code to the circle animation.
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

It looks like you're off to a good start. You need to rewrite your cellForRowAtIndexPath method so it only adds the button if you are creating a new cell (if dequeueReusableCellWithIdentifier returns nil.)
Then you need to add code in your button's IBAction (`playIt') that invokes your animation.
However, your animation code can't use a global circleLayer property. You need a way to fetch the shape layer from the button. You could create a custom subclass of UIButton that has a shape layer property, or you could loop through sender's sublayers in the IBAction, looking for a shape layer.