translate 03-advanced-svelte/01-motion into Japanese

Author: tomoam

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

@@ -2,11 +2,11 @@
 title: Tweens
 ---
 
-Now that we've covered the basics of SvelteKit, it's time to learn some advanced Svelte techniques, starting with _motion_.
+SvelteKit の基本を学習したので、次は Svelte の高度なテクニックを学ぶ時間です。まずは  _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.
+値を設定して DOM が自動的に更新されるのを見るのは最高です。もっと最高なのは？それらの値を *トゥイーン* することです。Svelte には、変化を伝えるためにアニメーションを使用するスムーズなユーザーインターフェースを構築するためのツールが含まれています。
 
-Let's start by changing the `progress` store to a `tweened` value:
+まず `progress` ストアを `tweened` 値に変更してみましょう。
 
 ```svelte
 <script>
@@ -16,7 +16,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:
+ボタンをクリックすると、プログレスバーが新しい値にアニメーションします。しかし、これは少し機械的で満足感がありません。イージング機能を追加する必要があります。
 
 ```svelte
 <script>
@@ -30,13 +30,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.
+> `svelte/easing` モジュールには [Penner easing equations](https://web.archive.org/web/20190805215728/http://robertpenner.com/easing/) が含まれています、あるいは `p` と `t` の両方が 0 から 1 の間の値を取る独自の `p => t` 関数を指定することもできます。
 
-The full set of options available to `tweened`:
+`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` — トゥイーン開始までのミリ秒
+* `duration` — ミリ秒単位のトゥイーンの持続時間、または(例えば値の変化が大きい場合に、より長いトゥイーンを指定出来るようにするための）`(from, to) => milliseconds` 関数
+* `easing` — `p => t` 関数
+* `interpolate` — 任意の値の間を補間するための自前の `(from, to) => t => value` 関数。デフォルトでは、Svelte は数値や日付、同じ形の配列やオブジェクトの間を補間します (数値や日付、その他の有効な配列やオブジェクトのみを含む場合に限ります)。(例えば) 色文字列や変換行列を補間したい場合は、自前の関数を指定してください。
 
-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.
+これらのオプションを `progress.set` や `progress.update` に第2引数として渡すこともでき、どちらの場合もデフォルトを上書きします。`set` と `update`メソッドは、いずれもトゥイーンが完了した時点で resolve する promise を返します。

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

@@ -1,10 +1,10 @@
 ---
-title: Springs
+title: Spring
 ---
 
-The `spring` function is an alternative to `tweened` that often works better for values that are frequently changing.
+関数 `spring` は `tweened` の代替であり、頻繁に変化する値に対してよりよく機能することが多いです。
 
-In this example we have two stores — one representing the circle's coordinates, and one representing its size. Let's convert them to springs:
+この例では、2つのストアがあります。1つは円の座標を表し、もう1つはサイズを表します。それらをスプリングに変換してみましょう。
 
 ```svelte
 <script>
@@ -15,7 +15,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:
+両方のスプリングは、デフォルトの `stiffness` と `damping` の値を持っています。これはスプリングの、まあ…スプリング性を制御するものです。私達は、自分の初期値を指定することができます。
 
 ```js
 let coords = spring({ x: 50, y: 50 }, +++{
@@ -24,4 +24,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.
+マウスを振り回して、スライダーをドラッグしてみて、スプリングの動作にどのように影響するかを感じてみてください。スプリングがまだ動いている間に値を調整することができることに注目してください。