David Lanham 新 iOS 遊戲 “Hatch” 的官網視頻中，最後小寵物從畫面跑進網頁的效果是如何實現的？

官網地址：http://www.hatchpet.com/ 視頻需翻牆。

回复内容：

var scale = 1; var baseHeight = 544 * scale; var baseWidth = 602 * scale; var eachFrame = 15; var canvas = $('').css({ 'position': 'fixed', 'zIndex': 9999, 'bottom': '0', 'overflow': 'hidden', }).attr({ 'width': baseWidth, 'height': baseHeight, }); $('body').append(canvas); var frameCnt = 0; var context = canvas[0].getContext('2d'); function animate(isReset) { if (isReset) { frameCnt = 0; }; // clear context.clearRect(0, 0, baseWidth, baseHeight); // draw stuff context.drawImage(imageObjs[parseInt(frameCnt / eachFrame)], (frameCnt % eachFrame) * baseWidth, 0, baseWidth, baseHeight, 0, 0, baseWidth, baseHeight); frameCnt++; // request new frame if (frameCnt < eachFrame * 2) { setTimeout(animate, 1000 / 8); } else { animate(true); } } var pic = [ 'http://p1.zhimg.com/8c/fb/8cfbc0eb11019584c7ee0dccd4c8bf66_r.jpg', 'http://p1.zhimg.com/4f/3d/4f3db206b0fd094ef2fc00ece876ad30_r.jpg' ]; function preLoadImages(imgSrcList, callback) { var imageObjs = []; var len = imgSrcList.length; var callbackAfter = len; var preloadInterval = window.setInterval(function() { if (callbackAfter === 0) { window.clearInterval(preloadInterval); callback(); } }, 100); for (var i = 0; i < len; i++) { imageObjs[i] = new Image(); imageObjs[i].onload = function() { callbackAfter--; }; imageObjs[i].src = imgSrcList[i]; }; return imageObjs; } var imageObjs = preLoadImages(pic, function() { animate(true); }); 弱答。
HTML 源文件里发现了 id 为 licksprite, licksprite2 的两个 div。可以看到其背景图片如下，确定了和可爱的小怪兽动画有关：在密密麻麻的压缩过的 js 源文件里搜了一下 licksprite ，还真发现了踪影：

var licksprite;var showingSprite=false;var playState;var playerReady=false;var shouldStart=false;var spriteTime=50.08;…

我对 js 只是非常一知半解，不过那个 spriteTime = 50.08 让人猜想，应该是检测在视频播放50.08秒后，触发网页上的 CSS sprite 动画。
在 YouTube 上搜到了这个视频(http://www.youtube.com/watch?v=CMrl4krqbsc)。确实是在50s和51s秒之间，小怪物跑出来了~

至于更具体的实现方式，我就看不出来了，应该有某种机制检测视频播放时间线吧。订制在页面里的播放器，阻止了用户手动调整播放进度，这样就不需要处理太复杂的情况。

最后说一句题外话，多谢本问题，我才看到这个可爱的小彩蛋~