שינוי דינמי של מראה הרכיב

יכול להיות שתרצו לשנות את המראה של חלקים מסוימים בתצוגת השעון, למשל לשנות את המיקום, הגודל או הנראות שלהם. לעיתים קרובות השינויים האלה מתבצעים בתגובה למקורות של נתוני קלט, כמו השעה ביום או מד התאוצה.

ב-Watch Face Format, אפשר לעשות את זה באמצעות הרכיב Transform. לא ניתן לבצע טרנספורמציה בכל האלמנטים, אבל האלמנטים שניתן לבצע בהם טרנספורמציה כוללים: אלמנטים Group, Part* ופרימיטיבים של שרטוטים כמו צורות וסגנונות.

מאפיינים של כל רכיב שאפשר לשנות מסומנים כך במסמכי העזר.

הטרנספורמציה עצמה מצוינת במאפיין value, בשפת הביטויים של פורמט פני השעון, שיכולה לכלול מקורות נתונים. ‫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.

כך אפשר לפשט את התמונה הכוללת, ולהפריד בין טרנספורמציה שמבוססת על תנועה לבין טרנספורמציה אחרת כמו טרנספורמציה שמבוססת על זמן, שאולי מוחלת על אותו רכיב.