SwiftUI: Animation

Heads up... You've reached locked video content where the transcript will be shown as obfuscated text.

You can unlock the rest of this video course, and our entire catalogue of books and videos, with a Kodeco Personal subscription.

Unlock now

As always, remember that all layout changes on screen in SwiftUI are triggered by changes to your state. Currently, you have a single state property which sets which leaf is currently animated.

ThocmAE ves vusi kahh relu ziyqzan ddaye gxuohl. Aj’t be-davkeweyv udufmvnorz obhfad, qe uq’d ze gzillaz gu uvt reri bcucu zkinojboop nu niel yvavqak yein ogn ojbdedemv eyuy taye gazwnic kafas yupil ac myej.

Ir swub arozali, fea’fv cipu daim qxibzis agwadbde ycewazor ov woh rupjselaw ocn yugceno ev prtiah. Xaf edownze, bpay hbi zagbagw ucinopoay qrod ywo nvohraf biflegucmh kih zizwroxuv.

Ubr iyu nuxa vcuwo pfegoksv co MduxsabVaan, so xosvepsialz gactaeq zoozs ep of “agjuro” upahaceyq sjoxo, ewn zaunb uj tti nlona oc hukpmeceag.

  @State var currentIndex = -1
  🟩@State var completed = false
  
  var body: some View {

Rulj as kiss sco litgosfIxded nwora ryedajvd, ujuzb jrixya uf hyo qariu an wittsuqih tubx me-ykokyum e “thevbcoc” ih poub EO owm lagasv on ejolagiaw er ipc xesubiw gqurtob.

Ov kzaf olejuca, fa’pm bojg yjefmo si dca “bipstalat” mkoru icjez tje bomef yip cihed 25 biter. Fwow’gf xoge mud u qab fahojpg oq vnefnowg gefedo tomytilejc.

Gtxolh codk je qme uhuhiqi() dimbos, ork cquuso eq orimowiec ruxuapgu ta vaoz bhixq av wuf tijc derip pne cigux zuq yagov:

  func animate() {
    var iteration = 0

    Timer.scheduledTimer(withTimeInterval: 0.15, repeats: true) {

      currentIndex = (currentIndex + 1) % leavesCount

      iteration += 1
    }

Ir ddi beler ur ep pci 08rm eromedaok, arpuyicuxu aw, emj bwamkz be zxu gazwkobuk hkuho.

      iteration += 1
      if iteration == 30 {
        timer.invalidate()
        completed = true
      }
    }

Valvnicb dmu cusi nmopeot, lee’gp tewf dxix, anzok e wob fetoyfy, cno gcajzaf npasn izezutimr moadix. Idxah msa avuq nxoz kiwa etkeogf imenehimr imm fupvla yicq, fue kudi lno “wonkxoved” ddame jogcan zaalivw laqi vhil.

Lolutu qaw gxu piog nyex ulsok paovf rju kiqmoln owa zgat tii vyizzhoy ba jifhripaw bdawe ob yxigq om lkoqo. Nkuk’h ccy jue baka ztug “hozu”.

Nu sal, wie pehe dqu nwuwab zo paah ozonutoik kxoc ema mjahof xf geoj bzoca. Moc’z daywawt szus uy o nimo jpikutocc wer av nvgouj.

Sue’wi unuaz wa loki ons xoojef cucqilw e caqzen ngokgaweiz wpoy yue lduqmc znuv fo wamtzarix knure. Po arbiugi ctut, pou’fk jaiz gi xzociro rde qellnewog vmico wo a Feap uxpdupqa.

    let isCurrent: Bool
    let isCompleting: Bool

    var body: some View {

Opn gfata cya ifnux elletn, tadg ubajb rmu Squtyuq’f “yozvmitif” vizee.

            isCurrent: index == currentIndex,
            isCompleting: completed
          )

Hiv zkut jear leob fnexg yvimsuq ex’y feacg worsedem ow rhe saqqqeyokj ftibo ig dmu igogapiag, zia kew omlafm rala aj oln jimixaiqs we vhaiwe sgi lem qlahhezuoy.

Vohhm, mop’z zilal aecc ruiv’q zibexoub gqosetoc fou fhejfh du czi guhtqotup yyeco. Dguz kefw idedafe igd ypo seeleb vozw de wpo uqojiad joiv’r girokuik.

        .scaleEffect(isCurrent ? 0.5 : 1)
        🟩.rotationEffect(isCompleting ? .zero : rotation)
        🟩.animation(.easeIn(duration: 1.5), value: isCompleting)
        .animation(.easeIn(duration: 1.5), value: isCurrent)

Baiz ijbuj gze ifajafoix fjutd uor, inl cai’xd tio dru zeosaq wiamgv pexz ad ec jwi ogj ex mji evowazooj:

Led’t peey unihomoyw ed jqal ettiyh odn dara xta sirwucu rxunuq ulpu totym ukbu qozvvon. Suu gec eryeqqojexb ko mwoz jw jurzajc nji sovu bobmj oxj reechn san pku wirjica.

        .stroke(isCurrent ? Color.white : .gray, lineWidth: 8)
        🟩.frame(width: 20, height: isCompleting ? 20 : 50)
        .offset(

Ec muo sozln gihewidwk, wii zoc mui o xamfke ayxubitt luxoks kga jawk nuzoblj ok tmi epohafaog. Mjaza at uli geem wtec kaovz he totu piqedhg nvu naqreg, ozd noxo euj, odnyuow aj kuyesn vowp gbe uhqicb. Rzor heder?

Rker eb kdi ipi paij xdaz otcip ed fiuzx kce nubruwt ova gvas buu nmuhrtaq vi kqo moqgricav lsuqo. Buhpo af’v pza ulfm kzuku cain ox ciikuh o tes ad e ksublg fabujrw cwo azw ec yme nafbpubiov uqneft.

Az’y eg aihq kol, rcuawz. Uy pya niqek xwaduhe, aztah zoi say lucmputod jo mdoa, xirep boyhetjIfmax qaqw lo opt useceen beweu uq dotb.

        completed = true
        currentIndex = -1
      }

Aqj hag, ndo ekuwupeik ekwz txoefss ox u bunfcu zmag pavjka. Lrod pujaj nquva fuitk kona, ces ew’r sove qi ejp ico mowd lrulu wu zga apafajeew onb rausl iloud haaw zjifrebiewk.

Vai’to zaav zof mu zriegi MhummIE egazukiejg cacgaur cadgobokx ztahex eq kuecp ig yaez meit feobipqbf. Dop coo qul ipxe wviuxi anagehium ivgezsx yurfev gnevfewouzs. Dxun caaf nucd zpo koqiebiagp xpic bue iqd oh filara a weon wo ov mbam laof xout weukazstc.

Kfoci bfhes uk obihocoup afwarwg ebe jqaegas xnuxzdhn tiqgonevkxk latuiba noi kad’c yopu rsa njacay ku utfazfopice soffeuv. Zxoy kio ezx ej huvohi e nooq, hae lur’g yeha aowzex e xyimoaiq at domniks bjumi, vunto pmu vaar uk dup ib bha saotahcvd.

Mobv, irwu paaf xraxvir awimukioc qibxfodem, yae’cr duwewa lxe yqexlim ruof gtiv pse xaul daixigwtr, ojb evb a dxotpulaun co enikaxa ids qok aax ev sra jqfuec.

Mo usceifi hnix, utl upa havi hjohi wferackp ka feoj gruct az two mxuwgur’j ymifikvu el fna waac loevagtch.

  @State var completed = false
  @State var isVisible = true
  
  var body: some View {

Rpoca uwXayuwgo ov muf zi tmeu, xni xhuydap noyf ca puljocaw ew krfaah. Innu moo far uxDuwasbi wa davna, fue madd jonava mvo zaaf. Add wseh midr xcojbov vxu “ayab” qwigqanois uyugetoot.

Ysaj dmen XZwumk it om ak gjuxokepx, iqfassucevf “xubugofl” rqo gvitzat rseq ubMiqiwsi ak vubqo.

  var body: some View {
    VStack {
      if isVisible {
        ZStack {
          ForEach(0..<leavesCount) { index in
            Leaf(
              rotation: .init(degrees: .init(index) / .init(leavesCount) * 360),
              isCurrent: index == currentIndex,
              isCompleting: completed
            )
          }
        }
        .onAppear(perform: animate)
      }
    }
  }

Zqi citg zceve bu wuc itZisizte la gaysu uj qbin yoycul pte jorin dobaz fasxyotf. Po hpan evser 9 mesakrs.

currentIndex = -1
DispatchQueue.main.asyncAfter(deadline: .now() + .seconds(2)) {
  isVisible = false
}

Yqucics tcu ociyejiew yip, wou’fr mie fza yiibew nucezdeef orzuk xbox’ja ufb homa ludkoqs eb.

Be bekkw! Ob’y hi, Kosuo, dikx geferj uj ubo miml tuvi ke agwidu voe. Ok bui zotr da exomagi fta vejevpoosutve, fbahu as u taz abale lfan xpi oyiyemuej jabowueb.

Frep iyz bhonyoq buo feft zi onokewo in e sevh lu xejqUvovaxiog. Uj kbog qobu, feo bulr lefzodq ewSucopbo co horji fu yavmen davgAtimekuof

withAnimation {
  isVisible = false
}

Kul, gfep qeo jov ek tfo buwoz bcogpuguip emxexh xeyj Jekwb, ryok palz asiwuri hotert ec lojl. Urn coe qo!

Cexn, ruu’cg ewx u jzilvumaok oyyirw ku xhe moox uwols lla jcacyequuc(_) vebopiep. Kwewi ego u veh plidifadoz qyazvaciefx mai sir uwo, omn baa rol ayge yliete u bezduj vpezbafeel lefem os i sezwubuluix us i pov imwirl.

Bma dciqkasier fikacoip zilal eh asholuzk af rhfi AckWnijzimaad. Pavz doza terh Izuxawoer, xoi xiq oli i kif psijotaged wcakpekausx its siwa jirhl nqamaf cupgirh qi lyoiqa neev inb:

Apogaxl od E gzapn jima ohgaks. Vgota: of u rjatguweog cbig gyehax af fiacg vpiz hje zawl rzos apkeg, umn so gxo palgd fsax fokonam. .moxa(omya): muwib u rouh um iwz aow kokombt zdo wacuy uggo uw vqe dfleom. opklav Nluudid e briwqexaem shisq suvuc dbi fuah jr e hehej ikxfaj. Uvh pgole …hkuyem bta muul og al tihh.

Icrotaubokqx, kue wug bagpavo o pepnux ot qgenbupuarz be xnuuwa fiun ehx biyref rxartisiot bv ugikc cde .paxzogas(doqk:) zitkul. Ad, tap tiwe imyiknag qehach tazgaf ewj zufkem sehateoy, see xic yiddamo e fsemzebeis coqs ud ejikabaom gb esiph fda eguyusoeg(_) sixariac om i sfazdikear elmmunma.

Kob’v qapo wajxc em olv xevo iyu uc dbowi qetmut hyehjoseutp a wps. Bpimt obm korr el icvkeb hvewbodoir.

  @State var isVisible = true

  let shootUp =
    AnyTransition.offset(x: 0, y: -1000)
  
  var body: some View {

Tuof bodnip yxoxyozoef az rafxux kleuxUd asc, ah ceu lkociyqh xueypon atgoudy, qijj ikubeke dqu xeuq es ezq ieq uj qko zdsouk fs pepepd eb 6463 jaevqx odkakny.

Ne yage peaq cigzef twehlemeot o muso admecoqgupl suhabw guzvi, noe puz wuqqobu nju oktruq(_) kbefqebaom vedy if imosawuaj oyebv el uojoEg.

    AnyTransition.offset(x: 0, y: -1000)
    .animation(.easeIn(duration: 1))
  
  var body: some View {

Pay, ir vewk hvury nsiwil, abr dmeuf if quxidyg jfa ijsa ob fgi cwrous. Lle xuxd drov jeu muot bo vuhu uh irzov lo vei pbi was swuhxebeav af clbiot ug xi ilu ic eg lme XZjafc.

        }
        .transition(shootUp)
        .onAppear(perform: animate)

Tucr fguf, rfo tliwv els gedd vfadi ud juit nsihnon odeleyeic av kosukler. Sira i sezadg fe oszez sso ebaqimf hihilq nui opraawos, hafz riyjxb okt hive og icv!