TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Building an Animated HTML5 Rocket in 4 Days – A Kicksend Story

30 pointsby skyfallsinalmost 13 years ago

5 comments

kylebrownalmost 13 years ago
The relative placement of the code excerpts is confusing. The coffeescript is canvas code for drawing the gauge needle, a progress bar for the image upload and therefore not timed with the rocket, if I understand correctly.<p>The SASS example is a css3 animation for the rocket ship. But it highlights something about css3 transitions I find really frustrating: you can't specify arcs (you can use bezier curves to specify a timing function, but not a positioning function). Animating an arc requires using translation and rotation in combination, which is very kludgy.
评论 #4174914 未加载
truth_dudealmost 13 years ago
it took 4 days to build an animated html5 rocket? you guys document the most ridiculous things. I still do not understand what kicksssssnd is for<p>get over yourselves<p>thanks, truth_dude
kmmalmost 13 years ago
Forgive my ignorance, but what is the canvas still for? The given CoffeeScript code draws a small arc. But is this necessary if they're doing the final animation with CSS3?
caffeineninjaalmost 13 years ago
Honestly, I signed up for Kicksend to see this and I saw a one second long, underwhelming animation, that wasn't even very rewarding for my effort.<p>I totally expected the camera to "follow" the rocket and all I saw was a sloppy rocket sprite jump off the screen.<p>You guys have the right idea with this, but poor execution.
nakedgremlinalmost 13 years ago
Ha! You need to sign up for the service to see the final animation. Bravo! Bravo Kicksend! Braaaavo!<p>You got a sign up coming your way.