كيفية إنشاء نموذج أولي بسيط باستخدام Code Overrides في Framer X.

قدم الإصدار التجريبي الثاني من Framer X سلسلة من الميزات البرمجية الجديدة. تعرف على كيفية اتصالهم جميعًا في هذا البرنامج التعليمي.

Framer هي أداة تصميم تفاعلية لنظام التشغيل MacOS. نحن نعمل على إصدار جديد تمامًا: Framer X ، وهو حاليًا في النسخة التجريبية العامة. تعرف على المزيد حول هذا الموضوع هنا ، والاشتراك للحصول على إشعار عندما نبدأ. سيأتي هذا الخريف.

ابدء

للبدء ، يمكنك تنزيل قالب iPhone X هنا. يتضمن شاشة iPhone X واحدة مع صورة وحالة شريط وشريط سفلي. لا تتردد في استبدال ملء الصورة الافتراضية بأخرى خاصة بك. لقد التقطت واحدة من Unsplash.

تحميل القالب.

للمتابعة ، افتح ملف القالب في Framer X. الآن ، أول ما نحتاج إليه هو شريط التمرير. لقد قمت بنشر مكون Slider إلى متجر Framer X ، والذي يحتوي على جميع خيارات التخصيص التي سنحتاجها. لتثبيته ، اتبع الإرشادات أدناه.

  1. انقر على أيقونة المتجر في اللوحة اليمنى.
  2. انتقل إلى شريط البحث ، في الزاوية العلوية اليمنى.
  3. البحث عن "شريط التمرير".
  4. انقر على حزمة "Slider" مع الصورة المصغرة سماوي.
  5. انقر فوق "تثبيت".
هذه هي الحزمة التي سنحتاج إلى تثبيتها.

بعد التثبيت ، سيظهر شريط التمرير في علامة التبويب المكونات. انتقل إلى المكونات (تبدو الأيقونة مثل الشبكة) ، وسترى الصورة المصغرة لـ Slider. ما عليك سوى سحبها وإفلاتها على شاشة iPhone X.

في Framer X ، هناك نوعان من المكونات: مكونات التصميم والكود. يتم إنشاء مكون تصميم عن طريق تحديد عنصر موجود على قماش الرسم. يتم إنشاء مكون رمز من الصفر ، وذلك باستخدام React. هذا يعني أنه يمكنك عرض HTML و CSS عادي ، مباشرة على القماش. أو يمكنك استيراد مكونات التصميم الخاصة بك ، وحزم NPM أو عناصر Framer والبناء عليها. الاحتمالات لا حصر لها.

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

تخصيص شريط التمرير

إليك كيفية تخصيص Slider لتطبيق الفلتر الخاص بنا. سأوضح التغييرات أدناه. أنت حر في تصميمه بالطريقة التي تراها مناسبة ، بالطبع.

  1. اضبط اللون على #FF.
  2. تعيين المسار إلى # 333.
  3. قم بتعيين قيمة الظل ألفا إلى 100.
  4. اضبط على true.

تؤثر خاصية التقييد على المدى الذي يمكن أن يصل إليه المقبض: إذا كان "مقيدًا" على جانبي المسار ، أو إذا كان يمكن سحبه طولًا حتى منتصف المقبض نفسه. تعتمد النطاقات (min ، max ، value) على قيمة التصفية الفعلية التي نود معالجتها لكل شريط تمرير.

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

لدينا شريط التمرير الإعداد ، بما في ذلك التسميات والنطاقات الافتراضية.

نطاقات التمرير

لنقم أيضًا بتعيين خصائص min و max و value. تبدأ منزلقات السطوع والتباين عند 100 وتصل إلى 200 ، بينما يبدأ منزلق التدرج اللوني عند 0 ويمتد حتى 360.

  • السطوع - دقيقة: 0 ، الحد الأقصى: 200 ، القيمة: 100
  • على النقيض - دقيقة: 0 ، بحد أقصى: 200 ، القيمة: 100
  • تدرج اللون: دقيقة: 0 ، الحد الأقصى: 360 ، القيمة: 0

خلق التجاوزات

من خلال إعداد نطاقات التمرير لدينا بشكل صحيح ، نحن على استعداد لبدء تشغيلها. سنحتاج إلى إنشاء طريقة لشريط التمرير والصورة "لتوصيل البيانات" إلى بعضها البعض - طريقة لتوصيلها.

في Beta 2 ، قدمنا ​​خاصية Code. حدد أي إطار ، وانقر على الرمز وستكون لديك القدرة على توصيل وظائف التجاوز بالإطار المحدد. تسمح لك هذه الوظائف بتجاوز خصائص التصميم مثل العتامة والملء - لكنها تتيح أيضًا التفاعل والرسوم المتحركة.

مضيفا التجاوزات

لإضفاء الحيوية على منزلقاتنا ، يتعين علينا إضافة وظيفة تخطي إلى الصورة ، وكل منزلق فردي. لإضافة التجاوز الأول ، اتبع الخطوات أدناه.

  1. اختر الصورة
  2. انقر على "رمز" في لوحة الخصائص.
  3. حدد القائمة المنسدلة "تجاوز" ، وانقر فوق "تحرير Examples.tsx".
  4. سيؤدي هذا إلى فتح محرر الكود الافتراضي. بالنسبة لي ، هذا VSCode.

هنا ، ستجد بعض وظائف المثال لدينا. لن نحتاج إلى ذلك - لذلك لا تتردد في حذفها أو إنشاء ملف جديد (حدد القائمة المنسدلة "ملف" ، ثم "ملف جديد") لبدء إضافة تجاوزاتنا المخصصة.

أولا ، الاستيراد. لن نستخدم فقط Override والبيانات ، حتى نتمكن من تبسيط العبارة في الأعلى. هذا استيراد هذه الكائنات اثنين من مكتبة Framer.

استيراد {Override ، Data} من "framer" ؛

من المهم الإشارة إلى أنه على عكس Framer اليوم ، يمكنك فقط تحريك القيم في Framer X. ويمكن بعد ذلك تطبيق هذه القيم المتحركة على أي خاصية ، اختياريًا في Event ، مثل onClick. توفر مكتبة Framer كائن بيانات يسمح لك بتخزين هذه القيم المتحركة.

ضبط السطوع

هدفنا الأول هو توصيل منزلق السطوع بالصورة. بمجرد الانتهاء من الإعداد ، يجب أن يكون توصيل المنزلقين المتبقيين بسيطًا.

سنبدأ ببساطة بإضافة خاصية السطوع إلى كائن البيانات ، وتعيينها على 100 ، لمطابقة القيمة الافتراضية لمنزلق السطوع.

تصدير بيانات const = البيانات ({
  سطوع: 100 ،
})؛

بعد ذلك ، نحتاج إلى التأكد من أن صورتنا يمكنها تلقي الخاصية المحددة في كائن البيانات الخاص بنا. سننشئ ثابتًا جديدًا ، وسأطلق عليه تأثيرات. في Framer X ، تستخدم عمليات استبدال التعليمات البرمجية ومكونات التعليمات البرمجية TypeScript. يتجاوز بناء الجملة العميق نطاق هذا البرنامج التعليمي ، لذلك من المهم في الوقت الحالي معرفة أنه يجب كتابته باستخدام Oververide للسماح لـ Framer X بالتعرف عليه.

تأثيرات const التصدير: Override = () => {
  إرجاع {
    السطوع: البيانات.
  }؛
}؛

تتلقى الطريقة الدعائم كمعلمة لها (خصائص العنصر المطبق) ، لكن بما أننا لن نستخدمها ، فقد حذفتها من الأقواس. الآن ، حدد وظيفة التأثيرات من قائمة التجاوز. (نظرًا لأنك حددت بالفعل الملف في هذه المرحلة. إذا كنت قد أنشأت ملفًا جديدًا ، فقد تحتاج إلى تحديد ذلك أولاً). يرجى ملاحظة أن هذا لن يجعل شريط التمرير وظيفيًا حتى الآن.

ربط وظيفة الآثار لصورتنا.

الآن من أجل الجزء الممتع - شريط التمرير نفسه. سنحتاج إلى وظيفة تجاوز جديدة. سوف أسميها BrightnessSlider ، حيث سنحتاج إلى توصيلها بمنزلق السطوع. لنبدأ بتحديد الوظيفة ، إلى جانب نوع التجاوز.

تصدير const BrightnessSlider: Override = () => {
  إرجاع {}،
}؛

الآن داخل الكائن المرتجع ، سنضيف وظيفة onValueChange. يحتوي على معلمة واحدة: قيمة رقمية (قيمة رقم الكتابة). هذه الوظيفة هي أيضًا خاصية لمكون Slider نفسه. يقوم بتحديث القيمة كلما قمت بتحريك المقبض ، على سبيل المثال. ضمن الوظيفة ، سنقوم بتعيين قيمة السطوع على القيمة التي يعرضها شريط التمرير الفعلي.

تصدير const BrightnessSlider: Override = () => {
  إرجاع {
    onValueChange: (value: number) => {
      data.brightness = القيمة ؛
    }،
  }؛
}؛

الآن ، يمكننا العودة إلى Framer X ، وتحديد منزلق السطوع ، والنقر فوق "Code" ، وتحديد واختيار وظيفة "BrightnessSlider" من القائمة المنسدلة Override. (إذا كنت قد أنشأت ملفًا جديدًا من نقطة الصفر ، فستحتاج أولاً إلى تحديد الملف الصحيح أيضًا. إذا تابعت ضمن أمثلة ، فيمكنك تحديد الطريقة مباشرةً.)

وفويلا! الآن يتم توصيل جميع العناصر المتعلقة منزلق السطوع. انقر على أيقونة التشغيل في الزاوية العلوية اليمنى من التطبيق لفتح نافذة المعاينة. هنا ، يمكنك التفاعل مع شريط التمرير.

ربط جميع المتزلجون

من هنا فصاعدًا ، من السهل جدًا تمديد ملفنا لدعم المنزلقين المتبقيين. العثور على الخطوط العريضة للخطوات أدناه.

  1. سنحتاج إلى توسيع كائن البيانات بتنسيق: 100 و hueRotate: 0. يبدأ Contrast عند 100 ، مثل السطوع ، ويبدأ hueRotate في 0.
  2. سنحتاج إلى توسيع وظيفة التأثيرات الخاصة بنا حتى تتلقى الخصائص الثلاثة جميعها. مرة أخرى ، سنضيف خصائص التباين و hueRotate ، وعيَّن على data.contrast و data.hueRotate على التوالي.
  3. يمكننا تكرار وظيفة BrightnessSlider الخاصة بنا مرتين ، وإعادة تسمية واحدة إلى ContrastSlider ، والآخر إلى HueSlider.

سأرفق لقطة شاشة لملف الوظائف النهائية أدناه. يمكنك أيضًا تنزيل ملف Functions.tsx الكامل هنا ، أو النموذج الأولي المكتمل أدناه.

كل ما تبقى هو توصيل التباين وهوي المتزلجون إلى وظائف التجاوز الخاصة بهم. وهذا كل شيء! 4 عناصر ، كائن بيانات واحد و 4 وظائف. تظل أشرطة التمرير قابلة للتخصيص تمامًا ، من نطاقاتها إلى خيارات التصميم الخاصة بها. إذا كنت ترغب في مواصلة اللعب ، يمكنك تبديل بعض المرشحات ، مثل تغيير الصبغة لتشبع بدلاً من ذلك. أو أن يكون شريط التمرير يؤثر على نوع مختلف تمامًا من الممتلكات ، أو تماثل أو نطاق

على الرغم من أن عمليات التجاوز قد تكون صعبة الفهم في البداية ، إلا أنها مرنة للغاية ، ويمكن استخدامها لأكثر من مجرد تجاوز الخصائص المرئية. نأمل أن هذا يلقي بعض الضوء على قدراته. لا تتردد في التواصل مع Twitter إذا كان لديك أي أسئلة. يمكنك تنزيل ملف .framerx النهائي أدناه.

تحميل الملف النهائي.

النموذج الأولي للتصفية التطبيق.

موارد إضافية

  • Framer X نظرة عامة
  • Framer X Docs
  • رد مستندات
  • مستندات TypeScript