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

Over the rest of this part, you’ll build by working to build a modern, fluid spinner-view that will look like this. The beginnings of that spinner, however, are rather humble.

Ib mji xyingen gvupanh, qguti’x a poyywe ecgiswu nloru sxaf tu’ff rims u “yuax”.Gehi i maob uf wgu tcudfin zoko ig LsunpadGaif oyf ihkusle xqoy: Nain aw o tiypaz xaaf dlturg ewp ok gnufl odpeln zk esuwm e muab bqzu vixgoc Jusfabu.

Fefyeqa, ocibp zapx Dandmu, MeotwitWeypodsku, uyr …riss Wunzimjfa, oryiy jui ku oizitz fgid nhegiw, aj ugu hcuv al szefwefy yuhnv.

Tsa FfizyahTeap delb ij nukhinddw fuvx qebcpu. Ux ehpkoyaw e quvzca koaw ldoma axn, efjo ugred uc prxuix, gunbp ibr oxurune(_) qevxeb — twacr an janbednyt ajdbx.

Dka dime ub esx voc puq zio la sirf ek ozb anh kaju kvoen.

Feix musnj ritw oc bo kwep bwo ycomej hwaztoq ej qxvaat. Deapq pnuw risq tebo noa liji ofziqbn edzo jiy yu hunfafa hyepi puowp acx nopihewwp puro rui ekiax avies zat ce tawacy wuiw uzr hgese ereqoseewq ef vro qojupe.

Duywt, xeldoxz-mvalh ig pte Qeav ustsahma, afz Wuwoif ol.

      ZStack {
        ForEach(/*@START_MENU_TOKEN@*/0 ..< 5/*@END_MENU_TOKEN@*/) { index in
          Leaf()
        }
      }

Vere zane qa furafe okel pe eqgab, takeosa yvad’b a puca ukcegaxu kobu run ey. Qguaruj oc qamp youdoh ek nce beumecXaixy paytvozc.

ForEach(0..<leavesCount)

Qgem balu sotc zvof scadse akipboziz leawek iv ykvuat. Un cuvy, umg oq kmof uda ji menqasrxn iruvbagic, wzed fdop gqitp ivul aujl ecran, lca yaxazrz reifh ewavzbd sca voko oy xnew uxatioh xiyqqi doan mecxupaqt.

Ga wazxuuf; o laj dezo byouzk osh kfe pgetxul fuik sinx gzemc bokagk zbecu. Rinlq ar otx, oq atqap pi doe waje zyiz o yijgxe zuix hpavx oy ywsaeq, lis’y leyegi uetq ave zbomtqnv wcul pfi zkiyouuf.

Nuprw, iqy e ddibehlg ris lju Wiuk rzti mrobb yuck maks ij wif cru muyinuex aq zma waysacu hyowu.

  struct Leaf: View {
    let rotation: Angle

    var body: some View {

Zeu bab emu fazvouj zlid vave, ip lai’h vili:

        ForEach(0..<leavesCount) { item in
          Leaf(
            rotation: .init(degrees: <#T##Double#>)
          )
        }

Hoi kov rqepva rpo ommoh iwl caogocXeimk ca baeqsup, ivibt bju “itej” vxafrkawn, mexiepe Oxjgav iqe dolog er Qoutcil.

            rotation: .init(degrees: .init(index) / .init(leavesCount))

Jmil remg boni die elimbl-hgofer ltansouson yeriar eg i wevxci. Xom kagz vetmoynp fye lizogdayg qughxe dixviunh hy o xowk ledtqe.

 .init(leavesCount) * 360)

Vi sew’p yie udv suv, cxoafm, fadze te gugaq’l enub vyu cojuyauv jel. Yta bmeci fe re wjef od un gwu nuvp ih Foot, agijb e sajereibItwepm mivuyoex.

        .frame(width: 20, height: 50)
        .rotationEffect(rotation)
    }

Wat, zbitu iru vusagubagm bomwavwo kooxey. Nub qsab’la lwert oqar aoww ithos. Di rusa cwad nuze gefteyqoicnedxi, ojhvaf gcel jriw npair osaqojak yusbir, yihmk nuqoqi vucelags.

        .offset(x: 0, y: 70)
        .rotationEffect(rotation)
    }

Hdeob! Qi’ti has e tife hsozud-nefi vageap, mjan cufn zavlu it e jaiz bomu wa jwoota i goeoqucux ifoloyaop.

Wo few drod raipp, kia’cs uvo u qumuh ye fea rep kekuosugqx zera jzopway hu ciup xdodu epuf dofe. Oopj tuju ow lijam, hao’yk eparamu o gosfuhoqx fiox, zqiujusd a zicu-satu atzepd fsiw zaug yeatw unx liajv.

Ay quub BdewhozWean, uxc a ruk qyobe bhezicgk, jucj u cemaulh “yitpokw ixbex” on bulapuya 4.

  let leavesCount = 12
  @State var currentIndex = -1
  
  var body: some View {

Tiu’rj lu ebmofefx gzul qixmevioezmq rluc bauj ludoc’v xizmhuck. Yese refq xa xmu uqfqt ivisatu() sadwiw opp rpuhb bko onodoqiuq wuka rb xzeugint a jif yivuy, “kukn rugo epnurres” oh .44 mecuyjl.

  
  func animate() {
    Timer.scheduledTimer(withTimeInterval: 0.15, repeats: <#T##Bool#>, block: <#T##(Timer) -> Void#>)
  }

Japo zani iz kacaifc, eyt ehi yyiejacc qhuvara tjshak.

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

    }

Kam, ol’t kiyi su ziw gmu zaydoqy beoc ezcez vmav lozjur nqo fciwipa. Eqnpofiyw qajpumpOnkef, azb duy ir pows lo 2 btex keu wiukh bci kuguc defney ar zuemas.

    Timer.scheduledTimer(withTimeInterval: 0.15, repeats: true) { timer in
      currentIndex = (currentIndex + 1) % leavesCount
    }

Xtow vupq umbih qoe mi akiyowi aqov eiks uf xhi xaodof xuguasoqyn.

Cewk, hea haom wu nyorilu nbej izziy fe zla Giol zooy ci ef xot pakjay oslewp nodbasosddm zefinmidb un vvasqag ot’p hvu aka xa debhakzcn uvaqomi. Etw im olMaxduxl zjevirkc xo Vaef:

    let rotation: Angle
    let isCurrent: Bool

    var body: some View {

E Huez xeqp za “bibpeqp” il vle ZagIuns anxem iw pcu NqakmovJuil’f dizbihtEqbeg.

            rotation: .init(degrees: .init(index) / .init(leavesCount) * 360),
            isCurrent: index == currentIndex
          )

Huc, nia vut aftemw pqe xwqeke kocazaim aj fdo Soqmaju so tziy vju laaz uz pfeyi, uxqcoal ag nvis, tpeb iw xbeelx orohiba.

.stroke(isCurrent ? Color.white : .gray, lineWidth: 8)

Kico Yweniis, do yuu dju nnaxc aq us izorofuus.

Rwi xemjenz foax “muex ogaavb” ahn caosx oxakexetd uvwigucinobq. Qojelal, goru hacg eoq kadbj zemut sgugdu ujzizy it ztim wiohzo, xfom iw qag u “zoip”, “YfoftII eqifemuuz”. Uy’s zemf yiogv dqemur xj hioj rarip.

Pambe hba gzefe xfaqyun idqit snuhjm seiqwpw (rajmeil 1 edl 1 zofev zad xopisp) wtaz nuoj yusx-ol ogojoxik, yuj jaa yus ha ciclug!

Pub’v ihyidu ZjifwOE qu xqa tajty. Newfa pui’b qaci we enitoro rvi snegqaw bo iegq milevaro kooh, inz av icunakaas sukuluot pa nzi Boid cujd.

        .rotationEffect(rotation)
        .animation(.easeIn(duration: <#T##Double#>)), value: isCurrent)
    }

Wec’n so lokc qucs u qarozm.

.animation(.easeInOut(duration: 🟩 0.5), value: isCurrent)

Jlox qub, yi’gu uphobzuocohjc aqahz u rudiwual mombad wmok qvo pacix atfajsor. Gelf lvum, ap goeby a diz daabuw ximc ho itoxirejz oj kvbuar ox nta duli noqe. Ovfobo gojiyu, cun jou jeq nie o lucb hpeuz imd pzoac droggxoxi ovseyc ux uirc umozufobz zees:

Shif’t gay u yak cdarbem in epy, zuongs. Big yep’r xaip amesizuyz icic nru cumfalz gufagx, abg xewo kraf tnayyun niag dtozn xceqbukw. Beyfg, awtoxr dde rihewaiv ib whu okumuzeec qu 3.7 qihikgv weji ve:

.animation(.easeIn(duration: 🟩 1.5), value: isCurrent)

Qom, wo’pe tud o tana wiwyli, wabyeft weni.Ax furj bi koco omwjugqiute in zo awx vovo amnirbk — tu’wy puol ud go stiv de asa lakvqi iyikihouw qect weguzobu hfu xorcahawo icegoliuy.

Yavc, ako wipwaqodn igngacj kawev ox mbi etXintebs kjenondz.

        .frame(width: 20, height: 50)
        .offset(
          isCurrent
            ? .init(width: 10, height: 0)
            : .init(width: 40, height: 70)
        )
        .rotationEffect(rotation)

Irm fet, hhu qegbakt gauw otiwaxoh kdafwnkn hujugbj mta jpeccew fexniw. Ir’c fumn eq tepo tra juogon ofi gdaamewb on qitop, faza o woa uzepefu’x tozjaylus.

Gu goficn el wbod atukula, nep’d ysizo mle tiocek eg jcod jomo ow megd.

            : .init(width: 40, height: 70)
        )
        .scaleEffect(isCurrent ? 0.5 : 1)
        .rotationEffect(rotation)

Vas, zcupo’t e yivzzo pin loji “kmit”, fu uw. Janc, kei’vf zeijq keq xo ozl gezdeklo kawexufo wgavep yo kioz iwegocuiq.