تغيير مظهر العنصر بشكل ديناميكي

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

في "تنسيق خلفية شاشة الساعة"، يتم تحقيق ذلك من خلال استخدام العنصر Transform. لا يمكن تحويل جميع العناصر، ولكن العناصر الرئيسية القابلة للتحويل تشمل: عناصر Group وPart*، وعناصر الرسم الأساسية، مثل الأشكال والأنماط.

يتم وضع علامة على سمات كل عنصر قابلة للتحويل في المستندات المرجعية.

يتم تحديد عملية التحويل نفسها في السمة value، وذلك بلغة تعبير Watch Face Format، والتي يمكن أن تتضمّن مصادر بيانات. تحدّد target السمة التي سيتم تغييرها في العنصر الرئيسي.

على سبيل المثال، لتغيير زاوية Arc لعرض تقدّم الخطوات:

<Arc centerX="225" centerY="225" height="420" width="420" startAngle="0" endAngle="0">
    <Transform target="endAngle" value="[STEP_PERCENT] * 3.6" />
    <Stroke color="#FF00FF" thickness="20" />
</Arc>
watchface_dynamic_appearance.xml

عندما تتغير قيمة STEP_PERCENT، تتم إعادة حساب قيمة endAngle وإعادة رسم Arc.

عندما يغيّر عنصر Transform قيمة مستهدَفة، قد يكون من المفيد أن يتم تحريك هذا التغيير على مدار فترة زمنية، بدلاً من تغيير القيمة بشكل فوري، لأنّ ذلك قد يكون مزعجًا. استخدِم العنصر Animation لتحقيق ذلك:

<PartDraw x="100" y="150" width="250" height="120" >
    <Ellipse x="0" y="0" width="50" height="50">
        <Fill color="#ff0000" />
        <!-- Red ball with no animated transition -->
        <Transform target="x" value="[SECOND] % 2 == 0 ? 0 : 200"/>
    </Ellipse>
    <Ellipse x="0" y="100" width="50" height="50">
        <Fill color="#00ff00" />
        <!-- Green ball eases between each position -->
        <Transform target="x" value="[SECOND] % 2 == 0 ? 0 : 200">
            <Animation duration="1" interpolation="EASE_IN_OUT" />
        </Transform>
    </Ellipse>
</PartDraw>
watchface_dynamic_appearance.xml

التحويلات باستخدام مقياس التسارع

مع أنّه يمكن استخدام عنصر Transform مع مصادر بيانات الجيروسكوب، مثل ACCELEROMETER_ANGLE_X، لتغيير موضع عنصر أو حجمه، يوفّر "تنسيق خلفية شاشة الساعة" عنصرًا منفصلاً لذلك: Gyro.

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