IOS-projektin laatiminen tarinankerrontaa varten

Ennen kuin kirjoitat yhden rivin animaatiokoodia, tarvitset vankan perustan. Käynnistä Xcode (versio 15 tai myöhemmin suositeltu) ja luo uusi App-projekti. Valitse Swift kielenä ja UIKit käyttöliittymälle. Nimeä projektisi ja varmista, että kohdistat iOS 16.0 tai myöhemmin käyttääksesi uusimpia animaatio-rajapintoja.

Projektin sisällä tiedostot ryhmitellään ryhmiin: mallit (tarinatiedot), Näkymät (kustomoitujen käyttöliittymän komponenttien osalta), Valvojat (näkymäohjaimet) ja Apuohjelmat (apulaiset ja laajennukset). Tämä modulaarinen rakenne pitää koodin ylläpidettävissä tarinasi kasvaessa.

Lisätään -peruskirja tai valitaan ohjelmallinen lähestymistapa käyttäen [ alaluokkia. Joustavuuden vuoksi monet kehittäjät suosivat tarinatauluja nopeaan prototyyppien ja sitten siirtyä koodin hienoksi grained ohjaus.

Tarinankeräysliittymän suunnittelu

Käyttöliittymän tulisi olla puhdas, minimaalinen ja keskittyä kerrontaan. Käytä [ pitkiä tekstikohtia, [ kuvituksia ja [ tapauksia haarautumisvalintoihin. Harkitkaa [] UIStackView[]] yhdistää nämä elementit dynaamisesti eri näytön kokoja.

Tarinan tekstin asettelu

Kääri tarinan kohdat [] kanssa ja [], jotta vältyttäisiin vahingossa editoimasta. Ota käyttöön [ hakulla vain, jos tarina paljastaa sivu sivulta. Saumatonta auto-advancing tekstiä, käytä [ sisällä [] sileämpiä mutta edistyneempiä typografia animaatioita.

Kuva ja merkkinäkymä

Aseta merkkikuvia tai taustakuvia omistettu alaviivoihin. Aseta ja leikkeellä rajoille. Parallaksiefektejä tai hienovaraista liikettä varten käytä kuvanäkymään . Tämä antaa syvyyden tunteen ilman animaatiokoodia.

Valitse painikkeet

Haaravalinnat ovat interaktiivisen tarinankerronta sydämessä. Asema kaksi tai useampia painikkeita näytön alareunassa. Käytä [ ja sävyvärejä, jotka heijastavat tunnelmaa ... lämmin sävyjä ystävällisiin vaihtoehtoihin, viileä ääniä salaperäisille poluille. Yhdistä jokainen painike tapahtuma , joka päivittää tarinan tilan ja laukaisee vastaavat animaatiot.

Tarinatietojen arkistointi

Tallenna tarinasi jäsennellyssä mallissa. Luo luokka, jossa on tunniste, teksti, kuvan nimi ja sarja esineitä:

class StoryNode {
 let id: String
 let text: String
 let imageName: String?
 let choices: [Choice]
 var animationType: AnimationType = .slideIn
}
struct Choice {
 let title: String
 let destinationId: String
}

Lataa tarinatietoja JSON-tiedostosta tai paikallisesta tietokannasta (esim. Core Data tai Realm). Tietojen erottaminen katselulogiikasta tekee uusien haarojen lisäämisen helpoksi ilman koodia.

Valtionhallinto

Säilytä sanakirjaa käyttäjän päätösten, inventaarion tai lippujen seuraamiseksi. Tämä mahdollistaa ehdollisen haarautumisen myöhemmin. Esimerkiksi jos käyttäjä aiemmin säästi merkin, tarina saattaa avata piilotetun polun. Päivitä tila jokaiseen valintaan ja välitä se seuraavalle .

Toteutus Omat animaatiot

Animaatiot muuttavat staattisen tarinan uppoutuvaksi kokemukseksi. Uikit tarjoaa useita sisäänrakennettuja mekanismeja; valitse oikea jokaiselle tehosteelle.

Perusanimaatiot

Käytä useimmissa siirroissa. Esimerkiksi liukuessa merkissä:

UIView.animate(withDuration: 0.8, delay: 0.2, usingSpringWithDamping: 0.7, initialSpringVelocity: 0.5, options: .curveEaseInOut, animations: {
 characterImageView.center.x = self.view.center.x
}, completion: nil)

Kevätanimaatiot tuntuvat luonnollisilta ja sopivat erinomaisesti luonteen sisääntuloihin tai tekstin paljastamiseen.

Ydinanimaatio CALAyerin kanssa

Monimutkaisempien vaikutusten, kuten tekstikaskadoinnin tai hehkuvien elementtien, osalta toimi suoraan ja kanssa. Luo haihdu-animaatio avainhenkilölle.

let fadeIn = CABasicAnimation(keyPath: "opacity")
fadeIn.fromValue = 0.0
fadeIn.toValue = 1.0
fadeIn.duration = 2.0
characterLayer.add(fadeIn, forKey: "fadeIn")

Yhdistä useita animaatioita pyörittää, mittakaavassa ja haalistua samanaikaisesti.

Polkujen näppäinvälitysanimaatiot

Jos merkki seuraa käämityspolkua (esim. perhonen, joka lepattaa ruudun poikki), käytetään -kirjainta :

let path = UIBezierPath()
path.move(to: startPoint)
path.addCurve(to: endPoint, controlPoint1: cp1, controlPoint2: cp2)
let pathAnimation = CAKeyframeAnimation(keyPath: "position")
pathAnimation.path = path.cgPath
pathAnimation.duration = 3.0

Tämä tekniikka toimii kauniisti koriste-elementit, jotka parantavat ilmapiiriä.

Tekstikohtaiset animaatiot

Animoi tekstin ulkonäkö kirjain-kirjain kirjaimella ja ajastin. Vaihtoehtoisesti sovelletaan [iOS 17+] kirjoituskoneen vaikutuksen osalta. Yhdistä hienovaraiseen mittakaavaan tai sumeuteen dramaattisten paljastusten varalta.

Siirtymäanimaatiot kuvien välillä

Siirryttäessä yhdestä tarinan solmusta seuraavaan, käytä mukautettua näkymää ohjaimeen. Muodosta :ksi määritelläksesi työntötehon intiimien hetkien tai sivu-curlin sivun kääntämiseksi. Tämä on kiillotettu kuin yksinkertainen lahja/poistuma.

Interaktiivisten elementtien lisääminen

Nappien lisäksi mukana on eleitä, jotka syventävät vuorovaikutusta. Pyyhkäise eleissä voi edistää tarinaa tai paljastaa piilotettuja esineitä. Long-press voisi tarkastaa kohteen. Lisää merkki, jotta vetää ... ja animoida merkki takaisin alkuperäiseen asemaansa, jos se putoaa kohdealueen ulkopuolelle.

Ääni- ja haptiikkapalaute

Pari animaatioita äänen avulla . Liikuttava haptinen palaute kautta, kun painiketta painetaan tai kriittinen tarina rytmi tapahtuu. Tämä moniaistillinen lähestymistapa lisää merkittävästi upotusta.

Dynaaminen tyyppi ja saavutettavuus

Tuki Dynaaminen tyyppi käyttämällä suosittuja kirjasimia ([) ja skaalattuja kirjasimia. Varmista, että kaikilla interaktiivisilla elementeillä on esteettömyysmerkinnät. Käytä ilmoittaaksesi tarinan muutoksista Äänen yli -käyttäjille.

Suorituskyvyn optimointi

Sileät animaatiot ovat kriittisiä; runko tippaa rikkoa upotus. Profiili sovelluksesi Xcode... Instruments (Core Animation työkalu). Yhteiset sudenkuopat ovat:

  • Ylipiirustus: Vältä asettamasta kerroksiin, jotka ovat täysin läpinäkymättömiä.
  • Offscreen renderointi: Minimoi ja käyttö suurissa kuvissa. Sen sijaan esinaamio kuva koodilla tai käytä konttinäkymää.
  • Suuret kuvan mitat: Pienemmät kuvat näytetään koon mukaan. Käytä kunnollisia renderointitiloja.

Aseta vaihtoehtoparametriksi , niin että kosketus pysyy reagoivana animaatioiden aikana.

Testit todellisilla laitteilla

iOS-simulaattori ei toista todellista suorituskykyä. Testi useilla laitteilla, erityisesti vanhoilla malleilla (iPhone 11 tai aiemmin). Kiinnitä huomiota akun tyhjenemiseen . Liialliset animaatiot voivat aiheuttaa lämpöä ja akun käyttöä. Käytä harkitusti ja suosi blokkipohjaisia animaatioita ajastinohjautuvien silmukoiden sijaan.

Kirjoita tarinan tilan logiikkaa ja käyttäjävirtojen UI-testejä varten. A/B testaa eri animaatiokestoja ja -tyylejä pienellä käyttäjäryhmällä nähdäksesi, mikä tuottaa suuremman sitoutumisen.

Julkaisu ja jakelu

Kun sovellus on kiillotettu, arkistoi se Xcodeen ja lataa App Store Connectiin. Valmista kuvakaappaukset, joissa esitellään parhaat animaatiosi. Kirjoita mukaansatempaava kuvaus, jossa korostetaan interaktiivista tarinaa.

Ulkoisten resurssien osalta Apple.s:n virkamies Animaatio- ja haptiikkadokumentaatio[ ja Core Animaatio-opas[. Inspiraatiota varten, tutkia ] Kodeco.s iOS Animaatiokirja.

Päätelmät

Rakentamalla interaktiivinen tarinankerronta sovellus iOS mukautettuja animaatioita on palkitseva sekoitus kerronnallista suunnittelua ja teknistä taitoa. Jäsentämällä tarinan tiedot, valitsemalla oikea animaatio tekniikoita, ja tiukka testaus suorituskykyä, voit luoda sovelluksen, joka todella kiehtoo käyttäjiä. Aloita pieni vuorovaikutusta . Dia, haalistua, steadin . Sitten kerros monimutkaisia kunnes tarinan maailma tuntuu elossa.

Huomaavainen muotoilu, puhdas koodi ja kiillotetut animaatiot erottavat tarinankerrontasovelluksen ahtaalla markkina-alueella. Avaa Xcode ja tuo ensimmäinen animoitu merkki näytölle.