در قسمت قبل بحث Style و Font را بررسی کردیم. در این قسمت قصد بررسی Animationها را داریم. Animation خود دارای دو قسمت است:
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های آماده را دانلود کنید.
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 هستند.