Wanneer we voor mobiel ontwikkelen is snelheid een van de belangrijkste factoren waar we rekening mee moeten houden. Het moet allemaal vlot werken en goed in de hand liggen. We willen snel even de score van die voetbaltopper van de avond checken. Ben ik te laat voor de trein of kan ik het nog halen? Snel je smartphone nemen om het uur van je trein op te vragen. Of als we ons vervelen gewoon wat nieuws van de dag willen bekijken. Door de grote variatie aan mobiele toestellen op de markt van vandaag is snelheid niet altijd evident.
Snelheid voelen we aan en wordt beïnvloed door een aantal factoren. Een goede WiFi of 3G connectie, de responsiveness van je acties, de snelheid van je apparaat... Zo heeft Apple de gewoonte van steeds high-end toestellen op de markt te brengen. Voor zo goed als elke animatie wordt de grafische processor ingeschakeld. Resultaat is een leuke ervaring met animaties die zeer vlotjes weergeven worden. Op Android is dit niet altijd het geval. Omdat Android voorkomt op allerhande apparaten met verschillende architecturen, van klein en traag tot snel en groot, is het enkel de processor of CPU van je toestel die alles moet regelen. Resultaat hiervan zijn trage animaties die schokken wat een serieuze afknapper is.
In volgend voorbeeld schuiven we een menupaneel opzij met behulp van CSS:
/* standaard panel style */
.panel.animate {
left: 0;
-webkit-transition: .3s left;
-moz-transition: .3s left;
-o-transition: .3s left;
transition: .3s left;
}
/* schuif panel naar links */
.panel.animate.on {
left: -100px;
}
Zoals verwacht is de animatie op Android toestellen belabberd en op de minder krachtige toestellen soms zelfs niet zichtbaar. Gelukkig kunnen we ervoor zorgen dat de grafische capaciteit van het toestel gebruikt kan worden bij het bezoeken van mobiele websites met de CSS3 property transform. Met translate3d kunnen we het element verplaatsen naar X, Y en Z coördinaten.
/* standaard panel style */
.panel.animate {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: .3s all;
-moz-transition: .3s all;
-o-transition: .3s all;
transition: .3s all;
}
/* schuif panel naar links */
.panel.animate.on {
-webkit-transform: translate3d(-100px, 0, 0);
-moz-transform: translate3d(-100px, 0, 0);
-o-transform: translate3d(-100px, 0, 0);
transform: translate3d(-100px, 0, 0);
}
Wanneer nu de klasse 'on' toegevoegd wordt aan het element zal deze naar links schuiven en zal de grafische processor hierbij een handje helpen. Resultaat is een vlotte animatie op zo goed als elk toestel. Het verschil is zelfs merkbaar bij desktops.