Animation در Xamarin و Xamarin.Forms

کلیه حقوق مادی و معنوی این مقاله متعلق به آموزشگاه تحلیل داده می باشد و هر گونه استفاده غیر قانونی از آن پیگرد قانونی دارد.

Animation در Xamarin و Xamarin.Forms

گاهی می توانیم با استفاده از افکت های کوچک و انیمیشن ها کاری کنیم که فرآیند load یا عملیات سنگین، سریعتر و روان تر به نظر برسند. در این مقاله به شما نشان خواهم داد چطور انیمیشن ها را به برنامه های Xamarin و Xamarin.Formها (iOS، اندروید و Windows Phone) اضافه کنیم.

برای انجام این کار دو رویکرد وجود دارد: رویکرد Xamarin و رویکرد Xamarin.Forms.

Xamarin.Forms

در Xamarin.Forms، از هر کنترلی که برای ساخت رابط کاربری استفاده کنید، مبتنی بر کلاس View خواهد بود.

در این کلاس یکسری متدهای Extension وجود دارد که به شما اجازه میدهند با استفاده از زبان C#، انیمیشن های کوچکی برای کنترل های خود ایجاد کنید. برای مثال، یک صفحه ساده مانند زیر ایجاد کنید:

public MainPage()  

{  

    sampleLabel = new Label   

    {   

        Text = "Hello Xamarin.Forms animations!",  

        TextColor = Color.Blue,    

        XAlign = TextAlignment.Center,   

        Opacity = 0   

    };  

    Content = new StackLayout  

    {  

        VerticalOptions = LayoutOptions.Center,  

        Children =   

        {  

            sampleLabel  

        }  

    };  

}

به صورت پیش فرض، میزان شفافیت (Opacity) برچسب (Label) 0 در نظر گرفته شده است و زمانی که صفحه نمایش داده می شود، ظاهر نمی شود.

سپس باید متد OnAppearing، که قبل از نمایش صفحه اجرا می شود را Override کنید. در این متد می توانید برچسبی (Label) که قبلاً ایجاد کرده اید را بوسیله افکت FadeIn به صورت پویا نمایش دهید:

protected override void OnAppearing()  

{  

    base.OnAppearing();  

    sampleLabel.FadeTo(1, 750, Easing.Linear);  

}

متد Extension، FadeIn سه پارامتر زیر را دریافت میکند:

·         مقدار نهایی Property که در اینجا همان شفافیت (Opacity) است.

·         مدت زمان اجرای انیمیشن (Animation duration) به واحد میلی ثانیه.

·         تابع کاهشی (Easing function) مورد استفاده. در اینجا از نوع خطی (Linear) استفاده شده است. یعنی سرعت به صورت خطی به افکت اضافه می شود.

البته متدهای Extension دیگری نیز وجود دارد: ScaleTo، RotateTo، LayoutTo و TranslateTo. تمام متدهای ذکر شده نیز به همین شکل کار می کنند. فقط کافیست مقدار نهایی، مدت زمان اجرا و در آخر تابع کاهشی (Easing function) را تعیین کنید.

علاوه بر این در کلاس ViewExtensions، متد دیگری به نام CancelAnimation وجود دارد که View را به عنوان گارامتر ورودی دریافت میکند و به شما اجازه می دهد انیمیشن اولیه را در View مورد نظر، لغو کنید.

همچنین می توانید انیمیشن های ترکیبی ایجاد کنید و افکت های پیچیده تری را بر روی صفحه نمایش، نشان دهید. تمام متدهای انیمیشن غیرهمزمان هستند. به این ترتیب می توانید هر یک را با کمی تاخیر یا بدون تاخیر اجرا کنید و به راحتی انیمیشن های  همزمان یا غیر همزمان ایجاد کنید:

protected override async void OnAppearing()  

{  

    base.OnAppearing();  

    sampleLabel.FadeTo(1, 750, Easing.Linear);  

    await sampleLabel.ScaleTo(2, 1500, Easing.CubicInOut);  

    await sampleLabel.ScaleTo(1, 500, Easing.Linear);  

}  

در اینجا مثالی از ترکیب افکت ها را مشاهده می کنید:

·         FadeTo، با مدت زمان 750 میلی ثانیه، بدون وقفه.

·         ScaleTo، با مدت زمان 1500 میلی ثانیه، به همراه وقفه. این افکت همزمان با افکت FadeTo اجرا می شود.

·         SclaeTo، با مدت زمان 500 میلی ثانیه، به همراه وقفه. از آنجا که افکت ScaleTo قبلی به همراه وقفه بود، این افکت زمانی اجرا می شود که اجرای افکت قبلی به اتمام رسیده باشد.

به این وسیله کنترل مناسبی بر روی چگونگی اجرای انیمیشن ها خواهید داشت و می توانید هر تعداد انیمیشن که خواستید را با هم ترکیب کنید و افکت های فوق العاده ای به وجود بیاورید.

Xamarin

اجازه دهید ببینیم این انیمیشن ها در Xamarin چطور ساخته می شوند. از آنجا که Xamarin از شما می خواهد برای هر پلتفرم یک View محلی ایجاد کنید، لذا باید بدانید انیمیشن ها در iOS، اندروید و Windows چطور کار می کنند.

Windows

در Windows و Windows Phone می توانید از قدرت XAML در ساخت انیمیشن های فوق العاده استفاده کنید. قبل از هر چیز، اجازه دهید همان برچسب () قبلی را با استفاده از TextBlock در XAML ایجاد کنیم:

<Grid>  

    <TextBlock x:Name="TextHello"   

                Text="{Binding Hello}"  

                VerticalAlignment="Center"  

                HorizontalAlignment="Center"  

                Foreground="Blue"  

                Opacity="0"  

                RenderTransformOrigin=".5,.5">  

        <TextBlock.RenderTransform>  

            <CompositeTransform ScaleX="1" ScaleY="1"/>  

        </TextBlock.RenderTransform>  

    </TextBlock>  

</Grid>

در XAML، اگر بخواهید عنصری را به صورت پویا مقیاس دهی (scale) کرده و یا بچرخانید (rotation)، باید یک نمونه از CompositeTransform (تبدیل مرکب) به عنصر مورد نظر اضافه کنید. حالا می توانید یک Storyboard برای انیمشن خواص Opacity و Scale مربوط به TextBlock، ایجاد کنید:

<views:MvxWindowsPage.Resources>  

    <Storyboard x:Key="TextBlockAnimation" Duration="0:0:1.5">  

        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="TextHello" Storyboard.TargetProperty="Opacity">  

            <LinearDoubleKeyFrame KeyTime="0:0:0.750" Value="1"/>  

        </DoubleAnimationUsingKeyFrames>  

        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="TextHello" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)">  

            <LinearDoubleKeyFrame KeyTime="0:0:1.0" Value="2"/>  

            <LinearDoubleKeyFrame KeyTime="0:0:1.5" Value="1"/>  

        </DoubleAnimationUsingKeyFrames>  

        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="TextHello" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)">  

            <LinearDoubleKeyFrame KeyTime="0:0:1.0" Value="2"/>  

            <LinearDoubleKeyFrame KeyTime="0:0:1.5" Value="1"/>  

        </DoubleAnimationUsingKeyFrames>  

    </Storyboard>  

</views:MvxWindowsPage.Resources>

در آخر فقط کافیست با اجرای کد موجود در متد OnNavigatedTo، انیمشین را اجرا کنید:

protected override void OnNavigatedTo(Windows.UI.Xaml.Navigation.NavigationEventArgs e)  

{  

    base.OnNavigatedTo(e);  

    var animation = (Storyboard)this.Resources["TextBlockAnimation"];  

    animation.Begin();  

}

انیمیشنی که در این مرحله، برای Windows و Windows Phone ساختیم، مشابه همان انیمیشنی است که قبلاً در Xamarin.Forms ایجاد کرده بودیم.

Android

در اندروید باید با استفاده از فایل های AXML انیمیشن های خود را ایجاد کنیم. به همین منظور یک TextView بر روی صفحه ایجاد می کنیم:

<?xml version="1.0" encoding="utf-8"?>  

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  

    xmlns:local="http://schemas.android.com/apk/res-auto"  

    android:orientation="vertical"  

    android:layout_width="fill_parent"  

    android:layout_height="fill_parent">  

  <TextView  

        android:id="@+id/TextHello"  

        android:layout_width="fill_parent"  

        android:layout_height="wrap_content"  

        android:textSize="40dp"  

        android:textColor="#00F"  

        local:MvxBind="Text Hello" />  

</LinearLayout>

حالا می توانیم با مجموعه ی انیمیشن ها کار کنیم. برای شروع یک فایل AXML جدید به نام TextAnimation، در پوشه Drawable، در پوشه Resources ایجاد میکنیم:

<?xml version="1.0" encoding="utf-8"?>  

<set xmlns:android="http://schemas.android.com/apk/res/android"  

      android:shareInterpolator="false">  

  <alpha android:interpolator="@android:anim/linear_interpolator"  

         android:toAlpha="1"  

         android:startOffset="0"  

         android:duration="750"/>  

  <scale android:interpolator="@android:anim/linear_interpolator"  

         android:scaleGravity="center_vertical"  

         android:toXScale="2"  

         android:toYScale="2"  

         android:pivotX="50%"  

         android:pivotY="50%"  

         android:startOffset="0"  

         android:duration="1000"/>  

  <scale android:interpolator="@android:anim/linear_interpolator"  

         android:scaleGravity="center_vertical"  

         android:toXScale="1"  

         android:toYScale="1"  

         android:pivotX="50%"  

         android:pivotY="50%"  

         android:startOffset="1000"  

         android:duration="500"/>  

</set>

در اندروید برای اجرای چند انیمیشن روی یک شی (object)، باید یک SET ایجاد کنیم. SET معادل XAML Storyboard است. سپس می توانیم با استفاده از اشیاء مختلفی از AXML نظیر Alpha، Scale و Rotate یک شی را به صورت پویا نمایش دهیم. در اینجا همه  انیمیشن ها با هم اجرا می شوند و لازم است با استفاده از خاصیت StartOffset یک تاخیر در اجرای هر یک ایجاد کنیم تا یکی پس از دیگری نمایش داده شوند.

iOS

اما مورد آخر یعنی iOS، که از نظر اهمیت هیچ فرقی با موارد قبلی ندارد. از آنجا که ظاهر iOS را با استفاده از زبان C# ایجاد می کنید، می توانید به راحتی انیمیشن های فوق العاده ای خلق کنید. مانند پلتفرم های قبلی، با Override کردن متد ViewDidLoad، محتوای نمایشی را ایجاد میکنیم:

public override void ViewDidLoad()  

{  

    View = new UIView { BackgroundColor = UIColor.White };  

    base.ViewDidLoad();  

    // ios7 layout  

    if (RespondsToSelector(new Selector("edgesForExtendedLayout")))  

    {  

        EdgesForExtendedLayout = UIRectEdge.None;  

    }  

    var label = new UILabel(new CGRect(10, 100, 300, 60));  

    label.Alpha = 0f;  

    label.TextColor = UIColor.Blue;  

    Add(label);  

    var set = this.CreateBindingSet<FirstView, Core.ViewModels.FirstViewModel>();  

    set.Bind(label).To(vm => vm.Hello);  

    set.Apply();  

}

حالا می توانید با استفاده از متد Animate در کلاس UIView، انیمیشن خود را ایجاد کنید:

private void CreateLabelAnimation(UILabel label)  

{  

    UIView.Animate(0.75, 0, UIViewAnimationOptions.CurveLinear,  

    () =>  

    {  

        label.Alpha = 1f;  

    }, null);  

    UIView.Animate(1, 0, UIViewAnimationOptions.CurveLinear,  

    () =>  

    {  

        label.Transform = CGAffineTransform.MakeScale(2f, 2f);  

    }, null);  

    UIView.Animate(0.5, 1, UIViewAnimationOptions.CurveLinear,  

    () =>  

    {  

        label.Transform = CGAffineTransform.MakeScale(1f, 1f);  

    }, null);  

}

متد Animate پنج پارامتر به عنوان ورودی دارد:

·         مدت زمان اجرای انیمیشن به ثانیه

·         مدت زمان تاخیر در اجرا (offset)، قبل از شروع

·         نوع تابع کاهشی (easing)/transition مورد استفاده از نوع شمارشی UIViewAnimationOptions

·         یک عملیات قابل اجرا (متد Void بدون پارامتر ورودی). در اینجا باید تغییرات (transformationهای) مورد نظر روی عنصر را به صورت پویا نمایش دهیم.

·         عملیاتی که باید پس از پایان اجرای انیمیشن، اجرا شوند(متد void بدون پارامتر ورودی).

کد فوق خیلی ساده و قابل فهم است و نیازی به توضیح بیشتر ندارد. انیمیشن اول مقدار Alpha را با استفاده از تابع کاهشی خطی (linear easing function)، در مدت زمان 750 میلی ثانیه به 1 می رساند.

برای تغییر مقیاس می توانید از متد MakeScale مربوط به شی CGAffineTransform استفاده کنید.