أضف الحياة إلى تطبيقات Svelte الخاصة بك من خلال دمج التحولات والرسوم المتحركة الجذابة.

عندما يتم تنفيذ الرسوم المتحركة بشكل جيد، يمكنها تحسين تجربة المستخدم ويمكن أن تكون طريقة رائعة لإرسال التعليقات إلى المستخدم. يسهّل عليك Svelte دمج الرسوم المتحركة والانتقالات في تطبيقك دون الحاجة إلى مكتبات JavaScript تابعة لجهات خارجية.

إعداد مشروع Svelte

من أجل البدء في العمل مع Svelte، يجب عليك التأكد من ذلك وقت تشغيل Node.js و مدير حزمة العقدة (NPM) تم تثبيتها بشكل صحيح على جهاز الكمبيوتر الخاص بك. افتح المحطة الطرفية الخاصة بك وقم بتشغيل الأمر التالي:

npm create vite

وهذا سوف سقالة أ مشروع Vite.js الجديد. قم بتسمية مشروعك، اختر ممشوق كإطار، وقم بتعيين المتغير على جافا سكريبت. ثم قم بالتبديل إلى دليل المشروع وقم بتشغيل الأمر التالي لتثبيت التبعيات الضرورية:

npm install

قم بإزالة الكود المعياري عن طريق حذف أصول و ليب المجلدات ومسح محتوياتها التطبيق.svelte و App.css ملفات.

كيفية استخدام توينينغ في Svelte

Tweening هي تقنية في الرسوم المتحركة ورسومات الكمبيوتر تقوم بإنشاء إطارات متوسطة بين الإطارات الرئيسية لإنشاء حركة أو انتقالات سلسة وواقعية. تقدم Svelte أ

instagram viewer
توينيد الأداة المساعدة التي تسمح لك بتحريك العناصر باستخدام القيم الرقمية، مما يجعل من السهل إنشاء انتقالات ورسوم متحركة سلسة في تطبيقات الويب الخاصة بك.

الأداة المساعدة tweened هي جزء من رشيق/حركة وحدة. لاستخدام تويند في المكون الخاص بك، عليك استيراده مثل هذا:

import { tweened } from'svelte/motion'

تحت الغطاء، تعتبر الأداة المساعدة للتوين مجرد متجر Svelte قابل للكتابة. يعد متجر Svelte في الأساس كائن JavaScript يمكنك استخدامه للتعامل مع إدارة الحالة. يحتوي متجر tweened على طريقتين وهما: تعيين و تحديث. على المستوى الأساسي، يبدو بناء الجملة الخاص بمتجر تويند كما يلي:

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

تحدد كتلة التعليمات البرمجية أعلاه متغيرًا ذ ويربطه بمتجر تويند. يوجد في المتجر معلمتان. تمثل المعلمة الأولى القيمة الافتراضية ذ يجب أن يكون ملزما. المعلمة التالية هي كائن بمفتاحين مدة و تخفيف. ال مدة يحدد المدة التي يجب أن يستمر فيها التوين بالمللي ثانية تخفيف يحدد وظيفة التخفيف.

وظائف التخفيف في Svelte تحدد سلوك توين. هذه الوظائف هي جزء من رشيق / تخفيف الوحدة مما يعني أنه يتعين عليك استيراد وظيفة معينة من الوحدة قبل أن تتمكن من تمريرها إلى المتجر المتكامل. يحتوي Svelte على مصور تخفيف السرعة الذي يمكنك استخدامه لاستكشاف سلوك وظائف التخفيف المختلفة.

لتوضيح كيفية استخدام الأداة المساعدة tweened بشكل كامل، إليك مثال لاستخدام متجر tweened لزيادة حجم عنصر في Svelte.