Portfolio for Gillian Maffit
Chapter 12

The iOS Icon Wobble/Jiggle

Chapter 12

In this chapter I learned how to create an animation that I see in my everyday life when I rearrange apps on my iphone. In this animation, notice how that the objects are rotating. It’s just that what they are rotating around isn’t the center point. They are rotating around the transformation point which is shifted up and to the left. This makes the rotation that you see look more and more like the wobble effect that you see on the iOS icons. Provided below, I have two examples. The first one being like the iOS screen that we see. This code is what was provided in this chapter. The second example, I have made some changes that can be see in the video to the side. I talk about and show the changes in the code so you can as I go along. Both are embedded below so you look at both and see the differences!


Before Video Edits:

icon image icon image icon image icon image icon image icon image icon image icon image icon image

After Video Edits:

icon image icon image icon image icon image icon image icon image icon image icon image icon image

The Differences Between The Two:

As you look at the icons showed in the two examples, at first glance they look similiar. But after you view the video I created and you look at the top left icon, you can see that the speed is different than the others. The edits I made in the video played around with the timing and more. But the biggest change that you see right away is the speed of each being different.