Chuyển tiếp và hoạt ảnh trong Svelte là gì?

Chuyển tiếp và hoạt ảnh có thể cải thiện trải nghiệm người dùng khi lướt web. Svelte sẽ giúp bạn dễ dàng kết hợp hai yếu tố này. Dưới đây là hướng dẫn chi tiết.

Thiết lập dự án Svelte

Để khởi tạo và chạy với Svelte, bạn cần đảm bảo rằng runtime Node.js và Node Package Manager (NPM) đã được cài đúng cách trên máy tính. Mở terminal và chạy lệnh sau:

/svelte-transition-animation/

Điều này sẽ tạo ra một dự án Vite.js mới. Đặt tên cho dự án, chọn Svelte làm framework, và đặt biến sang JavaScript. Sau đó chuyển sang danh mục dự án và chạy lệnh sau để cài các phần phụ thuộc cần thiết:

npm install

Loại bỏ code soạn sẵn bằng cách xóa thư mục assets và lib, nội dung trong file App.svelte và App.css.

Cách dùng Tweening trong Svelte

Tweening là một kỹ thuật trong hiệu ứng động và đồ họa máy tính tạo các khung trung gian giữa các khung chính nhằm tạo ra chuyển động hay chuyển tiếp mượt mà và chân thực. Svelte cung cấp một tiện ích tweened, cho phép bạn tạo hiệu ứng động cho các thành phần bằng các giá trị số, khiến việc tạo chuyển tiếp và hoạt ảnh mượt mà trong ứng dụng web của bạn trở nên đơn giản.

Tiện ích tweened là một phần của mô đun svelte/motion. Để dùng tweened trong thành phần của bạn, bạn phải nhập nó như thế này:

import { tweened } from 'svelte/motion'

Bên trong, tiện ích tweened chỉ là một cửa hàng Svelte có thể viết. Về cơ bản, một cửa hàng Svelte là một đối tượng JavaScript mà bạn có thể dùng để xử lý quản lý trạng thái. Cửa hàng tweened có hai phương thức tên: set và update. Ở cấp độ cơ bản, cú pháp cho cửa hàng tweened trông như sau:

const y = tweened(defaultValue, {
    duration: [time-in-milliseconds],
    easing: [easing-function],
})

Khối code trên xác định một biến y và liên kết nó với một cửa hàng tweened. Trong cửa hàng này, bạn có hai tham số. Đầu tiên đại diện cho giá trị mặc định mà liên kết y phải có. Tiếp theo là đối tượng với hai khóa duration và easing. Duration xác định thời gian tween kéo dài theo mili giây, còn easing xác định hàm gia tốc.

Các hàm gia tốc trong Svelte xác định hành vi của tween. Những hàm này là một phần của mô đun svelte/easing. Điều đó có nghĩa bạn phải nhập một hàm cụ thể từ mô đun trước khi có thể chuyển nó vào cửa hàng tweened. Svelte có một công cụ trực quan hóa easing mà bạn có thể dùng để khám phá hành vi của các hàm gia tốc khác nhau.

Để minh họa đầy đủ cách bạn có thể dùng tiện ích tweened, đây là ví dụ dùng cửa hàng tweened để tăng kích thước của một phần tử trong Svelte.

<script>
  import { tweened } from "svelte/motion";
  import { bounceOut } from "svelte/easing";

  const size = tweened(0, {
    easing:bounceOut
  })
</script>

<div class="container">
  <div style={`height: ${$size * 30}px;`}>
  </div>
</div>
<button on:click={()=>(size.update(()=>$size+3))}>Increase size</button>

<style>
  .container{
    display: flex;
    align-items: flex-end;
    margin-top: 400px;
  }
  div{
    height:0;
    width:100px;
    background-color: red;
  }
</style>

Khối code trên nhập hai hàm: tweened và bounceOut từ mô đun svelte/motion và svelte/easing tương ứng. Tiếp theo, có một biến không đổi được liên kết với store tweened. Cửa hàng này có giá trị mặc định là 0. Giá trị mặc định có thể được truy cập bằng biểu tượng $. Tham số tiếp theo trong hàm tweened là một đối tượng với khóa easing trỏ tới hàm gia tốc bounceOut.

Trong phần đánh dấu, thành phần button có một lệnh on:click gọi phương thức update trên liên kết size. Phương thức này tăng giá trị store $size lên 3 bất kỳ lúc nào bạn click vào nút bấm. Thành phần div có một kiểu nội tuyến phụ thuộc vào giá trị store $size. Khi chạy code này trong trình duyệt, đây là kết quả bạn sẽ thấy:

Chuyển tiếp trong Svelte

Để chuyển tiếp các phần tử ra và ngoài Document Object Model (DOM), Svelte có một lệnh transition và mô đun tên svelte/transition mà xuất các hàm hữu ích cho bạn dùng với lệnh transition. Ví dụ, để làm mờ một phần tử trong và ngoài DOM, đầu tiên, nhập hàm blur từ svelte/transition:

<script>
import { blur } from 'svelte/transition';
</script>

Sau đó, thêm chức năng gắn và bỏ gắn một phần tử từ DOM. Trong tag script, tạo biến visible và đặt nó sang false.

<script>
import { blur } from 'svelte/transition';
let visible = false;
</script>

Tiếp theo dùng if-block để hiện div có điều kiện. Đảm bảo bạn thêm lệnh transition trên div và đặt nó sang blur.

{#if visible}
<div>Here I am...</div>
{/if}

Sau đó, thêm nút bấm để hiện hoặc ẩn div.

<button on:click={()=>visible=!visible}>
{visible ? "Hide" : "Show"}
</button>

Khi chạy code này trong trình duyệt, bạn sẽ thấy:

Mô đun svelte/transition xuất 7 hàm tên: fade, blur, fly, slide, scale, draw và crossfade. Chuyển tiếp trong Svelte có thể chấp nhận các tham số. Ví dụ, hàm blur từ ví dụ ban đầu có thể chấp nhận các tham số sau: delay, duration, easing, opacity và amount.

Ngoài các tham số khi chuyển tiếp, Svelte cũng cung cấp chuyển tiếp in và out cho bạn quyền kiểm soát chuyển tiếp thành phần tốt hơn. Xem xét ví dụ gần nhất, điều gì sẽ xảy ra nếu bạn muốn chuyển tiếp vào của phần tử là blur, còn ra là slide? Đây là cách bạn làm điều đó:

<script>
  import { blur, slide } from 'svelte/transition';
  let visible = false;
  </script>

{#if visible}
<div in:blur out:slide>Here I am...</div>
{/if}

<button on:click={()=>visible=!visible}>
  {visible ? "Hide" : "Show"}
  </button>

Trong khối code trên, lưu ý rằng không có lệnh transition trên phần tử div. Thay vào đó, lệnh transition đã được thay bằng in và out, lần lượt trỏ tới blur và slide.

Hiệu ứng động cho các phần tử Svelte

Cách thuận tiện nhất là tạo hiệu ứng động cho các phần thành trong Svelte là bằng cách dùng hàm flip từ svelte/animate. Flip là chữ viết tắt của "First, Last, Invert, Play". Nó chấp nhận 3 tham số: delay, duration và easing. Hãy nhìn vào code sau:

<script>
  import { flip } from "svelte/animate";
  let originalList = ["Tomatoes", "Bread", "Fish", "Milk", "Cat food"];
  let shoppingList = [...originalList];
</script>

<div class="container">
  {#each shoppingList as item (item)}
    {@const number = shoppingList.indexOf(item)}
    <div animate:flip>
      {number + 1}. {item}
    </div>
  {/each}
</div>

<button on:click={() => shoppingList = shoppingList.sort()}>Arrange</button>
<button on:click={() => shoppingList = [...originalList]}>Reset</button>

Khối code này minh họa cách bạn có thể dùng lệnh animate trong Svelte. Ở tag script, dòng đầu tiên nhập hàm flip. Ở đây có hai mảng: originalList và shoppingList. Trong div “container”, khối keyed-each chịu trách nhiệm hiện mỗi thành phần trong mảng shoppingList.

Div con của div “container" có một lệnh animate trỏ tới hàm flip. Nhấn nút đầu tiên sẽ phân loại danh sách theo thứ tự bảng chữ cái, còn nhấn nút thứ hai thiết lập lại danh sách. Khi chạy code này trong trình duyệt, đây là điều bạn sẽ thấy:

Trên đây là mọi điều bạn cần biết về chuyển tiếp và tạo hiệu ứng động trong Svelte. Hi vọng bài viết hữu ích với các bạn.