Animation: continuous heartbeat monitor lines

Question

I have an image of what symbolises a heartbeat

heartbeat

and I'm trying to loop it in my subview so it continuously appears on my view if you understand what i mean. So far I have got it to appear and move across infinitely on my subview however it isn't continuous as it only appears again from the left after it has completely gone out of the view on the right where as I want it to appear again as soon as it has completely entered the view so it symbolises an actual heartbeat. My code looks something like this on my viewDidLoad:

self.heartbeatLoading.frame.origin = CGPoint(x: 0 - heartbeatLoading.frame.size.width, y: 10)    
let animation: UIViewAnimationOptions = [.repeat, .curveLinear]

UIView.animate(withDuration: 5.0, delay: 0, options: animation, animations: {
        self.heartbeatLoading.frame = self.heartbeatLoading.frame.offsetBy(dx: self.view.frame.width + self.heartbeatLoading.frame.width, dy: 0.0)
}, completion: nil)

can you show your heartbeat image and screenshot of your animations? — Jasmeet Kaur, Apr 12 '17 at 00:06
i have added a screenshot, you can see that the heartbeat is disappearing from the uiview as its suppose to but i want another instance of it to follow straight after so it doesn't look like its two different instances of the same image — Umar Yaqub, Apr 12 '17 at 21:39

score 0 · Accepted Answer · answered Jan 18 '18 at 07:34

Take one UIView and set this class as a super view. Call start animation and stop the animation whenever required.

@IBDesignable class Pulse : UIView
{
    var animatingView : UIView?
    @IBInspectable  var pulseImage: UIImage =  UIImage(named: "defaultImage")!{
        didSet {
                animatingView = UIView(frame: self.bounds)
                let imgView = UIImageView(frame : self.bounds)
                animatingView?.clipsToBounds = true
                animatingView?.addSubview(imgView)
                self.addSubview(animatingView!)
        }
    }
    func startAnimationWith(duration : Double = 0.5)
    {
        if animatingView != nil
        {
            animatingView?.frame = CGRect(x: 0, y: 0, width: 0, height: (animatingView?.frame.size.height)!)
            UIView.animate(withDuration: duration, delay: 0, options: .repeat, animations: {
                self.animatingView?.frame = CGRect(x: 0, y: 0, width: (self.animatingView?.frame.size.width)!, height: (self.animatingView?.frame.size.height)!)
            }, completion: { (isDone) in

            })
        }
    }
    func stopAnimation()
    {
        if animatingView != nil
        {
            self.animatingView!.layer.removeAllAnimations()
        }
    }
    override init(frame : CGRect) {
        super.init(frame : frame)
    }
    convenience init() {
        self.init(frame:CGRect.zero)
    }
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }
}

Animation: continuous heartbeat monitor lines

1 Answers1