The idea behind this exercise is to explore how animation can be used to engage users on a web site or in an application. It could be a splash screen that welcomes users to a site, or animated elements such as a logo or icons that add dynamics to an application.
You will develop an animation using Google Web Designer. You should extend the look and feel of the graphics you have already developed.
Here are some resources you may find useful:
https://www.google.com/webdesigner/ (download GWD)
https://www.youtube.com/user/googlewebdesigner (GWD documentation)
https://cssanimation.rocks/principles/ (animation principles applied to the web)
https://medium.com/inspiration-supply/icons-animations-8e0539f8857e (examples of animated icons)
https://blog.tubikstudio.com/web-animation/ (examples of animated web sites)
If you do a splash screen, 3 - 5 seconds of animation should be sufficient. The animation can loop, of course, possibly with a link to load a web site, as shown in class.
When using GWD, remember to publish the animation locally, and then move the resulting directory to Google drive, and link to the directory from your documentation. Include a screen shot in your documentation. Email the link to uidev@cs.stonybrook.edu with the URL of your animation page, and attach the .zip file of your animation that was created when you published it to a local directory. Type "Animation" in the subject line.
Rubric
1. Followed the instructions:
• An animation was uploaded as specified above, and a link to the animation or URL was emailed to uidev@cs.stonybrook.edu.
2. Met the design criteria:
• Animation extends the look and feel of the graphics already developed.
• Some element of the 12 principles of animation was employed (squash and stretch, ease-in ease-out, overlapping action, etc)
• The frame rate is appropriate (animation runs smoothly)
• Good technical execution (crisp edges, clean shapes)
That’s 5 criteria, or approximately 2 points each.