الحركة

animations عبارة عن مجموعة من إعلانات الرسوم المتحركة الموجودة على View. يحدد property السمة المراد التحكم فيها، مثل opacity أو sweepAngle. عندما تتغير القيمة المستهدفة لـ View، تبدأ الرسوم المتحركة المقابلة في الانتقال؛ إن مجرد إضافة الرسوم المتحركة إلى السمات الثابتة لن يؤدي إلى حدوث تغييرات تلقائيًا.

يتم توفير قائمة بالخصائص التي يدعمها كل مكون على صفحته. عندما تحتاج إلى إضافة View الفرعي أو حذفه أو إعادة ترتيبه ديناميكيًا، فاحتفظ بـ key ثابتًا لهم بحيث تظل التحديثات متوافقة مع نفس الكائن الرسومي.

وحدة duration، delay هي ثانية، والمدة الافتراضية هي 0.25 ثانية، والتأخير صفر، والمنحنى الافتراضي هو easeInOut. from/to يمكن أن يوضح أهداف البداية والنهاية، repeat وautoreverse يتحكمان في التكرار ورحلة الذهاب والإياب. يجب أن يتم التحكم في نفس الخاصية من خلال إعلان واحد فقط.

يمكن لسمات الفترة استخدام wrap لتحديد مسارات الانتقال عبر الفترات. على سبيل المثال، سيستخدم startAngle wrap: 360 من 350° إلى 10°. sweepAngle يمثل زاوية المسح الفعلية، مع الاحتفاظ بالاتجاهات الإيجابية والسلبية، ولا يدعم wrap.

بعد تحديد السرعة، يقوم المثال بتحويل نطاق سرعة من 0–200 إلى 0–360 درجة. عندما تتغير السرعة من 50 إلى 100، تتغير زاوية الهدف من 90 درجة إلى 180 درجة، ويستغرق القوس 0.25 ثانية لإكمال الانتقال. يتم استخدام وحدة السرعة الحالية لنطاق القياس؛ يتم عرض خط أفقي عندما لا يكون هناك قياس.

function main() {
  const speed = $data.current.speed?.value;
  if (speed == null) {
    return (
      <Text fontSize={32} color={$env.foreground}>
        —
      </Text>
    );
  }
  return (
    <Circle
      width={120}
      height={120}
      background="clear"
      stroke={$env.accent}
      lineWidth={8}
      startAngle={-90}
      sweepAngle={Math.max(0, Math.min(1, speed / 200)) * 360}
      animations={[
        { property: 'sweepAngle', duration: 0.25, curve: 'easeOut' },
      ]}
    />
  );
}

يتم استخدام contentAnimation لتحديث المحتوى مثل النص أو الصور أو بيانات المخطط. يتم تحديد نوع الدعم بواسطة المكون المحدد، مثل انتقالات النص الرقمي واستيفاء بيانات الرسومات.

يتطلب استيفاء الشكل الهياكل المقابلة قبل وبعد، على سبيل المثال، عدد النقاط وإعدادات الإغلاق لـ Polyline هي نفسها، وتسلسل أوامر Path هو نفسه. قم بالتحديث مباشرة عندما تكون البنية غير متوافقة. يتم تنفيذ الرسوم المتحركة من جانب الرسم ولا تتطلب توقيت الحلقة في main()؛ الرسوم المتحركة لا تزيد من تكرار التحديث الفعلي للمستشعر أو OBD.