EGG TIMER

Inspiration

Assignment's requirement for this week：

• Design and UI can NOT use any numbers or text

• Review native iOS timer functionality

• Must be able to set any interval up to 1 hour

• Must have functionality for Start, Cancel and Pause

• Design system must accurately communicate minutes and seconds

• Must have visual and/or audio and/or haptic feedback when timer finishes

• Consider Affordances, Signifiers, Mappings and Feedback in the app design

​​

​

After seeing the  requirements of the design timer, I analyzed the basic functions of the APP to set the countdown time and can be modified (up to one hour). There are countdown start and pause, and there is a flow of time. Visually, I think that time will leave colorful memories at the same time, so I choose the method of gradually reducing the area of ​​white bars and gradually increasing the pink bars. At the same time, considering that time is dynamic, so I let the white bars decrease with time and let them jump up and down randomly.

​​process

Implement the main part:
1. Put the background image into the array, you can change the background every time you click restart
2. Write the structure of the bar chart, and write a function that maps its length and time
3. Implement the start, pause, and restart buttons

​​process2

The second most important part is to change the set time from a number to a graphic. Dial default time is 30 seconds. The main idea is to design a minute dial and a stopwatch dial in increments of ten seconds. When the second dial is greater than 60 seconds, jump to Minutes, when the time is less than 0 and when the time exceeds one hour, the state is terminated.

My entire code link