IOS development: an example of Affine Transformation

IOS development: an example of Affine Transformation

This blog is simple but practical. The example is still implemented using Swift3.0. This blog is an introduction to the next blog, because we will introduce some Extension commonly used in iOS application development using Swift. In these Extension, the Image Extension will use the affine transform to process the Image. Therefore, this blog will first take a separate look at fang radiation Transformation (CGAffineTransform), so that the next blog will be able to reduce the introduction to the affine transformation.

In our previous blog, we talked about affine transformations, but they are just animations implemented using radiation transformations, for more information about this part, see iOS development of various animated page section effects. The previous blog mainly talked about CATransition, and the main content of this blog is CGAffineTransform. Of course, the content of this blog is still based on relevant examples. The source code of this example will be shared on github, and the source code sharing link at the end of the blog is github. Although the Code and examples in today's blog are relatively simple, it is necessary to introduce them separately.

 

I. Translation

Next, let's take a look at the CGAffineTransform translation. When using CGAffineTransform for translation, we should pay attention to the transformation of the coordinate system. Below is the coordinate system for UI layout, that is, the coordinate system for iOS screen. The upper left corner is the origin, the right X axis is positive, the left is negative, the Y axis is negative, and the bottom is positive. Below is the iPhone's screen coordinate system. The bottom coordinate system structure is used for translation.

 

Below is the effect of Image view translation. Use two Slider to control the left-side movement and the left-side movement. The running effect is as follows.

　　

The code for controlling the translation is also relatively simple, as shown below. If the value of x is positive, it moves to the right. If the value of x is negative, it moves to the left. When the parameter y is a timing parameter, it moves downward. If y is a negative value, it moves upward. The Code is as follows:

 

Ii. Scaling

After talking about translation, let's take a look at the scaling of the affine transform. Using CGAffineTransform for View scaling is also relatively simple. below is the running effect of Image View scaling. The zooming process is divided into zooming in the x direction and zooming in the y direction. X and y represent the multiples of scaling on the x and y axes respectively. If x or y is a negative number, flip the corresponding view and scale it. The running effect is as follows.

　　

The above results are also relatively simple. The code is shown in the following line. x indicates the scale on the x axis, and y indicates the scale on the y axis.

　　

 

 

Iii. Rotation

Next, let's talk about the rotation of CGAffineTransform and go straight to the topic. below is the running result of rotation. The rotation is based on the radians, and the circle is 0-2 degrees. If the radians are positive, the rotation is clockwise. If the radians are negative, the rotation is counter-clockwise. The specific running result is as follows:

　　

The code for implementing the above results is also relatively simple. The specific code is as follows:

　　

 

The content of this blog is complete. below is the github source code sharing link for the Demo involved in this blog.

Github share link: https://github.com/lizelu/CGAffineTransformDemo