Sunday, November 30, 2014

Lady and fan interaction

As what Chuan Zui suggested instead of letting user to click on button to wipe off the face feature, it will be more interesting to let user to drag to erase the face feature. I was trying to search for the code for very long time and finally I found this easelJS that helps ! 



I get free demo files through the provided github link. After figuring out the code I start to explore the codes by put it in the images.




The demo files that provided.




After several times on changing the code here and there and making adjustments, finally I achieved it . The facial feature can be erased. I feel very lucky that the free sources provided the percentage code. When erases the facial feature the number of percentage will increase. By using this percentage, I can set once the user after erasing it , it will trigger the next animation or to the next page.






I start to put in the fan, and putting animation. When user erase the facial feature, the percentage will count to 69% and the fan will stop. 

I still haven't figure out how to put the fan into a container , because now the fan expose at outside of the panel. I might need to arrange a tutorial with Kelvin in the coming friday.

No comments:

Post a Comment