原文:http://coolketang.com/staticCoding/5a9910fc128fe1189bdb19e1.html
1. 在欢迎窗口右侧的历史项目列表中,双击打开之前创建的单视图项目模板。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/d8ba0149940437a43e50ab245f40bc16.webp?x-image-process=image/format,png)
2. 本节课将为您演示,如何制作翻转动画。首先在一个空白项目中,打开视图控制器的代码文件。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/e2cfa7171dfdbd144e8c291b6033fab6.webp?x-image-process=image/format,png)
3. 接着开始编写代码,实现这项功能。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/74d954f566e439d59b6d3d7f5723662f.webp?x-image-process=image/format,png)
4. 创建一个位置在(50, 50),尺寸为(220, 320)的显示区域。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/9288312dd6854cbc5d4bb0d11a75dac1.webp?x-image-process=image/format,png)
5. 初始化一个图像视图,并设置其位置和尺寸信息。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/7e7229eddc259b9bd11f36cbae5060f1.webp?x-image-process=image/format,png)
6. 从项目资源文件中,加载一张图片。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/d92c8d7e582027f30cdc8c66a22b99e6.webp?x-image-process=image/format,png)
7. 给图像视图指定需要显示的图片。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/4831487ad388cc4db0c1080edbb24231.webp?x-image-process=image/format,png)
8. 设置图像视图的标识值,以方便后期对图像视图的调用。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/5a26e0c42b0a3d4703956ec7c681575f.webp?x-image-process=image/format,png)
9. 将图像视图,添加到当前视图控制器的根视图。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/633c6b32dcc70165277edac3730a1535.webp?x-image-process=image/format,png)
10. 初始化一个按钮对象,当点击按钮时,开始播放动画。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/b68ff0e35602a0d33fedca2e8c86c1eb.webp?x-image-process=image/format,png)
11. 设置按钮对象的位置为(50, 400),尺寸为(220, 44)。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/8dc0838bfdbaf76920e1a1c5cbe3b2e6.webp?x-image-process=image/format,png)
12. 设置按钮对象的背景颜色为浅灰色。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/b5917a7f91b2db2a83d7937245eb2796.webp?x-image-process=image/format,png)
13. 设置按钮对象的标题文字。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/dc0b4641fa7a1ba218cb26e2227c31e0.webp?x-image-process=image/format,png)
14. 给按钮对象,绑定点击事件。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/c05dcdc4c12709e79851dc32b2fc28a0.webp?x-image-process=image/format,png)
15. 将按钮对象,添加到当前视图控制器的根视图。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/dd4248c5e5a51571d717cbb1ac32577c.webp?x-image-process=image/format,png)
16. 然后创建一个方法,用来响应按钮的点击事件。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/32cf64ce460cfe617023770b3e27d331.webp?x-image-process=image/format,png)
17. 发出开始视图动画的请求,标志着视图动画块的开始。在它和提交动画请求之间,可以定义动画的各种展现方式。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/59cc11697d5df51329b047d513aca495.webp?x-image-process=image/format,png)
18. 设置动画的播放速度为淡入淡出。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/02127a8945474bab51b8b86cd6a826c4.webp?x-image-process=image/format,png)
19. 设置动画的时长为5秒。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/67e3ae9760d3d731fa92cfeaa483313f.webp?x-image-process=image/format,png)
20. 设置动画从视图当前状态开始播放。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/5b61593deb75dc314e307ac368c070c5.webp?x-image-process=image/format,png)
21. 接着通过标识值,找到之前创建的图像视图,作为动画的载体。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/e89f3d873a36cf25da2d78e273275ab6.webp?x-image-process=image/format,png)
22. 设置动画类型为翻转动画。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/b3a2a54c319b10726ce85f4cce8e9a4d.webp?x-image-process=image/format,png)
23. 设置视图的目标位置为(50,50),目标尺寸为(0,0)。即视图在进行翻转动画的同时,将移动到目标位置,并缩小至不可见的状态。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/50eae5c5693ac388f5abf149d7df3ef1.webp?x-image-process=image/format,png)
24. 同时设置动画的代理对象,为当前的视图控制器类。当动画结束后,在控制台打印输出日志。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/2213fae4f6217670c9862213a8e8bfeb.webp?x-image-process=image/format,png)
25. 设置动画结束时,执行的方法。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/e9b6690d707b07f2a8a27400fc531c80.webp?x-image-process=image/format,png)
26. 调用视图的提交动画方法,标志着动画块的结束。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/7696510c644a8978e5026e32ec40372b.webp?x-image-process=image/format,png)
27. 创建一个方法,用来响应动画结束事件。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/6d969c0e3de7fd7689f1a70de5da5f58.webp?x-image-process=image/format,png)
28. 当动画结束后,在控制台打印输出日志。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/ac3d525ebc5f5a608d91f169fb30e9e9.webp?x-image-process=image/format,png)
29. 同时将图像视图,从父视图中移除。然后点击[编译并运行]按钮,启动模拟器预览项目。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/536a640a03f8cf3376ca97137c312e93.webp?x-image-process=image/format,png)
30. 点击按钮,开始播放动画。并观察动画播放完毕后,控制台的日志输出。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/e4cc450f344a47e7f481586926060658.webp?x-image-process=image/format,png)
31. 点击[停止]按钮,关闭模拟器,并结束本节课程。
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/dac328a40e81169daad26fdfb9910cf1.webp?x-image-process=image/format,png)
![互动教程 for Xcode9 & Swift4-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/7123b8a24d49cbf1dd1d6aa329d602ff.webp?x-image-process=image/format,png)
本文整理自:《互动教程 for Xcode9 & Swift4》,真正的
[手把手]教学模式,用最快的速度上手iOS开发,苹果商店App Store免费下载:
https://itunes.apple.com/cn/app/id1063100471
,或扫描本页底部的二维码。课程配套素材下载地址:
资料下载
![](https://i-blog.csdnimg.cn/blog_migrate/14e41f97b6d4b51f7bc11081e2a0e101.png)