tal
tal copied to clipboard
Configurable delay before starting animations
Improve the perceived performance of animations by giving the option in device configurations to add a short delay before beginning an animation. This will allow the browser time to render any newly attached widgets that are a result of culling before beginning the animation.
This has been shown to improve the consistency of frame rate and therefore perceived performance on devices with slow hardware.
currently, when navigating on a carousel with a culling mask, pressing right (for example) will: (1. append the next tile on the end of the current carousel (2. animate the carousel to move to the left so that the focussed tile is correctly aligned
(3. remove the first tile from the start of the carousel (4. re align the carousel immediately without animating (skipAnimation: true) so that the focus is correct again
steps 1 and 2 are triggered by the same thread in mask.js and so the browser tries to do them in quick succession - this results in a poorly performing animation.
By triggering step 2 from a setTimeout with a short configurable delay, the browser would be given a chance to finish appending the next tile to the end of the carousel before starting the animation. As the browser is not trying to do two things at once, this will result in a smoother animation with a more consistent frame rate on slow hardware devices.
A delay of ~100ms has been shown on some slow boxes to improve the perceived response time and overall performance of the animations, especially while moving large portions of the screen