Pebble SDK provides very cool features for programming watchapps and watchfaces. And combining them can yield very useful results. For example “out of the box” Pebble doesn’t have a slider layer – a layer that would slide in over existing information to display new one. But we have all the basic ingredients to create one:

Basic Layer – to act as a container for the rest of the items

Bitmap Layer – to host an image we want to display

PropertyAnimation – to move our images

This example uses BitmapLayer to display images, but it just as well maybe text or other items.



Here’s a basic flow of how SliderLayer works:



Create a standard layer at a coordinates of your chosing Add 2 BitmapLayers to that layer. First will be used to statically hold previous image, second – to slide in new image Begin animation routine by placing second BitmapLayer outside of bounds of parent layer – this will effectively create effect of “sliding in” When animation stopped copy the bitmap from moving BitmapLayer to static one, this is done so when you animate moving BitmapLayer again – previous image persists (don’t forget to destroy bitmap previously stored in static BitmapLayer to avoid memory leak)

And this is pretty much it. By varying animation duration and start position you can produce various sliding effects

Some useful links:

ANNIVERSARY UPDATE (03/27/2017): Slide Layer is now available as NPM package for Pebble