In order to help advanced users with a series of samples of possibilities, we’ve created the ‘Expression Playground’ watch face. This watch face isn’t very useful for telling time, but you can use Inspection Mode to see how we achieve certain animations and effects with Facer.
How does this watch face work?
We’ll go through a couple of specific expressions used in the watch face in the recipes below. You can open the watch in inspector mode to see how it all works:
🔎 https://www.facer.io/watchface/1WkGlWDQzf/inspect
Feel free to make changes, nothing will get saved so you’re free to play!
Fade In / Fade Out
These recipes cover 3 behaviors: Fade in when the watch wakes up, Fade out when the watch wakes up, or Fade In/Out on a loop.
Recipe for Fade In When the Watch Wakes:
Property: Transparency((interpAccel(#DWE#, 0, 2, 2)*100))
Recipe for Fade Out When the Watch Wakes:
Property: Transparency(100-(interpAccel(#DWE#, 0, 2, 2)*100))
Recipe for Looping Fade In & Fade Out:
Property: Transparency((sin(#DWE#*5))*50+50)
Pendulum Motion
Allow an element to move as if swinging from a string:
Recipe for Pendulum Motion:
Property: Rotation (sin(#DWE#*2)*50)
“Breathing” Motion
Have an element cycle properties easing in & out, to create a ‘breathing’ effect
Recipe for Breathing Opacity:
Property: Transparency ((sin(#DWE#*2)*60)+50)
Recipe for Breathing Size:
Property: Radius ((sin(#DWE#*2)*40)+50)
Basic Orbit
Orbit an element in a circular motion
Recipe for Basic Orbit:
Property: X Position (160 + sin(#DWFSS#/4)*50)
Property: Y Position (160 + cos(#DWFSS#/4)*50)
🙏 Thanks to wutronic for contributing this tutorial!
Got a tutorial you’d like to share? Send us a note at facer@little-labs.com to contribute it!