Den 7. april, lancerede Google en ny version af Gmail til mobil til iPhone og Android-baserede enheder. Vi delte den bag-kulisserne historie gennem denne blog og besluttede at dele mere af, hvad vi har lært i en kort række opfølgende blogindlæg. I denne uge, vil jeg tale om forskellige måder at animere floaty bar.
Selv fra den tidligste brainstorming dage for vores nye version af Gmail til iPhone og Android-baserede enheder, vidste vi, at vi ville prøve noget nyt med menu tiltag: en kontekstafhængig, altid er tilgængelige UI element, der følger bekvemt som bruger ruller. Således \ "floaty bar \" blev født! Det tog os en overraskende lang tid, eksperimenterer med forskellige teknikker og interaktioner, at konvergere på det design, du ser i dag. Lad os kigge under dynen for at se, hvordan animationen er opnået. Du kan blive overrasket over at opdage, at den logik er faktisk ret enkelt!
Skærmbilleder af de floaty bar i aktion
I CSS:
. CSS_FLOATY_BAR (
…
top:-50px; / * start væk fra skærmen, så den glider i pænt * /
-webkit-overgangen: top 0.2s ease-out;
…
) I JavaScript:
/ / Constructor for floaty bar
gmail.FloatyBar = function () (
this.menuDiv = document.createElement ( 'div');
this.menuDiv.className = CSS_FLOATY_BAR;
…
);
/ / Kaldes, når det er tid for floaty bar for at flytte
gmail.FloatyBar.prototype.setTop = function () (
this.menuDiv.style.top = window.scrollY + 'px';
);
/ / Kaldes når floaty barmenu forkastes
gmail.FloatyBar.prototype.hideOffScreen = function () (
this.menuDiv.style.top = '-50px ";
);
gmail.floatyBar = ny gmail.FloatyBar ();
/ / Lyt til rulle begivenheder på det øverste niveau vindue
window.onscroll = function () (
…
gmail.floatyBar.setTop ();
…
); Essensen her er, at når viewport ruller, at floaty bar 'top' er indstillet til den nye offset viewport. The-webkit-overgangen regel angiver animation parametre. (Det 'top' ejendom skal animeret, over 0.2s, ved hjælp af let-out timing funktion.) Dette er animationen opførsel, vi havde ved lanceringen, og det fungerer fint på Android og mobile Safari-browsere.
Men der er faktisk en bedre måde at opnå samme virkning, og den forbedring er især tydeligt på mobile Safari. Tricket er at bruge \ "CSS forvandler \". CSS transformerer er en mekanisme til at anvende forskellige typer af affine transformationer til side elementer, specificeret via CSS. Vi vil bruge en simpel en, der er translateY. Her er den samme logik, opdateret til at bruge CSS transformationer.
I CSS:
. CSS_FLOATY_BAR (
…
top:-50px; / * start væk fra skærmen, så den glider i pænt * /
-webkit-overgangen:-webkit-transform 0.2s ease-out;
…
) I JavaScript:
/ / Kaldes, når det er tid for floaty bar for at flytte
gmail.FloatyBar.prototype.setTop = function () (
var oversætte = window.scrollY - (-50);
this.menuDiv.style [ '-webkit-transform'] = 'translateY (' + oversætte + 'px)';
);
/ / Kaldes når floaty barmenu forkastes
gmail.FloatyBar.prototype.hideOffScreen = function () (
this.menuDiv.style [ '-webkit-transform'] = 'translateY (0px)';
); Efter hver rulle begivenhed, den floaty baren er oversat lodret til den nye viewport offset (modulo den Offscreen offset, som er vigtigt for floaty bar oprindelige udseende). Og hvorfor netop er dette en sådan forbedring Selv om den logik er tilsvarende, iPhone OS gennemførelse af CSS forvandler er \ "forbedret ydeevne \", mens vores første iteration (informationstiltag i 'top' ejendom), udføres af OS i softwaren. Derfor har erfaring var desværre lidt chunky på tidspunkter, afhængigt af hastigheden af iPhone hardware.
Du kan se glattere ud floaty barer kommer meget snart til en iPhone i nærheden af dig. Dette er blot den første i en række forbedringer, vi har planer for de mobile Gmail floaty bar. Hold øje med dem i vores iterative webapp, rullende ud i løbet af de næste par uger og måneder!
Af Joanne McKinley, Software Engineer, Google Mobile
Forrige indlæg fra Gmail Mobil HTML5 Series:
HTML5 og Webkit bane vejen for mobile web-applikationer
Brug AppCache at lancere offline - Del 1
Brug AppCache at lancere offline - Del 2
Brug AppCache at lancere offline - Del 3
En fælles API for web-Storage
Forslag til bedre ydeevne
Cache mønster for offline HTML5 webapplikation
Brug af timere effektivt
Autogrowing textareas