Како ми је ЦААниматион помогао да савладам страх од стварања анимација

Овај чланак се фокусира на употребу ЦА анимација у иОС-у за прављење глатких анимација.

Током мојих првих дана рада са иОС-ом био бих нервозан кад год би ми дизајнер пришао и затражио анимацију у апликацији на којој су радили.

Некада сам мислио да је лако доћи до дизајна за анимације - али његова примена, с друге стране, био је веома тежак задатак.

За имплементацију бих добио помоћ од Гоогле-а, СтацкОверфлов-а и мојих вршњака.

Током процеса развио сам фобију од анимација и увек сам се трудио да их избегнем. Али, све се то једног дана променило.

Проналажење ЦААниматион

Једном сам морао да анимирам низ слика у приказу. Па, шта је био мој први корак? Очигледно, СтацкОверфлов!

Прва веза је добила код.

let image_1 = UIImage(named: "image-1")! let image_2 = UIImage(named: "image-2")! let image_3 = UIImage(named: "image-3")! let images = [image_1, image_2, image_3] let animatedImage = UIImage.animatedImage(with: images, duration: 2.0) imageView.image = animatedImage

Изгледа прилично једноставно, зар не? Да је тако једноставно не бих писао овај чланак.

Ово је анимација која је била потребна:

И као што је вероватно постало јасно, нисам био ни близу тога. Био сам заглављен. Како сам требао да извршим толико прилагођавања у тој анимацији и да их све синхронизујем?

Тада ми је колега рекао да пробам ЦААниматион. Читао сам о томе и пробао на узорку пројекта. На моје запрепашћење, био је заиста моћан и лак за употребу.

Шта је Цоре Аниматион?

Цоре Аниматион вам помаже да извршите више анимација са готово нула заузетости процесора.

Омогућава вам велику брзину кадрова и многа прилагођавања која можете користити са врло мало кода.

Више детаља можете пронаћи у документима овде: //девелопер.аппле.цом/доцументатион/куартзцоре

Успео сам да изведем основну имплементацију за неколико сати:

func addAnimation(firstImageView: UIImageView, secondImageView: UIImageView) { let basicAnimation1 = getBasicAnimation(withInitialPostion: centerPosition, finalPos: finalPosition) firstImageView.layer.add(basicAnimation1, forKey: "position") let basicAnimation2 = self.getBasicAnimation(withInitialPostion: self.initalPosition, finalPos: self.centerPosition) secondImageView.layer.add(basicAnimation2, forKey: "position") self.addNextImage(forImageView: firstImageView) } func getBasicAnimation(withInitialPostion initialPos: CGPoint, finalPos: CGPoint) -> CABasicAnimation { let basicAnimation = CABasicAnimation(keyPath: "position") basicAnimation.fromValue = NSValue(cgPoint: initialPos) basicAnimation.toValue = NSValue(cgPoint: finalPos) basicAnimation.duration = 1 basicAnimation.isRemovedOnCompletion = false basicAnimation.fillMode = CAMediaTimingFillMode.forwards basicAnimation.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.easeInEaseOut) return basicAnimation }

За ову примену сам користио ЦАБасицАниматион .

ЦАБасицАниматион класа помаже да анимирају и слој имовине (која може бити боја позадине, непрозирност, позиција, скала) између две вредности. Само треба да дате почетну и крајњу вредност, а за остало ће се побринути. Анимација започиње одмах у следећој петљи извођења, као што је овде детаљније описано.

Вратимо се нашем проблему.

Да бих то применио, направио сам два приказа слика и додао им две одвојене слике. Тада сам наставио да их анимирам један за другим користећи ЦААниматион.

Изворни код можете пронаћи овде.

Ако прегледате последњи гиф, видећете да нешто није у реду. Пре него што прва слика поклон кутије нестане, слушалице кратко трепћу, а затим се слика помера нагоре.

Зашто се ово дешава?

То је зато што чим додамо анимацију у приказ слике, додајемо следећу слику у тај приказ (редови број 5 и 6):

private func addAnimation(firstImageView: UIImageView, secondImageView: UIImageView) { let basicAnimation1 = getBasicAnimation(withInitialPostion: centerPosition, finalPos: finalPosition) firstImageView.layer.add(basicAnimation1, forKey: "position") let basicAnimation2 = self.getBasicAnimation(withInitialPostion: self.initalPosition, finalPos: self.centerPosition) secondImageView.layer.add(basicAnimation2, forKey: "position") self.addNextImage(forImageView: firstImageView) }

Овде се боримо са питањем како да синхронизујем обе слике у анимацији. Али решење за ЦААниматион увек постоји.

ЦА трансакције

ЦА трансакције помажу нам да синхронизујемо више анимација заједно. Осигурава да све анимације које смо повезали у себе започну истовремено.

Такође, својим анимацијама можете дати блок за довршавање, који ће се извршити када се заврше све ваше анимације у једном пакету.

Више о томе можете прочитати овде.

private func addAnimation(firstImageView: UIImageView, secondImageView: UIImageView) { CATransaction.begin() CATransaction.setCompletionBlock { self.addNextImage(forImageView: firstImageView) } let basicAnimation1 = getBasicAnimation(withInitialPostion: centerPosition, finalPos: finalPosition) firstImageView.layer.add(basicAnimation1, forKey: "position") CATransaction.commit() let basicAnimation2 = self.getBasicAnimation(withInitialPostion: self.initalPosition, finalPos: self.centerPosition) secondImageView.layer.add(basicAnimation2, forKey: "position") }

Почињеш писањем CATransaction.begin(). Затим синхронизирано напишите све своје анимације које желите да радите. На крају, позив CATransaction.commit()који ће покренути анимацију у блоку.

Погледајмо како сада изгледа наша анимација:

Последња ствар коју сам требало да урадим је да додам пролећни ефекат анимацији. Срећом, ЦААниматион је такође имао решење за ово.

ЦА Спринг Аниматион

ЦА Спринг Аниматион, када се дода слоју, даје му ефекат налик опрузи, тако да изгледа да га опруга вуче према циљу.

Што је слој даље од циља, то је веће убрзање ка њему.

Омогућава контролу над физички заснованим атрибутима као што су пригушење опруге и крутост. - Документи

Више о томе можете прочитати из Апплеове документације: //девелопер.аппле.цом/доцументатион/куартзцоре/цаспринганиматион

Применимо га на наш постојећи код:

private func getSpringAnimation(withInitialPostion initialPos: CGPoint, finalPos: CGPoint) -> CASpringAnimation { let basicAnimation = CASpringAnimation(keyPath: "position") basicAnimation.fromValue = NSValue(cgPoint: initialPos) basicAnimation.toValue = NSValue(cgPoint: finalPos) basicAnimation.duration = basicAnimation.settlingDuration basicAnimation.damping = 14 basicAnimation.initialVelocity = 5 basicAnimation.isRemovedOnCompletion = false basicAnimation.fillMode = CAMediaTimingFillMode.forwards return basicAnimation }

Мој посао је овде завршен.

Укратко, ево неких предности коришћења ЦА анимација:

  • Једноставни су за употребу и примену
  • Доступно је пуно прилагођавања
  • Могуће је синхронизовати више анимација
  • Готово нула употребе процесора

Ово је само неколико предности. Могућности су бесконачне.

Сад, кад год се појаве захтеви за анимацијом, осећам се сигурно да их дизајнирам и примењујем. И надам се да се и ви осећате исто након што ово прочитате.

Слободно оставите све предлоге или повратне информације.