After animating text, the text seems to pause for 1 second and then render more sharply than before. Why is that?

After animating text, the text seems to pause for 1 second and then render more sharply than before. Why is that?

Rate This
  • Comments 3

 

In all 4 images, we see anti-aliased, sub-pixel positioned, ClearType text. The rendering on the right column is pixel snapped, which sends the glyphs through a refined codepath by Mikhail Lyapunov for rendering the final text in an extremely polished state; every time one changes the location or size of the text, it runs through this codepath and smoothly renders the text for that location on the pixel grid.

 

We turn off pixel snapping during an animation/scrolling primarily because animation looks best if the text is anti-aliased but not pixel snapped. Snapping animated glyphs to the pixel grid causes weird visual artifacts during the animation.

 

For V1, the rendering system automatically detects an animation or scrolling of text, turns off pixel snapping, and turns it back on when the animation is completed.

 

So why 1 second? We animate snapping back on at a hard-coded speed, and that speed was optimized for the most common case of scrolling text at fontsizes of 10-12.

 

At some point, we discussed enabling the developer to animate the strength of the snapping of the text (so that text smoothly shapes into the final rendering) but the API design and underlying codepath was out of reach for this version.

 

Please let us know if you (the designer/developer) want control over “strength of Pixel Snapping” in vNext via the ladybug website.

 

 

Comments
Page 1 of 1 (3 items)
Leave a Comment
  • Please add 7 and 8 and type the answer here:
  • Post