Create an Animated "Analog" Clock

[Anonymous]

Intro

I work in TV, so time is kind of a big deal for us.  When I started building apps, one of the first things I started playing with in PowerApps (and Flow) were the Date & Time functions and the Timer control. 

This demo app is not something I use in production, but rather an exercise. 

Objectives

My objectives for the app were:

• Create “analog” clock
• Clock must update in real time, including
  • Hour
  • Minutes
  • Seconds
• Clock can only use PowerApps
  • No external data sources or connections

"Analog"-ish

While I would have preferred traditional clock hands, this proved impractical due to the Image control's limited rotation to 90 degrees at a time.  

So instead, I opted to animate circles in sync with the Hour, Minutes and Seconds around a clock face image.

Bells & Whistles

I decided to add a few extra features to my including:

• X & Y Sliders to control the Horizontal and Vertical placement of the clock
• Hour Offset slider to simulate time zone changes (more on Time Zones in my next app)
• A toggle that switches the second "hand" animation mode between the traditional "tick-tock" style and a more fluid animation style
• Lastly, a debug mode toggle that shows and hides controls that can help app admins test and debug the app

Watch Videos & Get the App

I created two videos and posted the app to the Community Forum's App Gallery.  

In Part 1, I demo the app:

In Part 2, I go into some detail about how the app works:

Next Time

I hope you gleamed something interesting from this demo.  If you'd like more detail on any or all of the app, let me know.  I have a few more demo apps in the queue and I hope to record those videos soon. 

Up next is my Convert Time Zone Demo app

Convert Time Zone Demo app - Coming soon!