Preamble

Hello everyone, today I’m going to show you a simple way to create motion effects in Swift. To start the demo, please download the images I used here.

Start

Now we will start writing the necessary functions into our view controller.

Storyboard

Here we will add to the storyboard the background and add two UIImageViews to display the Doraemon cat image. We will initially create a UIImageView that sets its contraint to zero to create a full screen background image of our phone.

Next we will create a UIImageView to display the Doraemon image and we continue to set its contraint so that our image will be on the left side of the screen.

Next we will create a UIImageView to display the Doraemon image and we continue to set its contraint so that our image will be on the right side of the screen.

Finally we will get a Storyboard like this.

Create the required values

Create two Outlet variables to link to the two doraemon shapes on our storyboard side.

Here we will create variables to get the current size of our screen. Save the screen’s length and width to two variables outside of the ViewController so that the screen sizes can be accessed elsewhere.

We will call this function in viewWillAppear because if we call this function inside viewDidLoad it will not get the actual length and width of our current screen, but it will only get the size of the screen is on the StoryBoard.

• viewDidLoad is called after the View Controller has loaded the hierarchy into memory from the XIB or the Storyboard.
• viewWillAppear is called to report that viewController is ready to be displayed on the screen so get the screen size here.

Write functions for motion

The first function will be the one that allows the doraemon to move from right to left. Then I will hide the doraemon on the right. Just to show the picture on the left. This will set the center of this right image to the right corner.

It will then call the faceBugRight function to display this right doraemon and keep changing the center point of the image from the width of the screen to 0 so that it returns to the left corner of the screen. Then continue to call moveBugRight function again. So our doraemon image on the right can move from right to left. Then hide it and return to its original point. We’ll adjust the position of the photo through UIView’s Center guy.

• Center: The center point is defined in points in its super view’s coordinate system. Setting this property will update the origin of the rectangle in the frame properties appropriately. Use this property, instead of the frame property, when you want to change the position of a view. The center point is always valid, even when scaling or rotating factors are applied for the view. Changes to this property can be made Animation.

In the center settings, we will put it in UIView.animate, set the duration for it to 5 for slow motion images.

• curveEaseInOut Specifies an easy-to-enter curve that causes animations to start slowly, accelerate to mid-duration, and then slow down before completion.
• allowUserInteraction Allows the user to interact with the views as they are animated.

We will continue to write the motion function for the figure on the left. Similar to the above two functions, initially we will also hide the doraemon image on the left. Then we will reset the X of the left image to 0 so that the image returns to its default position on the left corner of the screen.

After the set is completed, at completion we call the faceBugLeft function. In this function we will reset the X of the image to the width of the screen so that our image can move from left to right. Then hide and go back from right to left.

We will then call these functions we wrote inside the viewDidLoad function. Initially we will reset the center for the two shapes so that the point y is in the center of the screen. And call the moveBugLeft () and moveBugRight () functions to get the animation to start running.

Congratulations on coming here and you have created a simple demo animation.