.NET Tips | توسعه برنامه‌های Cross Platform با Xamarin Forms & Bit Framework

اندازه‌ی قلم متن

تخمین مدت زمان مطالعه‌ی مطلب: دو دقیقه

در قسمت قبل بحث Style و Font را بررسی کردیم. در این قسمت قصد بررسی Animationها را داریم. Animation خود دارای دو قسمت است:

1- استفاده از Xamanimation

2- استفاده از Lottie

Xamanimation به شما کمک می‌کند تا در Xaml، انیمیشن‌های خود را تعریف کنید. پس از نصب Package مربوطه، می‌توانید مثال زیر را تست کنید:

<Button
    x:Name="DeleteButton"
    BackgroundColor="Orange"
    Text="Delete">
    <Button.Triggers>
        <EventTrigger Event="Clicked">
            <bitView:SetPropertyAction Property="BackgroundColor" Value="Red" />
            <xamAnimation:BeginAnimation>
                <xamAnimation:BeginAnimation.Animation>
                    <xamAnimation:ColorAnimation
                        Target="{x:Reference DeleteButton}"
                        ToColor="Orange"
                        Duration="1000" />
                </xamAnimation:BeginAnimation.Animation>
            </xamAnimation:BeginAnimation>
        </EventTrigger>
    </Button.Triggers>
</Button>

در این مثال یک دکمه داریم که وقتی روی آن Click می‌کنیم، EventTrigger مربوطه اجرا می‌شود و ابتدا با کمک SetPropertyAction مقدار BackgroundColor دکمه روی Red تعیین می‌شود. سپس با Animation، از رنگ Red به Orange می‌رسیم؛ در طول 1000 میلی ثانیه. البته درست کردن Animation احتیاج به خلاقیت هم دارد(!) و این مثال فقط جنبه‌ی تکنیکی ماجرا را به شما توضیح می‌دهد. برای مشاهده مثال‌های بیشتر به سایت مربوطه مراجعه کنید.

در برخی مواقع Animationها به سادگی تغییر رنگ و Opacity و موقعیت اشیاء نیستند؛ اگر چه با ترکیب کردن همانها هم می‌توان کلی کارهای جالب کرد. برای انیمیشن‌های پیچیده‌تر می‌شود از Adobe After Effects استفاده کرد. پس از ساخت انیمیشن مربوطه، با استفاده از Lottie انیمیشن به یک فایل JSON تبدیل می‌شود. دقت کنید که Animationهای After Effects به صورت فیلم و Gif نیستند، بلکه در آنها توصیف یک Animation ذخیره می‌شود که این یک نقطه قدرت After Effects است. در سایت Lottiefiles می توانید تعداد زیادی از این JSON‌های آماده را دانلود کنید.

برای شروع ابتدا نسخه 2.6.3 پکیج Com.Airbnb.Xamarin.Forms.Lottie را روی پروژه نصب می‌کنیم. ما برای تست، از این JSON استفاده کرده‌ایم و آن را در مسیرهای زیر قرار داده‌ایم:

XamApp.Android/Assets/Animations/LottieLogo1.json

XamApp.UWP/Assets/Animations/LottieLogo1.json

XamApp.iOS/Assets/Animations/LottieLogo1.json

البته همانند فونت‌ها، برای این که یک فایل را سه بار در سورس کنترلر کپی نکنیم، از روش Add as link استفاده کرده‌ایم.

سپس از کد زیر برای نمایش فایل مربوطه استفاده می‌کنیم:

<lottie:AnimationView
    Animation="{OnPlatform UWP='Assets/Animations/LottieLogo1.json',
                                   Android='Animations/LottieLogo1.json',
                                   iOS='Animations/LottieLogo1.json'}" 
    AutoPlay="True"
    HeightRequest="500"
    HorizontalOptions="Center"
    Loop="True"
    VerticalOptions="Center"
    WidthRequest="500" />

برای بررسی بهتر مثال‌ها، آخرین وضعیت XamApp را Clone/Pull کنید و در App.xaml.cs درخواست کنید که صفحه Animations را ببینید. کدها نیز در فایل AnimationsView.xaml هستند.

توسعه برنامه‌های Cross Platform با Xamarin Forms & Bit Framework - قسمت هفدهم

مطالب مشابه