docs:10-dịch-2-advanced-svelte-motion (sveltevietnam#73)

Author: tymon3568

content/tutorial/02-advanced-svelte/01-motion/01-tweens/README.md

@@ -2,11 +2,12 @@
 title: Tweens
 ---
 
-Now that we've covered the basics, it's time to learn some advanced Svelte techniques, starting with _motion_.
+Sau khi đã đi qua những kiến thức cơ bản, giờ là lúc để ta học đến một số kỹ thuật Svelte nâng cao, bắt đầu với chuyển động _(motion)_.
 
-Setting values and watching the DOM update automatically is cool. Know what's even cooler? Tweening those values. Svelte includes tools to help you build slick user interfaces that use animation to communicate changes.
+Việc đặt giá trị và theo dõi cập nhật DOM tự động là tuyệt vời. Bạn biết cái gì còn tuyệt vời hơn không? Tween (biến đổi) những giá trị đó. Svelte bao gồm các công cụ để giúp bạn xây dựng giao diện người dùng tuyệt vời sử dụng hiệu ứng chuyển động _(animation)_ để truyền đạt các thay đổi.
+
+Hãy bắt đầu bằng cách thay đổi `progress` store thành một giá trị `tweened`:
 
-Let's start by changing the `progress` store to a `tweened` value:
 
 ```svelte
 /// file: App.svelte
@@ -17,7 +18,7 @@ Let's start by changing the `progress` store to a `tweened` value:
 </script>
 ```
 
-Clicking the buttons causes the progress bar to animate to its new value. It's a bit robotic and unsatisfying though. We need to add an easing function:
+Việc nhấp vào các nút khiến thanh tiến trình di chuyển đến giá trị mới của nó. Nó trông không được tự nhiên lắm. Chúng ta cần thêm một hàm easing:
 
 ```svelte
 /// file: App.svelte
@@ -32,13 +33,13 @@ Clicking the buttons causes the progress bar to animate to its new value. It's a
 </script>
 ```
 
-> The `svelte/easing` module contains the [Penner easing equations](https://web.archive.org/web/20190805215728/http://robertpenner.com/easing/), or you can supply your own `p => t` function where `p` and `t` are both values between 0 and 1.
+> Module `svelte/easing` chứa các [phương trình easing Penner](https://web.archive.org/web/20190805215728/http://robertpenner.com/easing/), hoặc bạn có thể tự chỉnh hàm `p => t` với `p` và `t` đều là giá trị giữa 0 và 1.
 
-The full set of options available to `tweened`:
+Tập hợp đầy đủ các tùy chọn sẵn có cho `tweened`:
 
-- `delay` — milliseconds before the tween starts
-- `duration` — either the duration of the tween in milliseconds, or a `(from, to) => milliseconds` function allowing you to (e.g.) specify longer tweens for larger changes in value
-- `easing` — a `p => t` function
-- `interpolate` — a custom `(from, to) => t => value` function for interpolating between arbitrary values. By default, Svelte will interpolate between numbers, dates, and identically-shaped arrays and objects (as long as they only contain numbers and dates or other valid arrays and objects). If you want to interpolate (for example) colour strings or transformation matrices, supply a custom interpolator
+- `delay` — số mili giây trước khi tween bắt đầu
+- `duration` — là thời gian của tween trong mili giây, hoặc là một hàm `(from, to) => mili giây` cho phép bạn chỉ định giá trị tween lâu hơn cho sự thay đổi lớn hơn
+- `easing` — một hàm `p => t`
+- `interpolate` — một hàm `(from, to) => t => value` tùy chỉnh để nội suy giữa các giá trị tùy ý. Theo mặc định, Svelte sẽ nội suy giữa các số, ngày, và mảng có hình dạng giống nhau (miễn là chúng chỉ chứa số và ngày hoặc các mảng và đối tượng hợp lệ khác). Ví dụ nếu bạn muốn nội suy các chuỗi màu hoặc ma trận biến đổi, thì hãy cung cấp một hàm nội suy tùy chỉnh
 
-You can also pass these options to `progress.set` and `progress.update` as a second argument, in which case they will override the defaults. The `set` and `update` methods both return a promise that resolves when the tween completes.
+Bạn cũng có thể chuyển các tùy chọn này vào `progress.set` và `progress.update` như là một đối số thứ hai, trong trường hợp đó chúng sẽ ghi đè lên các giá trị mặc định. Cả hai phương thức `set` và `update` đều trả về một promise để giải quyết khi tween hoàn thành.

content/tutorial/02-advanced-svelte/01-motion/02-springs/README.md

@@ -2,9 +2,9 @@
 title: Springs
 ---
 
-The `spring` function is an alternative to `tweened` that often works better for values that are frequently changing.
+Hàm `spring` là một lựa chọn thay thế cho `tweened` mà thường hoạt động tốt hơn cho các giá trị thay đổi thường xuyên.
 
-In this example we have two stores — one representing the circle's coordinates, and one representing its size. Let's convert them to springs:
+Trong ví dụ này, chúng ta có hai stores — một đại diện cho tọa độ của hình tròn, và một đại diện cho kích thước của nó. Hãy chuyển chúng thành springs:
 
 ```svelte
 /// file: App.svelte
@@ -16,7 +16,7 @@ In this example we have two stores — one representing the circle's coordinates
 </script>
 ```
 
-Both springs have default `stiffness` and `damping` values, which control the spring's, well... springiness. We can specify our own initial values:
+Cả hai spring đều có giá trị mặc định `stiffness` và `damping`, điều này kiểm soát độ mượt mà của spring. Chúng ta có thể chỉ định giá trị ban đầu của chúng:
 
 ```js
 /// file: App.svelte
@@ -26,4 +26,4 @@ let coords = spring({ x: 50, y: 50 }, +++{
 }+++);
 ```
 
-Waggle your mouse around, and try dragging the sliders to get a feel for how they affect the spring's behaviour. Notice that you can adjust the values while the spring is still in motion.
+Vung chuột của bạn xung quanh và thử kéo các thanh trượt để cảm nhận cách chúng ảnh hưởng đến hành vi của spring. Lưu ý, bạn có thể điều chỉnh các giá trị trong khi spring vẫn đang chuyển động.