تغییر پویا در ظاهر عنصر

ممکن است بخواهید ظاهر بخش‌هایی از صفحه ساعت را تغییر دهید، برای مثال، موقعیت، اندازه، و نمایان بودن را تغییر دهید، اغلب در پاسخ به منابع داده ورودی مانند زمان روز یا شتاب‌سنج.

در «قالب صفحه ساعت»، این کار ازطریق استفاده از عنصر 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>

با تغییر STEP_PERCENT، endAngle دوباره محاسبه می‌شود و Arc دوباره رسم می‌شود.

وقتی عنصر «تبدیل» مقدار هدف را تغییر می‌دهد، مطلوب است که این تغییر در طول یک دوره زمانی پویانمایی شود، نه اینکه مقدار بلافاصله تغییر کند، زیرا تغییر ناگهانی می‌تواند آزاردهنده باشد. برای دستیابی به این موارد، از عنصر 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>

بااستفاده از شتاب‌سنج تبدیل می‌کند

اگرچه می‌توان از عنصر Transform با منابع داده ژیروسکوپی مانند ACCELEROMETER_ANGLE_X برای تغییر موقعیت یا مقیاس یک عنصر استفاده کرد، «قالب صفحه ساعت» عنصر جداگانه‌ای برای این موارد ارائه می‌دهد: Gyro.

این کار به شما امکان می‌دهد تصویر کلی را ساده کنید و تبدیل مبتنی بر حرکت را از تبدیل‌های دیگر مثل تبدیل مبتنی بر زمان که ممکن است روی همان عنصر اعمال شود جدا کنید.