ทำความเข้าใจเกี่ยวกับการเปลี่ยนภาพและภาพเคลื่อนไหวใน Svelte

เมื่อทำได้ดี แอนิเมชันสามารถปรับปรุงประสบการณ์ผู้ใช้และเป็นวิธีที่ดีในการส่งคำติชมให้กับผู้ใช้ Svelte ช่วยให้คุณสามารถรวมภาพเคลื่อนไหวและการเปลี่ยนภาพในแอปพลิเคชันของคุณได้อย่างง่ายดายโดยไม่จำเป็นต้องใช้ไลบรารี JavaScript ของบุคคลที่สาม

การจัดตั้งโครงการ Svelte

ในการเริ่มใช้ Svelte จำเป็นอย่างยิ่งที่จะต้องแน่ใจว่าทั้งสภาพแวดล้อมรันไทม์ Node.js และ Node Package Manager (NPM) ซึ่งอำนวยความสะดวกในการติดตั้งแพ็คเกจสำหรับแอปพลิเคชัน JavaScript ได้รับการติดตั้งอย่างเพียงพอบนอุปกรณ์คอมพิวเตอร์ของคุณ เพื่อเริ่มกระบวนการตั้งค่า โปรดเปิดหน้าต่างเทอร์มินัลแล้วดำเนินการคำสั่งต่อไปนี้:

 npm create vite

ขั้นแรก ตั้งชื่อโปรเจ็กต์ของคุณ จากนั้นเลือก Svelte เป็นเฟรมเวิร์กที่ต้องการ จากนั้นกำหนดค่าให้ใช้ JavaScript โดยเลือกตัวเลือกที่เหมาะสมในกระบวนการติดตั้ง หลังจากนั้น นำทางไปยังโฟลเดอร์รูทของโปรเจ็กต์ และดำเนินการคำสั่งการติดตั้งการพึ่งพาที่จำเป็นบนเทอร์มินัลหรือพรอมต์คำสั่ง

 npm install

งานนี้จำเป็นต้องกำจัดโค้ดที่ซ้ำซ้อนออกจากโปรเจ็กต์โดยกำจัดไดเร็กทอรี “assets” และ “lib” และล้างเนื้อหาภายในไฟล์ “App.svelte” และ “App.css”

วิธีใช้ Tweening ใน Svelte

Tweening หมายถึงวิธีการที่ใช้ในทั้งแอนิเมชั่นและคอมพิวเตอร์กราฟิก ซึ่งเกี่ยวข้องกับการสร้างเฟรมตัวกลางระหว่างสองคีย์เฟรมเพื่อสร้างการเคลื่อนไหวหรือการเปลี่ยนแปลงที่ดูเป็นธรรมชาติและราบรื่น กรอบงาน Svelte มอบวิธีการที่มีประสิทธิภาพในการใช้เทคนิคนี้โดยการใช้ค่าตัวเลขสำหรับองค์ประกอบภาพเคลื่อนไหว ซึ่งจะช่วยอำนวยความสะดวกในการสร้างการเปลี่ยนผ่านที่ราบรื่นและตอบสนองภายในเว็บแอปพลิเคชัน

ยูทิลิตี้ Tweened เป็นของโมดูล Svelte/Motion และสามารถรวมเข้ากับส่วนประกอบต่างๆ ได้โดยใช้คำสั่งนำเข้าที่ยึดตามไวยากรณ์ที่ระบุ

 import { tweened } from 'svelte/motion'

ยูทิลิตี้ทวีนใน Svelte ทำหน้าที่เป็นร้านค้าที่เขียนได้ซึ่งปรับแต่งได้ ซึ่งช่วยให้ผู้ใช้สามารถจัดการสถานะของแอปพลิเคชันได้อย่างมีประสิทธิภาพ ยูทิลิตี้นี้ประกอบด้วยสองวิธีหลัก ได้แก่"ตั้งค่า"และ"อัปเดต"ซึ่งช่วยให้นักพัฒนาสามารถจัดการข้อมูลได้อย่างมีประสิทธิภาพ โดยพื้นฐานแล้ว ร้านค้าทวีนจะอยู่ในรูปแบบของอ็อบเจ็กต์ JavaScript ซึ่งเป็นวิธีการที่เข้าถึงได้เพื่อดูแลและควบคุมวิวัฒนาการของเนื้อหาไดนามิกภายในแอปพลิเคชัน

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

ค่าเริ่มต้นขององค์ประกอบที่ถูกผูกไว้ซึ่งแสดงโดยพารามิเตอร์แรก ซึ่งทำหน้าที่เป็นการตั้งค่าเริ่มต้นสำหรับการเชื่อมโยง y และออบเจ็กต์ที่ประกอบด้วยคุณสมบัติสองประการ ได้แก่ Duration และ Ease แบบแรกระบุช่วงเวลาเป็นมิลลิวินาทีที่ Tween ยังคงอยู่ ในขณะที่แบบหลังกำหนดฟังก์ชันการค่อยๆ เปลี่ยนที่จะใช้ในระหว่างกระบวนการแอนิเมชัน

ฟังก์ชันการค่อยๆ เปลี่ยนภายในขอบเขตของ Svelte จะกำหนดแนวทางปฏิบัติสำหรับการเปลี่ยนแปลง และถูกรวมไว้ด้วยโมดูล svelte/easing ด้วยเหตุนี้ เราจึงต้องนำเข้าฟังก์ชันเฉพาะจากโดเมนนี้เพื่อรวมเข้ากับที่เก็บทวีน กรอบงาน Svelte นำเสนอเครื่องมือสร้างภาพการค่อยๆ เปลี่ยน ซึ่งช่วยให้ผู้ใช้สามารถตรวจสอบรูปแบบพฤติกรรมที่แสดงโดยฟังก์ชันการค่อยๆ เปลี่ยนต่างๆ

ในการสาธิตความสามารถของยูทิลิตี้ tween ภายในสภาพแวดล้อม Svelte ได้อย่างมีประสิทธิภาพ ให้พิจารณาตัวอย่างต่อไปนี้ที่เราใช้ที่เก็บ’tween ` เพื่อขยายขนาดขององค์ประกอบบนหน้าจอแบบค่อยเป็นค่อยไป

 <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>

โค้ดนำเข้าสองฟังก์ชัน tweened และ BounceOut ซึ่งอยู่ภายในโมดูล Svelte ตามลำดับ svelte/motion และ svelte/easing ต่อจากนั้น ตัวแปรคงที่จะถูกกำหนดและเชื่อมโยงกับร้านค้า ทวีน ซึ่งค่าเริ่มต้นจะแสดงด้วย this.$options.animate=true;. ค่าเริ่มต้นนี้สามารถเข้าถึงได้โดยใช้สัญลักษณ์ $ สุดท้ายนี้ ฟังก์ชัน ทวีน ยอมรับอาร์กิวเมนต์เพิ่มเติม ซึ่งเป็นออบเจ็กต์ที่มีคุณสมบัติ การค่อยๆ เปลี่ยน ที่อ้างอิงถึงฟังก์ชันการค่อยๆ คลาย BounceOut ที่ได้รับจากโมดูล svelte/easing

ส่วนมาร์กอัปประกอบด้วยองค์ประกอบปุ่มที่มีแอตทริบิวต์ onclick ที่เรียกใช้วิธีการอัปเดตของการเชื่อมโยงขนาด เมื่อคลิกปุ่ม วิธีการอัพเดตจะเพิ่มตัวแปรการจัดเก็บขนาดเครื่องหมายดอลลาร์ขึ้นสามเท่า นอกจากนี้ องค์ประกอบ div ยังมีรูปแบบอินไลน์ที่ควบคุมโดยมูลค่าการจัดเก็บขนาดเครื่องหมายดอลลาร์ เมื่อดำเนินการภายในเว็บเบราว์เซอร์ ผู้ใช้จะสังเกตเห็นการนำเสนอด้วยภาพต่อไปนี้:

ผ่าน GIPHY

การเปลี่ยนผ่านใน Svelte

เพื่ออำนวยความสะดวกในกระบวนการรวมและลบองค์ประกอบภายใน Document Object Model (DOM) ใน Svelte จึงใช้คำสั่งที่เรียกว่าคำสั่ง"การเปลี่ยนแปลง"ร่วมกับโมดูลเฉพาะที่ชื่อว่า"svelte/transition"โมดูลนี้มีฟังก์ชันที่ใช้งานได้จริงมากมายซึ่งสามารถใช้ร่วมกับคำสั่ง"การเปลี่ยนผ่าน"เพื่อวัตถุประสงค์ต่างๆ ได้ ตามภาพประกอบ เราอาจใช้ฟังก์ชัน"blur"ที่นำเข้าจากโมดูล"svelte/transition"เพื่อสร้างเอฟเฟกต์แบบเฟดเข้าหรือเฟดเอาท์บนองค์ประกอบในขณะที่เข้าหรือออกจาก DOM

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

เพื่อที่จะนำความสามารถในการเมาต์และถอนเมานท์องค์ประกอบจาก Document Object Model (DOM) ขั้นแรกให้แนะนำแฟล็กบูลีนเป็นคุณสมบัติสคริปต์ซึ่งเริ่มแรกตั้งค่าเป็น false ซึ่งจะทำหน้าที่เป็นตัวบ่งชี้การมองเห็นสำหรับองค์ประกอบบนหน้า ด้วยการใช้คุณสมบัตินี้ นักพัฒนาสามารถจัดการการโต้ตอบของโค้ดกับ DOM ได้อย่างมีประสิทธิภาพ โดยสลับการมองเห็นองค์ประกอบเฉพาะในขณะรันไทม์

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

แน่นอนว่า นี่คือตัวอย่างของวิธีการบรรลุเป้าหมายนี้ใน Vue.js โดยใช้คำสั่ง v-if:html ค่าเริ่มต้นการส่งออก {data() {return {isBlur: false//set default value for demons only};},computed: {/** กำหนดคลาส CSS แบบกำหนดเองตาม isBlur prop */get blurClass() {return isBlur ?‘เบลอ’:’’;}}};

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

รวมข้อมูลโค้ดที่ให้มาไว้ในไฟล์ HTML และรวมเป็นส่วนหนึ่งของเนื้อหาของหน้าเว็บของคุณ รหัสจะแสดงย่อหน้าพร้อมปุ่มที่สลับการมองเห็นองค์ประกอบ div ที่มีข้อมูลเพิ่มเติมเกี่ยวกับผลิตภัณฑ์

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

เมื่อรันโค้ดภายในสภาพแวดล้อมของเว็บเบราว์เซอร์ คาดว่าจะเห็นการนำเสนอด้วยภาพต่อไปนี้:

ผ่าน GIPHY

จางลง เบลอ บิน สไลด์ สเกล วาด และครอสเฟด การเปลี่ยนภาพเหล่านี้สามารถปรับแต่งได้สูงและอาจกำหนดค่าด้วยพารามิเตอร์ต่างๆ เช่น ความล่าช้า ระยะเวลา การค่อยๆ เปลี่ยน ความทึบ และจำนวน โดยแต่ละรายการจะแสดงเพื่อปรับปรุงหรือแก้ไขเอฟเฟกต์ตามนั้น

แน่นอน! แล้วสิ่งนี้ล่ะ? นอกเหนือจากการควบคุมการเปลี่ยนผ่านตามคุณสมบัติเช่น enter หรือ exit แล้ว Svelte ยังให้แนวทางที่ละเอียดยิ่งขึ้นผ่านการเปลี่ยน’เข้า’และ’ออก’ตัวอย่างเช่น ลองพิจารณาตัวอย่างก่อนหน้านี้ของเรา โดยที่เราต้องการให้องค์ประกอบมีเอฟเฟกต์เบลอเมื่อเข้ามาและเอฟเฟกต์เลื่อนเมื่อออกไป เราสามารถทำได้โดยใช้การเปลี่ยนภาพที่เหมาะสมดังต่อไปนี้:

 <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>

ในข้อมูลโค้ดที่กล่าวมาข้างต้น เป็นที่น่าสังเกตว่าไม่มีคำสั่งการเปลี่ยนแปลงในองค์ประกอบ div แต่มีการระบุการเปลี่ยนสองครั้งโดยใช้เทคนิคคีย์เฟรม ได้แก่ “เบลอ” และ “สไลด์” ซึ่งชี้ไปที่คุณสมบัติ “จาก” และ “ถึง” ของกฎ @keyframe ที่เกี่ยวข้อง

ผ่าน GIPHY

การสร้างภาพเคลื่อนไหวองค์ประกอบ Svelte

อันดับแรก สุดท้าย สลับกลับ เล่น ประกอบด้วยข้อโต้แย้งที่สำคัญสามข้อ ได้แก่ ความล่าช้า ระยะเวลา และการค่อยๆ เปลี่ยน ซึ่งเป็นพื้นฐานของการสร้างเอฟเฟ็กต์ภาพที่น่าดึงดูดในระหว่างกระบวนการแอนิเมชัน เพื่อแสดงให้เห็นฟังก์ชันการทำงาน เรามาตรวจสอบโค้ดตัวอย่างต่อไปนี้

 <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>

ตัวอย่างข้อมูลที่ให้มาจะสาธิตการใช้งานคำสั่ง animate ภายในแอปพลิเคชัน Svelte ภายในแท็ก การนำเข้าครั้งแรกของฟังก์ชัน พลิก จะถูกดำเนินการ มีการกำหนดอาร์เรย์ 2 อาร์เรย์ที่แยกจากกัน ได้แก่ originalList และ shoppingList ภายในองค์ประกอบ div ที่ล้อมรอบซึ่งมีแอตทริบิวต์คลาสของ "container" และแอตทริบิวต์ ID ของ "containerID" บล็อก keyed-each ทำหน้าที่ในการแสดงผลแต่ละรายการจากอาร์เรย์ shoppingList

โครงสร้าง HTML สำหรับคอนเทนเนอร์และองค์ประกอบลูกมีดังนี้:html รีเซ็ตการจัดเรียง AZ เมื่อโค้ดถูกเรียกใช้งานในเว็บเบราว์เซอร์ จะแสดงองค์ประกอบสามอย่างที่อธิบายไว้ข้างต้น ลูก div ของ"คอนเทนเนอร์"div มีคำสั่งแอนิเมชั่น ( data-animate ) ที่ทริกเกอร์ฟังก์ชัน flip เมื่อเรียกใช้

ผ่าน GIPHY

เหตุใดแอนิเมชั่นจึงมีความสำคัญในเว็บแอปพลิเคชันใด ๆ

แอนิเมชันมีความลึกที่เหนือกว่าเพียงเสน่ห์ทางสายตา ครอบคลุมถึงแก่นแท้ของการปรับแต่งประสบการณ์ผู้ใช้และการแสดงออกที่สอดคล้องกัน ด้วยการผสมผสานรูปแบบและฟังก์ชันอย่างมีศิลปะ แอนิเมชันจะเติมความมีชีวิตชีวาให้กับอินเทอร์เฟซดิจิทัล โดยเปลี่ยนจากแบบคงที่เป็นแบบโต้ตอบและใช้งานง่าย