Challenge Overview
Welcome to sparck Animation Contest. As part of this contest, you will update an existing AngularJS app with a feature that allows the user to take a snapshot from their mobile camera and process it.
This contest has 3 prizes - each of $300. We are looking for ideas on how to implement the feature and thus we are accepting multiple good submissions.
Additionally, note that the scorecard for this contest is subjective - the client will give feedback on which animation they preferred.
Contest Details
We will share an existing AngularJS app with you in the contest forums. Create a new route in that app named “snapshots”. Copy the same page as the one with the “questions” but replace the main content with the following:
1. When the page loads, allow the user to take a snapshot on their phone. You can assume that the user is taking a snapshot of their business card.
2. Once the snapshot is taken, trigger an animation to indicate that the image is being processed.
The animation shown is the focus of this contest. The client is looking for ideas on how best to display this animation.
Some ideas that the client has proposed are as follows:
Idea 1: The animation can be similar to the on the one seen at time 2:38 in this Youtube video - where a single blue vertical line moves from one end of the screen to another and alternates between the edges of the screen. In this case, the blue vertical line should flash 1’s and 0’s as it passes across the screen, to suggest the image in the screen is being digitized.
Idea 2: The animation shown can be similar to how in the movie series The Matrix, the numbers fall from the top and randomize as they fall to the bottom.
Idea 3: Show the vertical bar itself as mentioned in Idea 1 but as the bar scrolls, let the text behind in the snapshot twinkle a bit to indicate that the text is being processed.
You can come up with your own ideas too - as long as you can present an animation that indicates the text behind is being processed. The snapshot taken should be seen behind the animation. Feel free to use the Contact Manager option if you wish to discuss your idea in detail.
Your animation is expected to be inside an angularjs directive and it should be possible to trigger it as well as stop and restart it as needed. You can demonstrate this using a simple button where we can repeatedly take a photo using the camera, and we can see the animation in action overlaying the image.
Do not hardcode the time for which the animation runs. This has to be configurable and passed into the directive. Basically, do not stop the animation after one sweep. Let us control how many seconds the animation can run for - we should be able to call a function within the directive to stop the animation.
You need to target the following browsers:
- Android 5+ Latest Google Chrome
- iOS 9+, iPhone 6 Safari browsers
Both landscape and portrait orientation