Animate UIView using pop animation while waiting Alamofire request finishes

Question

I am trying to animate a custom button using Facebooks POP framework. The animation does not happen until the request is done using Alamofire.

What I want to do is make the request and during the waiting process animate the button.

The code below visually works, but it does the request after the animation finishes.

 func animate(tappedView:UIView){

    let rotation = POPBasicAnimation(propertyNamed: kPOPLayerRotationX)
    rotation.duration = 2.0
    rotation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
    tappedView.layer.anchorPoint = CGPointMake(0.5, 0.5)
    rotation.toValue = 3*M_PI


    let scaleUp = POPBasicAnimation(propertyNamed: kPOPLayerSize)
    scaleUp.duration = 0.5
    scaleUp.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseIn)
    tappedView.layer.anchorPoint = CGPointMake(0.5, 0.5)
    let size = CGSizeMake(tappedView.frame.size.width ,tappedView.frame.size.height)
    let scaledSize = CGSizeMake(size.width * 1.5, size.height * 1.5)
    scaleUp.toValue = NSValue(CGSize: scaledSize)


    let scaleDown = POPSpringAnimation(propertyNamed: kPOPLayerSize)
    scaleDown.beginTime  = CACurrentMediaTime() + 0.5
    scaleDown.toValue = NSValue(CGSize: size)
    scaleDown.springSpeed = 4
    scaleDown.springBounciness = 8

    scaleDown.completionBlock = { (anim:POPAnimation!, finished:Bool) -> Void in

        let requestURL = self.prepare4SQrequest(withLocation: self.currentLocation)
        let request = Alamofire.request(.GET, requestURL)
        request.responseJSON{ response in
         HANDLE REQUEST RESPONSE LOGIC
    }


    tappedView.layer.pop_addAnimation(rotation, forKey: "popRotationX")
    tappedView.layer.pop_addAnimation(scaleUp, forKey: "popScaleUp")
    tappedView.layer.pop_addAnimation(scaleDown, forKey: "popScaleD")

}

I tried to make use of Alamofire's request.progress but it did not work. In this version the animation starts when the request logic finishes.

func animate(tappedView:UIView){

    let rotation = POPBasicAnimation(propertyNamed: kPOPLayerRotationX)
    rotation.duration = 2.0
    rotation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
    tappedView.layer.anchorPoint = CGPointMake(0.5, 0.5)
    rotation.toValue = 3*M_PI


    let scaleUp = POPBasicAnimation(propertyNamed: kPOPLayerSize)
    scaleUp.duration = 0.5
    scaleUp.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseIn)
    tappedView.layer.anchorPoint = CGPointMake(0.5, 0.5)
    let size = CGSizeMake(tappedView.frame.size.width ,tappedView.frame.size.height)
    let scaledSize = CGSizeMake(size.width * 1.5, size.height * 1.5)
    scaleUp.toValue = NSValue(CGSize: scaledSize)


    let scaleDown = POPSpringAnimation(propertyNamed: kPOPLayerSize)
    scaleDown.beginTime  = CACurrentMediaTime() + 0.5
    scaleDown.toValue = NSValue(CGSize: size)
    scaleDown.springSpeed = 4
    scaleDown.springBounciness = 8


    tappedView.layer.pop_addAnimation(rotation, forKey: "popRotationX")
    tappedView.layer.pop_addAnimation(scaleUp, forKey: "popScaleUp")
    tappedView.layer.pop_addAnimation(scaleDown, forKey: "popScaleD")

}


func buttonTapped(gesture:UIGestureRecognizer){

    let tappedView:UIView = gesture.view!
    switch (tappedView.tag)
    {
    case 1:

        let requestURL = prepare4SQrequest(withLocation: currentLocation)
        let request = Alamofire.request(.GET, requestURL)
        request.progress({bytesRead, totalBytesRead, totalBytesExpectedToRead in
            dispatch_async(dispatch_get_main_queue()) {
                print("Total bytes to read : \(totalBytesExpectedToRead)")
                print("Total bytes read \(totalBytesRead)")
                print("Bytes read \(bytesRead)")
                self.animate(tappedView)
            }
        } )
        request.responseJSON{ response in

          HANDLE REQUEST RESPONSE LOGIC

        }

        break
      }

Any help would be appricieted.

Thank you

66o · Accepted Answer · 2015-11-22T22:10:22.757

0

Your buttonTapped function should look like this

func buttonTapped(gesture:UIGestureRecognizer) {
  // 1 do your setup and switch case
  // 2 first ask alamofire to send request
  Alamofire.request(.GET, requestURL).
  responseJSON {
    response in
    // handle response here
    stopAnimation()
  }
  // 3 call your animation
  animate(tappedView)
}

Now if you put a breakpoint on animate(tappedView) and code that handles json response you will see that your debugger will stop at animate first, then after a while will stop at response code. Alamofire has multithreading logic built in so you ask it to fetch you something from network and then it executes code you passed in the closure to .response whenever it's ready.

Hope that helps!

edited Nov 22 '15 at 22:10

answered Nov 22 '15 at 18:50

66o

756
5
10

Yeah that helped. Actually it is the first code block I posted, but I placed the animate before the request which I think it is the same with what you said. Am I right ? But I don't think that this way I can link the duration of the animation with the request time am I ? – Deniz Oztreves Nov 22 '15 at 20:11
yeah, I didn't get what you were trying to achieve the first time. In that case you need another method *cancelAnimation* that you will call as first thing in your alamofire callback. I've modified my response to reflect that. – 66o Nov 22 '15 at 22:09
Thank you @66o, your last answer was perfect. – Deniz Oztreves Nov 28 '15 at 13:58

Animate UIView using pop animation while waiting Alamofire request finishes

1 Answers1