Trim Paths

3 min read

المسارات الثلاثية تجعلك تحفيز كم من السكتة الدماغية مرئية، خلق تأثيرات “السحب على” حيث يبدو أن الخطوط ترسم في الوقت الحقيقي. هذه واحدة من أكثر التقنيات شعبية في الرسم البياني للكشف عن النص والرسوم البيانية والرسوم البيانية.

Path with partial trim visible
A path with trimEnd set to 0.5, showing only the first half of the beat

كيف يعمل

كل طريق له ثلاث خواص ثلاثية

الممتلكات Range الوصف
trimStart 0 - 1 حيث يبدأ الجزء المرئي (0 = بداية المسار)
trimEnd 0 - 1 حيث ينتهي الجزء المرئي (1 = نهاية المسار)
trimOffset 0 - 1 يسرق النافذة المرئية على طول الطريق

وعندما يكون الـ (trimStart = 0) و(trimEnd = 1، يكون المسار الكامل واضحا (قصير). تغيير هذه القيم يكشف أو يخفي أجزاء من السكتة الدماغية.

Draw-On Effect

الأكثر شيوعا: ضربة يبدو أنها تجذب نفسها.

  1. خلق طريق أو شكل بجلطة مرئية
  2. يضاف تقدير للإطار الرئيسي:
    • 0: trimEnd = 0 (لا شيء مرئي)
    • في الوقت المحدد 2:
  3. شغل الجدول الزمني لرؤية الطريق نفسه

This works especially well with:

  • النص التمريضي الذي أُنشئ بنظام " النسيج "
  • رسوم توضيحية مستمدة من أداة رسم الخرائط
  • موصلات دياغرام لسيارات التدفق المتحركة

Reveal

أظهر فقط جزء من الطريق

  • حددوا رقم trimStart = 0.2 و trimEnd = 0.8 لإظهار منتصف 60 في المائة
  • استئصال كلا القيمين لتوسيع القسم المرئي أو التعاقد عليه
  • الأجزاء الخفية غير مرئية تماما (ليست شفافة فقط)

Sliding Window

إنشاء قطاع يتحرك على الطريق:

  1. تحديد حجم النافذة الثابتة: trimStart = 0, trimEnd = 0.3
  2. Animate trimOffset from 0 to 1
  3. الجزء المرئي ينزلق على طول الطريق

This creates effects like:

  • مؤشرات تحديد المواقع
  • المسح/التسابق
  • آثار المسار أو خط التقدم

بنود قابلة للمقارنة

طريق الترام يعمل مع:

البند النوع الحواشي
Paths خطوط، منحنى، رسومات مجانية
مسارات مركبة الأشكال المعقدة مع العديد من المتعاطفين
المجموعات ينطبق على جميع المسارات داخل المجموعة
مجموعات عارية يعمل مع الأشياء التي لديها أقنعة مطبقة

الرسالة: ولأفضل تأثيرات السحب على النص، استخدم نظام " Font**" التمريضي**. إنه يخلق مسارات نصية واحدة مثالية لتصوير المسار الثلاثي.

الجمع بين الترشيحات الأخرى

  • محرر الحاسوب - خواص ثلاثية الهوائية مع مرور الوقت مع تخفيف الأعراف
  • Relations - Use driven_by to link trim values to other item properties
  • توقيت التعبير - استخدام تعبيرات الرياضيات لخلق أنماط ثلاثية معقدة

تيبس

  1. استخدام السهولة للتأثيرات المباشرة - يعطي تباطؤا طبيعيا في نهاية المطاف
  2. سكتة دماغية مرئية** - المسارات الثلاثية لا تؤثر إلا على المسارات المضربة، وليس على الملأ
  3. سكتة سكتة دماغية؟
  4. مسارات متعددة متنوعة - استخدام مكافآت زمنية لرسم مسارات متتالية
  5. إعادة النظر بالسرعة الكاملة - يمكن أن تختلف التقديرات الثلاثية ببطئ مقابل السرعة العادية

رُفعت: [محرر للإطار] (/features/keyframes) ) [استديو فونت] (/features/font-studio) | الإعارات