Kuinka CAAnimation auttoi minua voittamaan pelkoni animaatioiden luomisesta

Tämä artikkeli keskittyy CA-animaatioiden käyttämiseen iOS: ssä sujuvien animaatioiden tekemiseen.

Ensimmäisinä päivinä työskennellessäni iOS: n kanssa minusta tuli hermostunut aina, kun suunnittelija tuli luokseni ja pyysi animaatiota sovelluksessa, jota he työskentelivät.

Ajattelin, että animaatioiden suunnittelun keksiminen oli helppoa - mutta sen toteuttaminen toisaalta oli erittäin vaikea tehtävä.

Saan Google, StackOverflow ja muut ikäiseni apua toteutukseen.

Kehitin prosessin aikana fobian animaatioita ja yritin aina välttää niitä. Mutta kaikki muuttui yhtenä päivänä.

CAAnimaation etsiminen

Kerran minun piti animoida kuvasarja kuvassa. Joten mikä oli ensimmäinen askeleeni? StackOverflow!

Ensimmäinen linkki sai koodin.

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

Näyttää melko suoralta, eikö? Jos se olisi niin yksinkertaista, en kirjoittaisi tätä artikkelia.

Tätä animaatiota vaadittiin:

Ja kuten luultavasti on käynyt selväksi, en ollut missään lähellä sitä. Olin jumissa. Kuinka minun piti tehdä niin paljon mukautuksia animaatiossa ja synkronoida ne kaikki?

Sitten kollegani käski minun kokeilla CAAnimationia. Luin siitä ja kokeilin sitä esimerkkiprojektissa. Hämmästyksekseni se oli todella tehokas ja helppo käyttää.

Mikä on perusanimaatio?

Ydinanimaatio auttaa sinua suorittamaan useita animaatioita lähes ilman prosessorin käyttöä.

Se antaa sinulle korkean kehysnopeuden ja monia mukautuksia, joita voit käyttää hyvin pienellä koodilla.

Löydät lisätietoja asiakirjoista täältä: //developer.apple.com/documentation/quartzcore

Pystyin suorittamaan perustoteutuksen muutamassa tunnissa:

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 }

Tässä toteutuksessa käytin CABasicAnimation-sovellusta .

CABasicAnimation luokka auttaa animoida kerros ominaisuus (joka voi olla tausta väri, opasiteetti, asema, asteikko) kahden arvon välillä. Sinun tarvitsee vain antaa alku- ja loppuarvo, ja loput hoidetaan. Animaatio alkaa välittömästi seuraavassa ajosyklissä, kuten tässä kuvataan tarkemmin.

Palataan nyt ongelmaan.

Tämän toteuttamiseksi otin kaksi kuvanäkymää ja lisäsin niihin kaksi erillistä kuvaa. Sitten jatkoin niiden animaatiota peräkkäin CAAnimationin avulla.

Löydät lähdekoodin täältä.

Jos tutkit viimeisen gifin, huomaat, että jokin on poissa. Ennen kuin lahjapaketin ensimmäinen kuva menee näkyvistä, kuulokkeet vilkkuvat hetkeksi ja sitten kuva liikkuu ylöspäin.

Miksi tämä tapahtuu?

Se johtuu siitä, että heti kun lisäämme animaation kuvanäkymään, lisätään seuraava kuva kyseiseen näkymään (rivit 5 ja 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) }

Täällä kamppailemme animaation molempien kuvien synkronoinnin kanssa. Mutta CAAnimationilla on aina ratkaisu.

CA-tapahtumat

CA-tapahtumat auttavat meitä synkronoimaan useita animaatioita yhdessä. Se varmistaa, että kaikki animaatiot, jotka olemme niputaneet yhteen, alkavat kaikki samanaikaisesti.

Voit myös antaa animaatioille valmistuslohkon, joka suoritetaan, kun kaikki animaatiot yhdessä paketissa on valmis.

Voit lukea lisää täältä.

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") }

Aloitat kirjoittamalla CATransaction.begin(). Kirjoita sitten kaikki animaatiot, jotka haluat tehdä synkronoituna. Lopuksi kutsu, CATransaction.commit()joka aloittaa animaation lohkossa.

Katsotaanpa, miten animaatiomme näyttää nyt:

Viimeinen asia, jonka minun piti tehdä, oli lisätä Spring-efekti animaatioon. Onneksi CAAnimationilla oli ratkaisu myös tähän.

Kalifornian kevään animaatio

CA-animaatio, kun se lisätään kerrokseen, antaa sille jousen kaltaisen vaikutuksen, joten jousi näyttää vetävän sitä kohti kohdetta.

Mitä kauempana kerros on kohteesta, sitä suurempi kiihtyvyys sitä kohti on.

Sen avulla voidaan hallita fyysisesti perustuvia ominaisuuksia, kuten jousen vaimennusta ja jäykkyyttä. - Asiakirjat

Voit lukea siitä lisää Applen dokumentaatiosta: //developer.apple.com/documentation/quartzcore/caspringanimation

Toteutetaan se olemassa olevaan koodiin:

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 }

Työni tehdään täällä.

Yhteenvetona tässä on joitain CA-animaatioiden käytön etuja:

  • Niitä on helppo käyttää ja toteuttaa
  • Saatavilla on paljon mukautuksia
  • On mahdollista synkronoida useita animaatioita
  • Lähes nolla suorittimen käyttöä

Nämä ovat vain muutamia etuja. Mahdollisuudet ovat rajattomat.

Nyt, kun animaatioita koskevat vaatimukset täyttyvät, olen sitä mieltä, että suunnittelen ja toteutan niitä. Ja toivon, että sinäkin tunnet samalla tavalla lukiessasi tämän.

Voit vapaasti jättää ehdotuksia tai palautetta.