UIView deforms when it is animated to another position

Question

Im having a really stupid problem with a UIView. I create the UIView programatically and then make it a circle by making the corner radius half the height of the view looks like this:

But when I try to animate the circle to a different location it becomes all deformed like this:

Here is the code I am using to animate the view just a simple UIView.animateWithDuration:

UIView.animateWithDuration(2, delay: 0, options: UIViewAnimationOptions.AllowUserInteraction, animations: {
                    self.secondDot.frame.origin = CGPoint(x: self.view.frame.size.width - self.secondDot.frame.size.width, y: 0)
                    self.secondDot.frame.size = self.secondDot.frame.size
                    }, completion: nil)

I should also add that the circle doesn't always become deformed but more often than not it does. Please help any suggestions would be much appreciated.

EDIT: I should mention that the circle is in motion already before the UIView.animationWithDuration occurs I don't know if that could be a problem

Answer 1

What is the point of this line?

self.secondDot.frame.size = self.secondDot.frame.size

You either

1. want to resize the circle uniformly while moving
2. or not.

If case 1) the the newSize.width != newSize.height...but thats a problem because your circle is not a "square" anymore behind the scenes. If case 2) just remove the lines.

Answer 2

I had exactely the same situation.

After some research, I've found comment in header file for setFrame method

// animatable. do not use frame if view is transformed since it will not correctly reflect the actual location of the view. use bounds + center instead.

I have decided to use setCenter instead of setFrame which solved the distortion issue.