Tìm hiểu về chuyển tiếp và hoạt ảnh trong Svelte
Khi được thực hiện tốt, hoạt ảnh có thể cải thiện trải nghiệm người dùng và có thể là một cách tuyệt vời để gửi phản hồi cho người dùng. Svelte giúp bạn dễ dàng kết hợp hoạt ảnh và chuyển tiếp trong ứng dụng của mình mà không cần nhiều đến thư viện JavaScript của bên thứ ba.
Thiết lập một dự án mảnh dẻ
Để bắt đầu sử dụng Svelte, điều cần thiết là phải đảm bảo rằng cả môi trường thời gian chạy Node.js và Trình quản lý gói Node (NPM), tạo điều kiện cài đặt gói cho các ứng dụng JavaScript, đều được cài đặt đầy đủ trên thiết bị máy tính của bạn. Để bắt đầu quá trình thiết lập, vui lòng mở cửa sổ terminal và thực hiện lệnh sau:
npm create vite
đầu tiên, đặt tên cho dự án của bạn và sau đó chọn Svelte làm khung ưa thích. Tiếp theo, định cấu hình nó để sử dụng JavaScript bằng cách chọn tùy chọn thích hợp trong quá trình cài đặt. Sau đó, điều hướng đến thư mục gốc của dự án và thực hiện các lệnh cài đặt phụ thuộc cần thiết trên thiết bị đầu cuối hoặc dấu nhắc lệnh.
npm install
Nhiệm vụ này yêu cầu loại bỏ mã dư thừa khỏi dự án bằng cách xóa các thư mục “assets” và “lib”, xóa nội dung trong các tệp “App.svelte” và “App.css”.
Cách sử dụng Tweening trong Svelte
Tweening đề cập đến một phương pháp được sử dụng trong cả hoạt hình và đồ họa máy tính, bao gồm việc tạo các khung trung gian giữa hai khung hình chính để tạo ra các chuyển động hoặc biến đổi liền mạch và trông tự nhiên. Khung Svelte cung cấp một phương tiện hiệu quả để sử dụng kỹ thuật này bằng cách sử dụng các giá trị số cho các phần tử hoạt hình, từ đó tạo điều kiện thuận lợi cho việc tạo ra các chuyển đổi mượt mà và phản hồi nhanh trong các ứng dụng web.
Tiện ích Tweened thuộc mô-đun Svelte/Motion và có thể được tích hợp vào các thành phần bằng câu lệnh nhập tuân theo cú pháp đã chỉ định.
import { tweened } from 'svelte/motion'
Tiện ích tweened trong Svelte hoạt động như một cửa hàng có thể ghi có thể tùy chỉnh, cho phép người dùng quản lý trạng thái ứng dụng của họ một cách hiệu quả. Tiện ích này bao gồm hai phương thức chính là “đặt” và “cập nhật”, cho phép các nhà phát triển thao tác dữ liệu một cách hiệu quả. Về cơ bản, cửa hàng tweened có dạng đối tượng JavaScript, cung cấp phương tiện có thể truy cập để giám sát và kiểm soát sự phát triển của nội dung động trong ứng dụng.
const y = tweened(defaultValue, {
duration: [time-in-milliseconds],
easing: [easing-function],
})
giá trị ban đầu của phần tử liên kết được biểu thị bằng tham số đầu tiên, đóng vai trò là cài đặt mặc định cho liên kết y; và một đối tượng bao gồm hai thuộc tính, đó là thời lượng''và nới lỏng `. Cái trước chỉ định khoảng thời gian tính bằng mili giây mà tween sẽ tồn tại, trong khi cái sau chỉ định chức năng giảm bớt được áp dụng trong quá trình hoạt ảnh.
Các chức năng nới lỏng trong lĩnh vực Svelte thiết lập quy trình cho quá trình chuyển đổi và chúng được bao quanh bởi mô-đun nới lỏng/svelte. Do đó, người ta phải nhập một chức năng cụ thể từ miền này để kết hợp nó vào kho lưu trữ được Tweened. Khung Svelte trình bày một trình trực quan hóa việc nới lỏng, cho phép người dùng điều tra các mô hình hành vi được thể hiện bằng các chức năng nới lỏng khác nhau.
Để thể hiện một cách hiệu quả khả năng của tiện ích tween trong môi trường Svelte, hãy xem xét trường hợp sau trong đó chúng tôi sử dụng cửa hàng tween để tăng dần kích thước của một thành phần trên màn hình.
<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>
Mã nhập hai hàm, tweened và bounceOut , nằm trong các mô-đun Svelte tương ứng svelte/motion và svelte/easing. Sau đó, một biến không đổi được xác định và liên kết với cửa hàng tweened , có giá trị mặc định được biểu thị bằng this.$options.animate=true; . Giá trị mặc định này có thể được truy cập bằng ký hiệu $ . Cuối cùng, hàm tweened chấp nhận một đối số bổ sung, một đối tượng chứa thuộc tính easing tham chiếu đến hàm bounceOut easing do mô-đun svelte/easing cung cấp.
Phân đoạn đánh dấu chứa thành phần nút có thuộc tính onclick gọi phương thức cập nhật liên kết kích thước. Khi nhấp vào nút, phương thức cập nhật sẽ tăng biến lưu trữ có kích thước ký hiệu đô la lên ba. Ngoài ra, phần tử div sở hữu kiểu nội tuyến được điều chỉnh bởi giá trị lưu trữ kích thước ký hiệu đô la. Khi được thực thi trong trình duyệt web, người dùng sẽ quan sát phần trình bày trực quan sau:
Chuyển tiếp trong Svelte
Để tạo điều kiện thuận lợi cho quá trình kết hợp và loại bỏ các thành phần trong Mô hình đối tượng tài liệu (DOM) trong Svelte, nó sử dụng một lệnh được gọi là lệnh “transition” cùng với một mô-đun chuyên dụng có tên là “svelte/transition”. Mô-đun này cung cấp một loạt các chức năng thực tế có thể được sử dụng cùng với chỉ thị “chuyển tiếp” cho nhiều mục đích khác nhau. Để minh họa, người ta có thể sử dụng chức năng “làm mờ” được nhập từ mô-đun “mảnh dẻ/chuyển tiếp” để tạo hiệu ứng mờ dần hoặc mờ dần trên một phần tử khi nó đi vào hoặc thoát khỏi DOM.
<script>
import { blur } from 'svelte/transition';
</script>
Để triển khai khả năng gắn kết và ngắt kết nối các phần tử khỏi Mô hình đối tượng tài liệu (DOM), trước tiên hãy giới thiệu cờ boolean làm thuộc tính tập lệnh ban đầu được đặt thành false. Điều này sẽ phục vụ như một chỉ báo hiển thị cho phần tử trên trang. Bằng cách sử dụng tính năng này, các nhà phát triển có thể quản lý hiệu quả tương tác mã của họ với DOM bằng cách chuyển đổi chế độ hiển thị của các phần tử cụ thể trong thời gian chạy.
<script>
import { blur } from 'svelte/transition';
let visible = false;
</script>
Chắc chắn, đây là một ví dụ về cách đạt được điều này trong Vue.js bằng cách sử dụng lệnh v-if:html xuất mặc định {data() {return {isBlur: false//đặt giá trị ban đầu chỉ nhằm mục đích trình diễn};},computed: {/** định nghĩa các lớp CSS tùy chỉnh dựa trên prop isBlur */get BlurClass() {return isBlur ?‘mơ hồ’:’’;}}};
{#if visible}
<div>Here I am...</div>
{/if}
Kết hợp đoạn mã được cung cấp trong tệp HTML và đưa đoạn mã đó vào nội dung trang web của bạn. Mã sẽ hiển thị một đoạn có nút chuyển đổi chế độ hiển thị của phần tử div chứa thông tin bổ sung về sản phẩm.
<button on:click={()=>visible=!visible}>
{visible ? "Hide" : "Show"}
</button>
Khi thực thi mã trong môi trường trình duyệt web, dự kiến sẽ có phần trình bày trực quan sau đây:
làm mờ, làm mờ, bay, trượt, chia tỷ lệ, vẽ và làm mờ. Các chuyển đổi này có khả năng tùy chỉnh cao và có thể được định cấu hình với nhiều thông số khác nhau, chẳng hạn như độ trễ, thời lượng, mức giảm, độ mờ và số lượng, mỗi lần dùng để nâng cao hoặc sửa đổi hiệu ứng của chúng cho phù hợp.
Chắc chắn! Còn điều này thì sao? Ngoài việc kiểm soát các chuyển đổi dựa trên các thuộc tính như enter hoặc exit , Svelte còn cung cấp một cách tiếp cận chi tiết hơn thông qua các chuyển đổi in và out. Ví dụ: hãy xem xét ví dụ trước của chúng tôi trong đó chúng tôi muốn phần tử có hiệu ứng làm mờ khi vào và hiệu ứng trượt khi rời khỏi. Chúng ta có thể đạt được điều này bằng cách sử dụng các chuyển đổi thích hợp như sau:
<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 đoạn mã nói trên, điều đáng chú ý là lệnh chuyển đổi không có trong phần tử div. Thay vào đó, hai chuyển đổi đã được chỉ định bằng kỹ thuật khung hình chính, cụ thể là “làm mờ” và “trượt”, được trỏ đến bởi thuộc tính “từ” và “đến” của quy tắc @keyframe tương ứng của chúng.
Hoạt hình các yếu tố mảnh dẻ
Đầu tiên, Cuối cùng, Đảo ngược, Chơi. Nó bao gồm ba đối số quan trọng-độ trễ, thời lượng và giảm tốc-là những yếu tố cơ bản để tạo ra hiệu ứng hình ảnh quyến rũ trong quá trình hoạt hình. Để minh họa chức năng của nó, hãy xem xét đoạn mã ví dụ 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>
Đoạn mã được cung cấp minh họa cách triển khai lệnh animate trong ứng dụng Svelte. Trong thẻ , quá trình nhập ban đầu của hàm flip được thực thi. Hai mảng riêng biệt, cụ thể là originList và shoplist , được xác định. Trong thành phần div kèm theo có chứa thuộc tính lớp của "container" và thuộc tính ID của "containerID" , khối keyed-each dùng để hiển thị từng mục từ mảng danh sách mua sắm.
Cấu trúc HTML cho vùng chứa và phần tử con của nó như sau:html Đặt lại sắp xếp AZ Khi mã được thực thi trong trình duyệt web, nó sẽ hiển thị ba phần tử được mô tả ở trên. Phần tử con div của"container"div chứa lệnh hoạt ảnh ( data-animate ) kích hoạt hàm flip khi được gọi.
Tại sao Hoạt ảnh lại quan trọng trong bất kỳ ứng dụng web nào?
Hoạt hình có chiều sâu vượt xa sức hấp dẫn trực quan đơn thuần; chúng bao gồm cốt lõi của việc sàng lọc trải nghiệm người dùng và cách thể hiện mạch lạc. Thông qua sự kết hợp đầy nghệ thuật giữa hình thức và chức năng, hoạt hình truyền sức sống vào các giao diện kỹ thuật số, biến chúng từ tĩnh sang tương tác và trực quan.