用 SwiftUI 实现 3D Scroll 效果 (#6921)

* 更新测试 * Revert "更新测试" This reverts commit afb007d. * 初译完成 * 8 个值得了解的树形数据结构 (#6804) * 8个值得了解的树形数据结构 8个值得了解的树形数据结构 * Update 8-Useful-Tree-Data-Structures-Worth-Knowing.md * Update 8-useful-tree-data-structures-worth-knowing.md Co-authored-by: sun <[email protected]> * 眼动跟踪和移动世界的最佳用户体验实践 (#6806) * 眼动跟踪和移动世界的最佳用户体验实践翻译完成 * 眼动跟踪和移动世界的最佳用户体验实践 #6806 谢谢指点~@xionglong58 @fanyijihua 根据第一轮校对意见修改完成 * 眼动追踪和移动世界的最佳用户体验实践 * 眼动追踪和移动世界的最佳用户体验实践 * 我并不讨厌箭头函数(#6610) (#6659) * 我并不讨厌箭头函数(#6610) * 我并不讨厌箭头函数(#6610) - 根据校对结果修改 * Update i-dont-hate-arrow-functions.md Co-authored-by: 小添 <[email protected]> Co-authored-by: sun <[email protected]> * 掌握 JavaScript 面试：什么是纯函数？ (#6828) * 掌握 JavaScript 面试：什么是纯函数？掌握 JavaScript 面试：什么是纯函数？ * Update master-the-javascript-interview-what-is-a-pure-function.md * Update master-the-javascript-interview-what-is-a-pure-function.md * Update master-the-javascript-interview-what-is-a-pure-function.md * Update master-the-javascript-interview-what-is-a-pure-function.md * Update master-the-javascript-interview-what-is-a-pure-function.md * Update master-the-javascript-interview-what-is-a-pure-function.md * Update master-the-javascript-interview-what-is-a-pure-function.md Co-authored-by: lsvih <[email protected]> * fix:文章翻译问题 (#6833) * 用依赖注入来解耦你的代码 (#6823) * translate(*): Part.1 * translate(*): Part.2 * translate(*): 完成翻译 * fix(*): 完成校对 * Create generator-functions-in-javascript.md (#6841) * Create generator-functions-in-javascript.md * Update generator-functions-in-javascript.md * Create how-to-keep-your-dependencies-secure-and-up-to-date.md (#6843) * Create how-to-keep-your-dependencies-secure-and-up-to-date.md * Update how-to-keep-your-dependencies-secure-and-up-to-date.md * Create deep-dive-into-react-fiber-internals.md (#6845) * Create deep-dive-into-react-fiber-internals.md * Update deep-dive-into-react-fiber-internals.md * Update deep-dive-into-react-fiber-internals.md * Update deep-dive-into-react-fiber-internals.md * Create how-can-cloud-services-help-improve-your-businessess-efficiency.md (#6847) * Create how-can-cloud-services-help-improve-your-businessess-efficiency.md * Update how-can-cloud-services-help-improve-your-businessess-efficiency.md * Create should-you-learn-vim-as-a-developer-in-2020.md (#6849) * Go 发布新版 Protobuf API (#6827) * Achieve translation * 8 个值得了解的树形数据结构 (#6804) * 8个值得了解的树形数据结构 8个值得了解的树形数据结构 * Update 8-Useful-Tree-Data-Structures-Worth-Knowing.md * Update 8-useful-tree-data-structures-worth-knowing.md Co-authored-by: sun <[email protected]> * 眼动跟踪和移动世界的最佳用户体验实践 (#6806) * 眼动跟踪和移动世界的最佳用户体验实践翻译完成 * 眼动跟踪和移动世界的最佳用户体验实践 #6806 谢谢指点~@xionglong58 @fanyijihua 根据第一轮校对意见修改完成 * 眼动追踪和移动世界的最佳用户体验实践 * 眼动追踪和移动世界的最佳用户体验实践 * 我并不讨厌箭头函数(#6610) (#6659) * 我并不讨厌箭头函数(#6610) * 我并不讨厌箭头函数(#6610) - 根据校对结果修改 * Update i-dont-hate-arrow-functions.md Co-authored-by: 小添 <[email protected]> Co-authored-by: sun <[email protected]> * 掌握 JavaScript 面试：什么是纯函数？ (#6828) * 掌握 JavaScript 面试：什么是纯函数？掌握 JavaScript 面试：什么是纯函数？ * Update master-the-javascript-interview-what-is-a-pure-function.md * Update master-the-javascript-interview-what-is-a-pure-function.md * Update master-the-javascript-interview-what-is-a-pure-function.md * Update master-the-javascript-interview-what-is-a-pure-function.md * Update master-the-javascript-interview-what-is-a-pure-function.md * Update master-the-javascript-interview-what-is-a-pure-function.md * Update master-the-javascript-interview-what-is-a-pure-function.md Co-authored-by: lsvih <[email protected]> * Address comments Co-authored-by: Amberlin1970 <[email protected]> Co-authored-by: sun <[email protected]> Co-authored-by: Charlo <[email protected]> Co-authored-by: TiaossuP <[email protected]> Co-authored-by: 小添 <[email protected]> Co-authored-by: niayyy <[email protected]> Co-authored-by: lsvih <[email protected]> * JSON.stringify() 的 5 个秘密特性 (#6793) * Update 5-secret-features-of-json-stringify.md * Update 5-secret-features-of-json-stringify.md * Update 5-secret-features-of-json-stringify.md * Update 5-secret-features-of-json-stringify.md * Create high-speed-inserts-with-mysql.md (#6853) * Create high-speed-inserts-with-mysql.md * Update high-speed-inserts-with-mysql.md * 组合软件：书 (#6832) * Update composing-software-the-book.md * Update composing-software-the-book.md * Create 6-best-javascript-frameworks-in-2020.md (#6861) * Create 6-best-javascript-frameworks-in-2020.md * Update 6-best-javascript-frameworks-in-2020.md * Update 6-best-javascript-frameworks-in-2020.md * 2020 年用各大前端框架构建的 RealWorld 应用对比 (#6851) * translation complete * Update a-realworld-comparison-of-front-end-frameworks-2020.md 按照建议修改完成 * Update a-realworld-comparison-of-front-end-frameworks-2020.md 又修改了下破折号的格式 * Update a-realworld-comparison-of-front-end-frameworks-2020.md 修改了二级标题的显示问题 * Update a-realworld-comparison-of-front-end-frameworks-2020.md 添加相关个人信息 * Update a-realworld-comparison-of-front-end-frameworks-2020.md Co-authored-by: lsvih <[email protected]> * Create the-importance-of-why-docs.md (#6868) * Create the-importance-of-why-docs.md * Update the-importance-of-why-docs.md * 不变性之道 (#6857) * Update the-dao-of-immutability.md * Update the-dao-of-immutability.md * Update the-dao-of-immutability.md * Update the-dao-of-immutability.md * Update the-dao-of-immutability.md * Update the-dao-of-immutability.md Co-authored-by: lsvih <[email protected]> * Create polymorphic-react-components.md (#6870) * Create polymorphic-react-components.md * Update polymorphic-react-components.md * Update polymorphic-react-components.md * Update polymorphic-react-components.md * Create active-learning-in-machine-learning.md (#6872) * Create kafka-vs-rabbitmq-why-use-kafka.md (#6874) * Create kafka-vs-rabbitmq-why-use-kafka.md * Update kafka-vs-rabbitmq-why-use-kafka.md * Create i-built-an-app-that-uses-all-7-new-features-in-javascript-es2020.md (#6876) * Create i-built-an-app-that-uses-all-7-new-features-in-javascript-es2020.md * Update i-built-an-app-that-uses-all-7-new-features-in-javascript-es2020.md * Update i-built-an-app-that-uses-all-7-new-features-in-javascript-es2020.md * Update i-built-an-app-that-uses-all-7-new-features-in-javascript-es2020.md * 云服务如何帮助你提高业务效率？ (#6859) * Update how-can-cloud-services-help-improve-your-businessess-efficiency.md * Update how-can-cloud-services-help-improve-your-businessess-efficiency.md: revise according to proofreading suggestions * Update how-can-cloud-services-help-improve-your-businessess-efficiency.md: revise according to Yinjias proofreading suggestions * NestJS 实现基本用户认证和会话 (#6731) * NestJS 实现基本用户认证和会话 NestJS 实现基本用户认证和会话 * fix：修改 NestJS 实现基本用户认证和会话根据校对者意见，修改 NestJS 实现基本用户认证和会话 * Update nestjs-basic-auth-and-sessions.md Co-authored-by: lsvih <[email protected]> * 作为 2020 年的开发者，你应该学习 VIM 吗？ (#6856) * 更新测试 * Revert "更新测试" This reverts commit afb007d. * 作为2020年的开发者，你应该学习 VIM 吗？ * 校对更新 * 第二次校对修改 * 第三次校对修改 * Update TODO1/should-you-learn-vim-as-a-developer-in-2020.md 数字格式调整 Co-Authored-By: lsvih <[email protected]> * Update TODO1/should-you-learn-vim-as-a-developer-in-2020.md 标题数字格式调整 Co-Authored-By: lsvih <[email protected]> * 增加校对者名单 * 调整行数 * Update should-you-learn-vim-as-a-developer-in-2020.md Co-authored-by: lsvih <[email protected]> * MySQL 最佳实践—— 高效插入数据 (#6863) * Finish translation * Addressed comments * 添加校对者信息 * Remove content with english * Create combine-getting-started.md (#6883) * Create combine-getting-started.md * Update combine-getting-started.md * Update combine-getting-started.md * Create how-to-be-a-good-remote-developer.md (#6885) * Create why-is-object-immutability-important.md (#6887) * Create why-is-object-immutability-important.md * Update why-is-object-immutability-important.md * Create what-on-earth-is-the-shadow-dom-and-why-it-matters.md * 2020 年排名前 6 位的 JavaScript 框架 (#6867) * Update 6-best-javascript-frameworks-in-2020.md: Complete translation * Update 6-best-javascript-frameworks-in-2020.md: revise according to 钱俊颖s and niayyys proofreading suggestions * Update 6-best-javascript-frameworks-in-2020.md: add proofreaders' information * JavaScript 风格元素 (#6878) * JavaScript 风格元素 JavaScript 风格元素 * 翻译修改 * 修改标点符号 * 增加校对者信息 Co-authored-by: lsvih <[email protected]> * 怎样让依赖库保持安全和最新 (#6864) * 更新测试 * Revert "更新测试" This reverts commit afb007d. * 怎样让依赖库保持安全和最新 * 第一次校对提交(part) * Create 5-best-practices-to-prevent-git-leaks.md (#6894) * Create 5-best-practices-to-prevent-git-leaks.md * Update 5-best-practices-to-prevent-git-leaks.md * Create swiftui-3d-scroll-effect.md (#6896) * Create swiftui-3d-scroll-effect.md * Update swiftui-3d-scroll-effect.md * Web 应用程序中的数据和 UI 分离 (#6794) * Update separation-of-data-and-ui-in-your-web-app.md * Update separation-of-data-and-ui-in-your-web-app.md * fix:typo (#6903) * Update TODO1/swiftui-3d-scroll-effect.md Co-Authored-By: lsvih <[email protected]> * Update TODO1/swiftui-3d-scroll-effect.md Co-Authored-By: lsvih <[email protected]> * Update TODO1/swiftui-3d-scroll-effect.md Co-Authored-By: lsvih <[email protected]> * Update TODO1/swiftui-3d-scroll-effect.md Co-Authored-By: lsvih <[email protected]> * 更新校对者 Co-authored-by: Amberlin1970 <[email protected]> Co-authored-by: sun <[email protected]> Co-authored-by: Charlo <[email protected]> Co-authored-by: TiaossuP <[email protected]> Co-authored-by: 小添 <[email protected]> Co-authored-by: niayyy <[email protected]> Co-authored-by: lsvih <[email protected]> Co-authored-by: zoomdong <[email protected]> Co-authored-by: 江不知 <[email protected]> Co-authored-by: 司徒公子 <[email protected]> Co-authored-by: jianhang <[email protected]> Co-authored-by: Roc <[email protected]> Co-authored-by: Jessica <[email protected]> Co-authored-by: Amy <[email protected]>
xitu · Apr 22, 2020 · f4010a2 · f4010a2
1 parent 8486468
commit f4010a2
Showing 1 changed file with 26 additions and 26 deletions.
diff --git a/TODO1/swiftui-3d-scroll-effect.md b/TODO1/swiftui-3d-scroll-effect.md
@@ -2,18 +2,18 @@
 > * 原文作者：[Jean-Marc Boullianne](https://medium.com/@jboullianne)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 本文永久链接：[https://github.com/xitu/gold-miner/blob/master/TODO1/swiftui-3d-scroll-effect.md](https://github.com/xitu/gold-miner/blob/master/TODO1/swiftui-3d-scroll-effect.md)
-> * 译者：
-> * 校对者：
+> * 译者：[chaingangway](https://github.com/chaingangway)
+> * 校对者：[lsvih](https://github.com/lsvih)
 
-# SwiftUI 3D Scroll Effect
+# 用 SwiftUI 实现 3D Scroll 效果
 
 ![Finished 3D Scroll Effect](https://cdn-images-1.medium.com/max/2000/0*pYnR4ym84WIZk3tf.gif)
 
-Here’s a look at the kind of 3D scroll effect we’ll be making today. At the end of this tutorial, you’ll be able to add this 3D effect to any custom SwiftUI view in your app. Let’s get started!
+我们预览下今天要实现的 3D scroll 效果。学完本教程后，你就可以在你的 App 中把这种 3D 效果加入任何自定义的 SwiftUI 视图。下面我们来开始本教程的学习。
 
-## Getting Started
+## 入门
 
-Start by creating a new SwiftUI View. For example purposes, I’ll be showing a list of rectangles in different colors, so I named my view `ColorList`.
+首先，创建一个新的 SwiftUI 视图。为了举例说明，在这个新视图中，我会展示一个有各种颜色的矩形列表，并把新视图命名为 `ColorList`。
 
 ```swift
 import SwiftUI
@@ -31,17 +31,17 @@ struct ColorList_Previews: PreviewProvider {
 }
 ```
 
-## Color Data
+## 颜色数据
 
-At the top of your view struct, add a variable for keeping track of colors.
+在视图的结构体里，添加一个用于记录颜色的变量。
 
 ```swift
 var colors: [Colors]
 ```
 
-## Making the List
+## 实现这个列表
 
-Inside your `body` variable, get rid of the placeholder `Text`. Add in a `HStack` wrapping in a `ScrollView` like this.
+在 `body` 变量的内部，删除掉占位 `Text`。在 `ScrollView` 嵌套中添加一个 `HStack`，如下：
 
 ```swift
 var body: some View {
@@ -53,9 +53,9 @@ var body: some View {
 }
 ```
 
-## Show the Rectangles
+## 展示矩形
 
-Inside your `HStack` we need to show a `Rectangle` for each color stored in `colors`. For this we'll use a `ForEach`. I've gone ahead and modified the frame for the rectangle to something more relatable to a traditional UI Card.
+我们使用 `ForEach` 在 `HStack` 内部根据 `colors` 中的数据分别创建不同颜色的矩形。此外，我修改了矩形的 frame，让它看起来与传统 UI 布局更像一些。
 
 ```swift
 var body: some View {
@@ -71,7 +71,7 @@ var body: some View {
 }
 ```
 
-And if you go ahead and provide the preview struct with a list of colors like this:
+在 Preview 结构体中传入如下的颜色参数：
 
 ```swift
 struct ColorList_Previews: PreviewProvider {
@@ -81,13 +81,13 @@ struct ColorList_Previews: PreviewProvider {
 }
 ```
 
-You should see this!
+你可以看到下图中的效果：
 
 ![](https://cdn-images-1.medium.com/max/2000/0*NfpStvbJHfMO2Tqq.png)
 
-## Adding the 3D Effect
+## 增加 3D 效果
 
-Start by wrapping your `Rectangle` in a `GeometryReader`. This will allow us to grab a reference to the frame of the `Rectangle` as it moves across the screen.
+首先，把 `Rectangle` 嵌套在 `GeometryReader` 中。这样的话，当 `Rectangle` 在屏幕上移动的时候，我们就可以获得其 frame 的引用。
 
 ```swift
 var body: some View {
@@ -105,27 +105,27 @@ var body: some View {
 }
 ```
 
-You will need to change the `HStack` spacing you defined above, due to the way `GeometryReader` works.
+根据 `GeometryReader` 的用法要求，我们需要修改上面定义的 `HStack` 的 spacing 属性。
 
-Then add this line to your `Rectangle`
+在 `Rectangle` 中加入下面这行代码。
 
 ```swift
 .rotation3DEffect(Angle(degrees: (Double(geometry.frame(in: .global).minX) - 210) / -20), axis: (x: 0, y: 1.0, z: 0))
 ```
 
-The `Angle` you're passing into the function is changing as the `Rectangle` moves across the screen. Take a particular look at the `.frame(in:)` function. It allows you to grab the `CGRect` of the `Rectangle` and uses its `minX` coordinate for angle calculations.
+当 `Rectangle` 在屏幕上移动时，这个方法的 `Angle` 参数会发生改变。请重点看 `.frame(in:)` 这个函数，你可以获取 `Rectangle` 的 `CGRect` 属性 `minX` 变量来计算角度。
 
-The `axis` parameter is a Tuple that details which axis to modify using the angle you just passed in. In this case it's the Y-axis.
+`axis` 参数是一个元组类型，它定义了在使用你传入的角度参数时，哪一个坐标轴要发生改变。在本例中，是 Y 轴。
 
-> The documentation for the rotation3DEffect() can be found [here](https://developer.apple.com/documentation/swiftui/scrollview/3287538-rotation3deffect) on Apple’s Official Website.
+> rotation3DEffect() 方法的文档可以在苹果官方网站的 [这里](https://developer.apple.com/documentation/swiftui/scrollview/3287538-rotation3deffect) 找到。
 
-If you go ahead and run the example you should see your `Rectangles` rotating as they move across the screen!
+下一步，把这个案例跑起来。当矩形在屏幕上移动时，你可以看到它们在旋转。
 
-> I’ve also modified the corner radius of the rectangle as well as added a drop shadow to make it look a little better.
+> 我还修改了矩形的 cornerRadius 属性，并加上了投影效果，让它更美观。
 
 ![Pretty cool right!?](https://cdn-images-1.medium.com/max/2000/0*IidRWGBSe936-9Ls.gif)
 
-## Final Product
+## 最终效果
 
 ```swift
 struct ColorList: View {
@@ -151,9 +151,9 @@ struct ColorList: View {
 }
 ```
 
-## That’s all Folks!
+## 结束
 
-If you enjoyed this post, please consider subscribing to my website using this [link](https://trailingclosure.com/signup/), and if you aren’t reading this on [TrailingClosure.com](https://trailingclosure.com/), please come check us out sometime!
+如果您喜欢这篇文章，可以用这个 [链接](https://trailingclosure.com/signup/) 订阅我们的网站。如果您不是在 [TrailingClosure.com](https://trailingclosure.com/) 阅读本文，以后也可以来这个网站看看。
 
 > 如果发现译文存在错误或其他需要改进的地方，欢迎到 [掘金翻译计划](https://github.com/xitu/gold-miner) 对译文进行修改并 PR，也可获得相应奖励积分。文章开头的 **本文永久链接** 即为本文在 GitHub 上的 MarkDown 链接。