ایجاد انیمیشن ساده با استفاده از UIImageView در iOS

همان طور که همیشه گفته ایم ، تا زمانی که خودتان دست به کار نشوید ، نمی توانید برنامه نویسی را یاد بگیرید. پس ، طبق روال ما را همراهی نمایید تا نحوه ایجاد متحرک سازی در اپ iOS را آموزش دهیم. در این جلسه قصد داریم یک اپ انیمیشنی ساده را آموزش دهیم. کار را با ساخت یک memory game شروع خواهیم کرد. مطمئن هستیم که این کار زیاد سخت نخواهد بود. با این حال ، تجربه یادگیری بسیار خوبی برای شما به همراه خواهد داشت. اما ، این بازی برای شما تولید پولی را به همراه نخواهد داشت. در آموزش های بعدی ، ما برخی از تکنیک های پیاده سازی مانند یکپارچه سازی مرکز بازی (game center integration) ، پیاده سازی خرید درون برنامه ای ، یکپارچه سازی Nextpeer برای پشتیبانی از بازی های چند نفره و غیره را نشان خواهیم داد. برای شروع ، بیایید ببینیم چگونه می توانیم UIImageView را برای پیاده سازی انیمیشن ساده استفاده نماییم.

UIImageView برای انیمیشن ها

در iOS ، ایجاد انیمیشن های پیشرفته نیازی به نوشتن کدهای پیچیده ندارند. کلاس UIImageView ساده ترین روش را برای توسعه دهندگان فراهم می کند تا انیمیشن ها را پیاده سازی نمایند. تمام چیزی که ما نیاز داریم ، ساخت یک شیء UIImageView ، با یک مجموعه از تصاویر برای متحرک سازی می باشد.  هنگامی که کار ساخت انیمیشن تمام شد ، image view به طور خودکار فریم های تکی را رندر می کند. جالب است، درسته؟

UIImageView پیاده سازی انیمیشن ساده را بسیار آسان می نماید. بیایید یک پروژه Xcode جدید ایجاد کنیم و نحوه کار این کلاس را با هم ببینیم.

ایجاد پروژه SimpleAnimation

ابتدا ، Xcode را راه اندازی می کنیم (مطمئن شوید که از Xcode ورژن 4.6 یا بالاتر استفاده می نمایید) و یک پروژه جدید با استفاده از تمپلت “Single View application” ایجاد می کنیم.

برای ادامه روی کلید “Next” کلیک می کنیم. با مراجعه به تصویر زیر ، مقادیر موردنیاز برای پروژه Xcode را تکمیل می نماییم. مطمئن می شویم که گزینه “Use Storyboard” انتخاب شده باشد.

برای ادامه روی کلید “Next” کلیک می کنیم. سپس Xcode ، از ما محل ذخیره سازی پروژه “SimpleAnimation”  را می پرسد. هر پوشه ای را که مدنظر داریم پروژه در آن ذخیره شود ، انتخاب می کنیم (مثلاً پوشه ای در دسکتاپ).

پیاده سازی ViewController

قبل از این که کلاس ViewController را پیاده سازی نماییم ، ابتدا بسته تصاویر را از اینجا  download the image pack دانلود نمایید. این بسته ، شامل تمامی تصاویر موردنیاز برای ساخت انیمیشن می باشد. فایل بسته تصاویر را از حالت زیپ خارج نموده و تمام تصاویر را به پروژه SimpleAnimation خود اضافه نمایید.

در navigator پروژه ، فایل “ViewController.m” را انتخاب کرده و متد “viewDidLoad” را با کدهای زیر ویرایش می کنیم:

- (void)viewDidLoad
{
    [super viewDidLoad];
 
    // Load images
    NSArray *imageNames = @[@"win_1.png", @"win_2.png", @"win_3.png", @"win_4.png",
                        @"win_5.png", @"win_6.png", @"win_7.png", @"win_8.png",
                        @"win_9.png", @"win_10.png", @"win_11.png", @"win_12.png",
                        @"win_13.png", @"win_14.png", @"win_15.png", @"win_16.png"];
 
    NSMutableArray *images = [[NSMutableArray alloc] init];
    for (int i = 0; i < imageNames.count; i++) {
        [images addObject:[UIImage imageNamed:[imageNames objectAtIndex:i]]];
    }
 
    // Normal Animation
    UIImageView *animationImageView = [[UIImageView alloc] initWithFrame:CGRectMake(60, 95, 86, 193)];
    animationImageView.animationImages = images;
    animationImageView.animationDuration = 0.5;
 
    [self.view addSubview:animationImageView];
    [animationImageView startAnimating];
}

این همان کدی است که ما برای متحرک سازی نیاز داریم. ابتدا ، تمام تصاویر را لود می نماییم و آنها را در یک آرایه ذخیره می نماییم. سپس ، یک شیء  UIImageView ایجاد کرده و آن را به آرایه image به عنوان مقداری از animationImages ارائه می دهیم. این آرایه نشان دهنده “frames” یک کارتون رقص می باشد. می توانیم نرخ فریم ها را با تتظیم کردن خصیصه animationDuration کنترل نماییم. این خصیصه ، مقدار زمان لازم برای گذر ار یک چرخه تصاویر را مشخص می کند. برای مثال ، گذر از 16 تصویر می تواند 0.5 ثانیه به طول بیانجامد.

هم چنین به صورت اختیاری ، می توانیم خصیصه animationRepeatCount را نیز تنظیم نماییم ؛ تا تعداد دفعاتی که انیمیشن تکرار می شود را تعیین نماییم. اگر این خصیصه تنظیم نشود ، انیمیشن به طور نامحدود تکرار می شود.

با تمام خصیصه های پیکربندی شده ، می توانیم به سادگی متد startAnimating را برای آغاز متحرک سازی تصاویر ، فراخوانی نماییم. برای این که نحوه عملکرد آن را ببینیم ، اپ را کامپایل و اجرا می نماییم.

برای این که به شما ایده بهتری درباره خصیصه animationDuration بدهیم ، سعی می کنیم یک حالت slow motion animation را با افزودن کد زیر به متد “viewDidLoad” اضافه نماییم:

    // Slow motion animation
    UIImageView *slowAnimationImageView = [[UIImageView alloc] initWithFrame:CGRectMake(160, 95, 86, 193)];
    slowAnimationImageView.animationImages = images;
    slowAnimationImageView.animationDuration = 5;
    
    [self.view addSubview:slowAnimationImageView];
    [slowAnimationImageView startAnimating];

کد فوق انیمیشن دیگری را اضافه خواهد نمود ، اما طول انیمیشن آن متفاوت است. دوباره اپ را کامپایل و اجرا می نماییم. عملکرد اپ باید شبیه تصویر زیر باشد:

در جلسه بعد چه چیزی برای شما آموزش خواهیم داد؟

UIImageView   یک روش بسیار ساده برای پیاده سازی انیمیشن جذاب را برای ما فراهم می کند. در جلسات بعد ، ما نگاهی به سایر روش های ایجاد افکت های بصری خواهیم انداخت.