How to push past the trolls and get the help you need on Stack Overflow
KimCrayton1 🎙
43920

Is StackOverflow the best resource for newbies?

> (StackOverflow) It’s an amazing resource for newbies.

Is it though? It’s a tool and a resource, and it’s better than none. However, I don’t believe it’s the best resource available. At least in some cases. I feel like there are quite a few resource out there, that are quite superior to StackOverflow.

The example I have is based on my experience while learning iOS development, and later as an experienced developer.

Let’s say you’re a beginner in iOS development, and you’re trying to create your first advanced animation. UIKit APIs just don’t cut it, so you’ve decided to use CoreAnimation (please, do, it’s awesome and powerful). So you’ve referred to the documentation (obviously, right?), and you’ve found a way to create a simple animation:

// Version 1, works, sort of:
let moveRight = CABasicAnimation(keyPath: “position.x”)
moveRight.fromValue = 90
moveRight.toValue = 280
moveRight.duration = 2.0
circleLayer.add(moveRight, forKey: “moveRight”)

Looks great, doesn’t it? Here is the effect:

As we can see, the layer animates correctly, but then jumps back to the start position. What’s wrong? How to fix it?

Well, you could do two things.

  • Look it up in the documentation
  • Google it!

Most of us end up googling, and StackOverflow is what pops up. Unfortunately, most answers solve the issue, but are wrong nonetheless.

// Version 2, works, but it’s WRONGG
let moveRight = CABasicAnimation(keyPath: “position.x”)
moveRight.fromValue = 90
moveRight.toValue = 280
moveRight.duration = 2.0

//DON’T COPY THIS, IT’S FOR ILLUSTRATION ONLY
moveRight.isRemovedOnCompletion = false
moveRight.fillMode = kCAFillModeForwards
circleLayer.add(moveRight, forKey: “moveRight”)

Here’s the result:

Correct behavior. The circle stays in its final position

What’s wrong then?

Most answers online will tell you not to remove the animation on completion, which will cause the layer to stay in its final position. But what exactly does this do under the hood? Well, exactly what it says. It keeps the animation around, so it’s always computed in its final state and results in the layer in the final place.

This approach will stop working however, when you try to add other animations or chain them.

So how should you do it?

Firstly, you should refer to the documentation, or WWDC videos. Turns out that CALayer rendering model is slightly different than what we’re used to in games. It uses the concept of a model layer and a presentation layer.

Adding an animation to a layer makes it do exactly that: it animates the layer from fromValue to toValue, and that’s it. When the animation completes, it gets removed, and the object goes back to being displayed in the position of its model layer, and that’s why it jumps back.

So what you should do is you should update the model (without implicit animation, but that’s a different story) along with adding the animation.

// Version 3, correct:
let moveRight = CABasicAnimation(keyPath: “position.x”)
moveRight.fromValue = 100
moveRight.toValue = 400
moveRight.duration = 2.0
circleLayer.add(moveRight, forKey: “moveRight”)
// Disable implicit animation:
CATransaction.begin()
CATransaction.setDisableActions(true)
//Move the model layer:
circleLayer.position.x = 400
CATransaction.commit()

This way, when the animation is removed and the render server goes back to displaying values from the model, it stays in the final position of the animation.

What to do?

My relationship with StackOverflow had its ups and downs. A few situations like that made me doubt and challenge everything I see there.

On the other hand, StackOverflow is undoubtably the easiest place to look for answers to your coding problems. Just use it with caution and remember that everyone can post an answer, which doesn’t mean they know what they’re talking about.

Don’t forget to tap and hold 👏 and to follow DaftMobile Blog (just press “Follow” button below 😅)! You can also find us on Facebook and Twitter 🙂