For the assignment this week, we aim to create a UI animation which emulates IRL things. I created a launch button with a circular progress bar at the outline and pulsating outer glow outside of the button. Regarding the color, I used red as the main color, which symbolizes warning and urgent.
(Still in progress…)
Interactions and feedback
Users have to swipe the correct sequence to unlock the screen. If users input wrong sequences, the screen would turn into red and tell users to try again. If users input the right sequence, the screen would turn into green and display “unlock”.
The problems I met
I ran into some issues when I was doing the assignment. First, I chose the swipe method and I followed the sample code from the class repository. I created my own project and followed the code step by step and I found that my buttons weren’t responsive to user interaction. I couldn’t figure it out why until I knew that I didn’t check the “User Interaction Enabled” in the UI element dashboard. Another problem is the layout issue. It appears correctly in the simulator but it’s very odd on my iPhone like the screenshot below. I know this problem comes from the Constraints but I tried different arrangements, and I still got the same issue. Besides, I haven’t done the “Only 3 attempts possible before app needs to be reset/restarted” part. I’ll keep updating this blog post until I accomplish.
The idea is super straightforward yet creepy. I wanted to humanize my iPhone and do something very mean to it. That was why I created this little purple monster and “torture” it by doing “one button interaction”
When you tap on the eye of the little monster, the monster would shout and have a bloodshot eye. While you keep tapping on it, the eye would become scarier and there would be more angry sign on its face. Eventually, the monster would close its eye.
I used Adobe Illustrator to design all the graphics and imported them into the Xcode. The sound effect is from freesound.org.