, watchos 2: kraften af tegnefilm,,,,, 43,,,,,,,,, 8,,,,,,, det cyber - mandag envato tuts + kurser vil blive reduceret til $3.- og' t miss.,, de nye operationelle system for æble -, watchos 2, blev indført for et par uger siden på wwdc 2015.det bringer mange forbedringer, især for søger at skabe et æble - udviklere app.det er ting, som jeg synes er vigtigst for udviklere:,,, watchkit apps kører nu natively på uret.dette bringer meget tiltrængte forbedring i hastighed, hvilket resulterer i en bedre brugeroplevelse.,, den nye, se konnektivitet, rammer gør det muligt for alle former for kommunikation og udveksling af oplysninger mellem de stiftende programmerbare app og watchos app.,, watchos 2 apps har adgang til hardware data såsom data fra bevægelsesføler, audio optager, og de kan endda adgang hjertefrekvens data.,, watchos 2 også indført tegnefilm.på watchos 1, den eneste mulighed for at gennemføre en informationskampagne, var at skabe en række billeder og så iterate gennem dem.watchos 2 bringer sandt animeringer til apple ur.du kan livfulde brugergrænsefladen ved at ændre layout egenskaber i en informationskampagne blok.det er, hvor denne forelæsning kommer.,,, 1.hvorfor bekymre sig om tegnefilm?, før vi går til møtrikker og bolte, vil jeg gerne bruge et øjeblik tale om formålet med tegnefilm på apple se apps.,, den åbenlyse grund er, at de giver brugeren grænseflade bedre, hvis det anvendes korrekt.og når det kommer til æble, se, det er en stor , hvis.da de fleste app interaktioner kun i et par sekunder, du ønsker ikke at overdrive animeringer.,, og det andet, og jeg tror, mere vigtigt, er, at de giver mulighed for en sædvane navigation hierarkier i æble se apps.lad os antage, at du er nødt til at fremlægge en skærm, at brugeren kan kun forlade under en specifik aktion.normalt, æble - apps har altid aflyse knap i øverste venstre hjørne, når en modal grænseflade registeransvarlige er forelagt.med tegnefilm og smart opstilling manipulation, kunne du skabe dit eget "i dag den registeransvarlige" rutine, der viser din app 's indhold fuld skærm, at det af specifikke foranstaltninger.det er en af de ting, du vil lære i denne forelæsning., 2.forudsætninger, før du graver i denne forelæsning, bør du have en grundlæggende viden om, hvordan systemet fungerer på watchkit indretning.selv om de er en erfaren programmerbare entreprenør, gruppen baseret indretning i watchkit er meget anderledes, end hvad du er vant til den programmerbare.du skal tænke på layout på en helt anden måde.men når du vænner dig til det, du vil være i stand til at skabe de fleste opgaver uden større indsats.,, hvis du er ny udformning af watchkit, er der en stor forelæsning om tuts + min ven patrick balestra, forståelse watchkit layout - system. med et eksempel app, forklarer han, alt hvad du har brug for ved at komme op i omdrejninger.,,, der er også mange wwdc møder at røre på dette område.det møde, som jeg anbefaler den mest, og som dækker watchkit tegnefilm, er denne ret layout og informationsteknikker for watchkit.,,, 3.grundlæggende, er princippet om tegnefilm på watchos 2 er enkel, i en eller flere af de animatable egenskaber i en informationskampagne blok.følgende eksempel viser, hvordan det her fungerer.,, [selv animatewithduration: 0,5 animeringer: ^ ([self.circlegroup sethorizontalalignment: wkinterfaceobjecthorizontalalignmentright]}]; denne metode medfører, circlegroup, tilpasses den ret, med en informationskampagne med en varighed på 0,5 sekunder.som du kan se, vi kalder , animatewithduration: animeringer:, , selv, hvilket er et eksempel på, wkinterfacecontroller,.det er forskellige fra six, hvor animation metoder er klasse metoder, uiview,.,,. nedenstående liste viser, hvilke egenskaber er animatable:,,, - uklarhed, tilpasning, bredde og højde, baggrund, farve, farve og farve, farve, huske på, at det er ikke muligt på watchos 2 skabe brugergrænseflade elementer i runtime.men da du ikke kan gemme dem eller deres alpha - 0 i den skitse, det burde ikke være noget problem.,, det er det.bevæbnet med din viden om watchkit layout - systemet, nu er du klar til at begynde arbejdet med indfødte tegnefilm på watchos.lad os komme i gang med at skabe en stikprøve app, så jeg kan vise dig et par eksempler på, hvordan alt dette passer sammen.,, 4. grundlæggende animeringer, kommer vi til at skabe en enkel watchos 2 app, der vil indføre et par af disse animation begreber.det er på ingen måde forsøger at give et fuldstændigt overblik over alle de ting, der er mulige.det viser den grundlæggende idé, som forhåbentlig vil gøre det muligt for dem at komme med løsninger på det, du har brug for.,,, trin 1: skabe projektet, på nuværende tidspunkt xcode 7 er stadig i beta.for at skabe en watchos 2 app, du skal bruge xcode 7, så det er, hvad jeg skal bruge. xcode, iværksætte og udvælge, fil > nye > projekt,., vælge, programmerbare anvendelse, med fælles holdning anvendelse, model og et klik, når næste. bad, produktbetegnelse, anføres, watchanimations,.du kan uncheck omfatte enhed prøver, og omfatter - test, som vi ikke har brug for dem, for resten.,,,,,, klik, vælge et sted for at redde projektet og klik, skabe,.,,,, trin 2: tilføje watchkit mål,,,,,,, xcode, vælg, fil > nye > mål,., fra listen over skabeloner, vælge , watchkit app, fra , watchos > anvendelse, afsnit og klik, fortsætte.,,,,,, for lægemidlets navn, kan du vælge noget, du kan lide.jeg har opkaldt min, watchapp,., uncheck, omfatter meddelelse scene, fordi vi ikke har brug for det.når du klik , færdig, din watchkit mål vil blive skabt.,,,,,, når foranlediget til at aktivere watchapp ordning, klik, aktiveres.bare sig, at du kan ændre ordningen på ethvert tidspunkt i den øverste venstre af din xcode vindue.,,,,,, trin 3: skabe brugergrænseflade, åbne, interface.storyboard, i , watchapp , gruppe som vist nedenfor.,,,,,, tilføje en gruppe for grænsefladen, ved at trække det fra, objekt bibliotek på ret.i, attributter inspektør , til højre, ændre dens indretning, lodret, og dens højde i forhold til beholderen.,,,,,, tilføje et andet gruppe til den gruppe, vi har tilføjet.i de attributter, inspektør, dets lodrette position til bunden,.,, tilføje fire knapper til den anden gruppe.for hver knap, størrelse, at i forhold til beholder til en værdi af , 0, 25,.sæt titler på knapperne til ←, →, ↑, og ↓.efter dette skridt, brugergrænseflade skal se sådan ud:,,,,,, til at afslutte første del af brugergrænsefladen, tilføje endnu en gruppe til den vigtigste gruppe og få det som følger:,,,,,,, men for at sikre klarhed, sætte sit navn til, cirkel, ved at ændre dens navn i dokument redegøre for, om venstre.,, der er dens farve til red.,, der er dens radius til 20 punkter.,, der er dets størrelse, bredde og højde, 40 point.,,,, følgende skærmbillede viser, hvordan cirklen skal være konfigureret.,,,,,,, trin 4: tilføje animeringer, i, projekt, navigatør,, udvide , watchapp udvidelse, gruppe og udvælge, interfacecontroller. m.i stedet for gennemførelsen af den, interfacecontroller, klasse med følgende:,,&#import "interfacecontroller. h" @ grænseflade interfacecontroller() @ ejendom (nonatomic, svag) iboutlet wkinterfacegroup * circlegroup; @ ende @ gennemførelse interfacecontroller //cirkel retning knapper - (ibaction) leftbuttonpressed {[selv animatewithduration: 0,5 animeringer: ^ ([self.circlegroup sethorizontalalignment: wkinterfaceobjecthorizontalalignmentleft]}]} - (ibaction) rightbuttonpressed {[selv animatewithduration: 0,5 animeringer: ^ ([self.circlegroup sethorizontalalignment: wkinterfaceobjecthorizontalalignmentright]}]} - (ibaction) upbuttonpressed {[selv animatewithduration: 0,5 animations: ^ ([self.circlegroup setverticalalignment: wkinterfaceobjectverticalalignmenttop]}]} - (ibaction) downbuttonpressed {[selv animatewithduration: 0,5 animeringer: ^ ([self.circlegroup setverticalalignment: wkinterfaceobjectverticalalignmentbottom]}]} @ ende. disse aktioner vil flytte den røde cirkel, i en bestemt retning.og som du kan se, gør vi det med indstillinger dens lodrette og /eller horisontale indstilling i en informationskampagne blok.,,, løntrin 5: forbinder de afsætningsmuligheder, åben , interface.storyboard, og forbinde de afsætningsmuligheder, som vist nedenfor.,,,,,,,,, der skal gøre det.- projektet, og hvis du har fulgt de ovennævnte foranstaltninger, bør de være i stand til at flytte den røde cirkel omkring skærmen ved hjælp af pilen knapper.,,,,, 5.mere komplekse animeringer, i anden del af denne forelæsning, vil vi skabe et skub animation.da de fleste af de skridt, der er ens, vil jeg gå lidt hurtigere denne gang.,, trin 1: skabe animation, åbne, interfacecontroller. m, og skabe nye afsætningsmuligheder, firstscreengroup,, af typen, wkinterfacegroup i klassen, udvidelse af, interfacecontroller, klasse, interfacecontroller() @ @ grænseflade ejendom (nonatomic, svag) iboutlet wkinterfacegroup * circlegroup; @ ejendom (nonatomic, svag) iboutlet wkinterfacegroup * firstscreengroup; @ ende, næste, gennemfører følgende foranstaltninger i, interfacecontroller, klasse. - (ibaction) pushbuttonpressed {[selv animatewithduration: 0,1 animeringer: ^ ([self.firstscreengroup setalpha: 0];}]; [selv animatewithduration: 0,3 animeringer: ^ ([self.firstscreengroop setwidth: 0]}]} - (ibaction) popbuttonpressed {[selv animatewithduration: 0,3 animeringer: ^ ([self.firstscreengroup setrelativewidth: 1 withadjustment: 0]}] dispatch_after (dispatch_time (dispatch_time_now, (int64_t) (0, 2 * nsec_per_sec)), dispatch_get_main_queue()) {[selv animatewithduration: 0,1 animeringer:) ([self.firstscreengroup setalpha: 1]}]})}, i , pushbuttonpressed, vi psykolog første skærm - gruppen (vi vil skabe det i det næste skridt, og i popbuttonpressed, vi udvide denne gruppe igen.vi er også inspirerende alfa i den første skærm gruppe at fremsætte liv lidt mere tiltrækkende, trin 2: udvidelse af brugergrænsefladen, åben grænseflade. skitse, og tilføje en ny gruppe brugergrænsefladen.den gruppe, der allerede var der, den indeholder, cirkel, og gruppen med knapper, inde i den nye gruppe.dets, layout, horisontale, og omdøbe de indeholdt gruppen til første skærm.det vil komme i handy senere.resultatet skal se sådan ud:,,,,,, næste, tilføje en anden gruppe, der vil være på samme niveau som , første skærm, gruppe.dets, layout, til lodret.tilføj et billede og en knap til gruppen.kan du tilføje bogstaveligt talt enhver image, sørg for, at du har noget, der ellers ville se noget tørt informationstiltag.sæt de afsnit af knappen "< pop".- knap den , popbuttonpressed, skabte vi tidligere.brugergrænsefladen skal se sådan her:,,,,,, tilføje en knap til, første skærm, gruppe.dets titel "push >" og dets lodrette position til bunden.- knap den, pushbuttonpressed handling. brugergrænsefladen skal se sådan her:,,,,,, er der én ting, vi skal gøre, som forbinder , firstscreengroup, adgang til den gruppe, vi ved navn, første skærm.,,,,,, trin 3: bygge og drive,,, når du bygge og drive app - du burde være i stand til at forelægge den anden skærm ved at banke på knappen med titlen, "push >" på bunden.du kan afvise den anden skærm ved at banke på knappen med titlen "< pop".det skal se sådan ud:,,,,, konklusion i denne forelæsning, har vi taget et kig på lokalt tegnefilm på watchos 2.jeg håber, at det har givet dig en forsmag på, hvad man kan opnå med tegnefilm på watchos.hvis du har spørgsmål, kan du efter en bemærkning nedenfor eller kan kontakte mig på twitter.
