Svelte Tutorial 9: Motion (English & Indonesia)

English

Tweened

Tweened is svelte tools to help you build slick user interfaces that use animation to communicate changes. Below is example of progress bar, tweened is used to make transition smoother. easing is even make it more smoother.

<script>
  import {tweened} from 'svelte/motion';
  import {cubicOut} from 'svelte/easing';

  const progress = tweened(0, {
    duration: 400,
    easing: cubicOut
  });
</script>

<style>
  progress { display: block; width: 100%; }
</style>

<progress value={$progress}></progress>
<button on:click="{() => progress.set(0)}"> 0% </button>
<button on:click="{() => progress.set(0.25)}"> 25% </button>
<button on:click="{() => progress.set(0.5)}"> 50% </button>
<button on:click="{() => progress.set(0.75)}"> 75% </button>
<button on:click="{() => progress.set(1)}"> 100% </button>

The full set of options available to tweened:

• delay — milliseconds before the tween starts
• duration — either the duration of the tween in milliseconds, or a (from, to) => milisecons 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

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.

Spring

The spring function is an alternative to tweened that often works better for values that are frequently changing. In this example we have two stores — one representing the circle's coordinates, and one representing its size. Both springs have default stiffness and damping values, which control the spring's, well... springiness. We can specify our own initial values:

<script>
  import { spring } from 'svelte/motion';
  let coords = spring({ x: 50, y: 50 }, {
    stiffness: 0.1,
    damping: 0.25
  })
  let size = spring(10);
</script>

<style>
  svg { width: 100%; height: 100%; margin: -8px; }
  circle { fill: #ff3e00 }
</style>

<div style="position: absolute; right: 1em;">
  <label>
    <h3>stiffness ({coords.stiffness})</h3>
    <input bind:value={coords.stiffness} type="range" min="0" max="1" step="0.01">
  </label>

  <label>
    <h3>damping ({coords.damping})</h3>
    <input bind:value={coords.damping} type="range" min="0" max="1" step="0.01">
  </label>
</div>

<svg
  on:mousemove="{e => coords.set({ x: e.clientX, y: e.clientY })}"
  on:mousedown="{() => size.set(30)}"
  on:mouseup="{() => size.set(10)}"
>
  <circle cx={$coords.x} cy={$coords.y} r={$size}/>
</svg>

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.

Indonesia

Tweened

tweened adalah alat yang disediakan svelte untuk membantu kita membuat user interface yang enak digunakan, yang menggunakan animasi untuk menampilkan suatu perubahan. Dibawah ini adalah contoh program untuk membuat progress bar, tweened digunakan untuk membuat transisi lebih mulus. easing membuatnya makin mulus lagi.

<script>
  import {tweened} from 'svelte/motion';
  import {cubicOut} from 'svelte/easing';

  const progress = tweened(0, {
    duration: 400,
    easing: cubicOut
  });
</script>

<style>
  progress { display: block; width: 100%; }
</style>

<progress value={$progress}></progress>
<button on:click="{() => progress.set(0)}"> 0% </button>
<button on:click="{() => progress.set(0.25)}"> 25% </button>
<button on:click="{() => progress.set(0.5)}"> 50% </button>
<button on:click="{() => progress.set(0.75)}"> 75% </button>
<button on:click="{() => progress.set(1)}"> 100% </button>

Berikut adalah daftar lengkap option yang tersedia untuk tweened:

• delay — milisekon sebelum tween mulai
• duration — antara durasi tween dalam milisekon, atau sebuah fungsi (from, to) => milisecons yang memungkinkan kita untuk (misalnya) mengatur tween yang lebih lama untuk perubahan yang lebih besar
• easing — sebuah fungsi p => t 
• interpolate — sebuah fungsi custom (from, to) => t => value untuk melakukan interpolasi antara nilai arbitari. Secara default, svelte akan melakukaninterpolasi antara angka, tanggal, dan array yang bentuknya identik, dan object (selama hanya mengandung angka dan tanggal atau array yang valid dan object). Jika kita ingin melakukan interpolasi (sebagai contoh) sekumpulan warna atau matriks transformasi, sediakan interpolator custom

Kita juga bisa pass option ini ke  progress.set dan progress.update sebagai argumen kedua, sehingga akan melakukan override untuk nilai default nya. Method set dan update keduanya akan me return promise yang akan resolve ketika tween selesai.

Spring

Fungsi spring adalah alternatif dari tweened yang biasanya akan bekerja lebih baik untuk nilai2 yang sering berubah. Pada contoh berikut kita akan memiliki dua store — satu menandakan koordinat lingkaran, dan satunya menyimpan ukuran lingkaran. spring mempunyai nilai default stiffness dan damping, yang akan mengontrol ke spring an nya.. Kita juga bisa memberikan nilai sendiri:

<script>
  import { spring } from 'svelte/motion';
  let coords = spring({ x: 50, y: 50 }, {
    stiffness: 0.1,
    damping: 0.25
  })
  let size = spring(10);
</script>

<style>
  svg { width: 100%; height: 100%; margin: -8px; }
  circle { fill: #ff3e00 }
</style>

<div style="position: absolute; right: 1em;">
  <label>
    <h3>stiffness ({coords.stiffness})</h3>
    <input bind:value={coords.stiffness} type="range" min="0" max="1" step="0.01">
  </label>

  <label>
    <h3>damping ({coords.damping})</h3>
    <input bind:value={coords.damping} type="range" min="0" max="1" step="0.01">
  </label>
</div>

<svg
  on:mousemove="{e => coords.set({ x: e.clientX, y: e.clientY })}"
  on:mousedown="{() => size.set(30)}"
  on:mouseup="{() => size.set(10)}"
>
  <circle cx={$coords.x} cy={$coords.y} r={$size}/>
</svg>

Goyang-goyangkan mouse, dan cobalah menggeser slider untuk memahami bagaimana mereka mempengaruhi kelakuan spring. Perhatikan bahwa kita juga bisa mengubah efeknya ketika spring masih sedang bergerak.