آموزش ساخت انیمشن زنجیره ای در سوئیفت

مقدمه

با سلام به همه شما برنامه نویسان عزیز :)

امروز قرار هستش با ساخت انیمشن زنجیره ای آشنا بشیم که کمک میکنه تا انیمیشن های چند بخشی بسازیم .

شروع

مطمئنا شما با ساخت انیمشن های تک بخشی آشنا هستید اما تا به حال فکر کرده اید که اگر بخواهید چند انیمیشن را یکی پس از دیگری اجرا کنید چگونه میشود ؟

ما در حالت معمولی اگر بخواهیم به یک view انیمشن بدهیم به اینصورت مینویسیم .

UIView.animate(withDuration: 1) {
// Animate your views here
view.frame.origin.x += 1
}

در این کد ما فقط یک انیمشن اجرا کردیم و آن هم جابجا کردن فریم ویو به اندازه یک واحد اما ما میخواهیم بعد از جابجا شدن ویو رنگ آن نیز سبز شود :|

راه حلی که به ذهن اکثر آدمای تازه کار میرسه احتمالا این هستش

UIView.animate(withDuration: 1, animations: { 
view.frame.origin.x += 200
}, completion: { _ in   
UIView.animate(withDuration: 1, animations: {  
view.backgroundColor = .green 
       })
})

کاری که کد بالا انجام میده این هستش که در compeletion متود animate دوباره یک انیمشن جدید ایجاد کرده است و رنگ ویو بعد از جابجایی سبز میشود . اما اگر چند حالت دیگر داشته باشیم چطور !!!!

خب احتمالا چهره مدیرتون بعد از دیدن کد شما این شکلی میشه :))

استفاده از UIView’s animateKeyframes راه حل ما هستش

در iOS 7 اپل متودی به نام animateKeyframes معرفی کرد تا بتوان قطعه های انیمشن ساخت

در واقع شما با این متود انیمیشن های خود را فریم به فریم میسازید درست مثل انیمیشن های قدیمی که فریم به فریم نقاشی میشدند و بعد از آن به هم متصل میشدند

پیاده سازی این متود نیازمند زمان انیمشن و تاخیر هستش :

حالا وقت این هستش که ما انیمشن های خودمان را اضافه کنیم برای این کار از متود addKeyframe است استفاده میکنیم این متود سه پارامتر اجباری دارد که عبارتند از :

زمان شروع فریم (frameStartTime)

این پارامتر مشخص میکند که کی قرار هست فریم انیمشن شما اجرا شود ؟ توجه داشته باشید که عدد آن باید بین ۰ تا ۱ باشد. به این معنی که اگر ما زمان انیمشن خود ۵ ثانیه میباشد و میخواهیم این فریم بعد از ۲ ثانیه اجرا شود زمان شروع ما 2/5 (0.4) میشود

زمان فریم (frameDuration)

این پارامتر مشخص میکند که فریم شما چقدر باید دوام داشته باشد که این عدد نیز باید بین بازه ۰ تا ۱ باشد اگر مدت زمان انیمشن ما ۵ ثانیه میباشد و میخواهیم ۱ ثانیه دوام داشته باشد ۱/۵ (۰.۲) میشود