I dette projekt har jeg udarbejdet en sprite animation ved hjælp af Html, Css kode & Adobe Illustrator.
Storyboard
Before I started on my sprite animation, I decided to make a storyboard for how the animation should take place. This was very useful as I knew exactly what to draw in illustrator.
With all the frames and sizes calculated, I started drawing my animation in illustrator. I knew that I had 20 frames in total where all my frames were 300x300px therefore my whole artboard had to be 6000x300px. After I had everything drawn and adjusted correctly, I exported my sprite file from the artboard so that it retained its 6000x300px dimension.
Code
With my sprite .png file exported, I started setting up my code. Below is my html code containing the png image and a div with the class “bomb”. The div is what i’m playing my sprite animation in.
Further down I define the dimensions of the animation, where it is located , how long and how many frames / steps there are in my animation. Below my bomb class I’ve defined the width of the image above the sprite so it’s visible.
For the animation to play I used @keyframes start position that is 0px and then how to start return again that is -6000px
Final product
http://port.victorsehested.com/blogs/cssanimation/
Conclusion
Based on the 12 animation principles, I have used slow in & slow out, as the bomb drops with slightly increasing speed. I have also taken advantage of appeal & exaggeration when the bomb explosion suddenly becomes very colorful and violent with the text and illustration.
I think my final product has turned out pretty good and that I have completed the task without any major problems. If I were to use this for another time, I would probably use it in a more complex and Ui relevant situation. Otherwise, I have had a lot of fun working out the task.