David Lanham 新 iOS 遊戲 “Hatch” 的官網視頻中,最後小寵物從畫面跑進網頁的效果是如何實現的?
程序员文章站
2022-03-13 20:43:53
...
官網地址:http://www.hatchpet.com/ 視頻需翻牆。
HTML 源文件里发现了 id 为 licksprite, licksprite2 的两个 div。可以看到其背景图片如下,确定了和可爱的小怪兽动画有关: 在密密麻麻的压缩过的 js 源文件里搜了一下 licksprite ,还真发现了踪影:
在 YouTube 上搜到了这个视频(http://www.youtube.com/watch?v=CMrl4krqbsc)。确实是在50s和51s秒之间,小怪物跑出来了~
至于更具体的实现方式,我就看不出来了,应该有某种机制检测视频播放时间线吧。订制在页面里的播放器,阻止了用户手动调整播放进度,这样就不需要处理太复杂的情况。
最后说一句题外话,多谢本问题,我才看到这个可爱的小彩蛋~
回复内容:
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
弱答。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秒之间,小怪物跑出来了~
至于更具体的实现方式,我就看不出来了,应该有某种机制检测视频播放时间线吧。订制在页面里的播放器,阻止了用户手动调整播放进度,这样就不需要处理太复杂的情况。
最后说一句题外话,多谢本问题,我才看到这个可爱的小彩蛋~
声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
相关文章
相关视频
下一篇: PHP基础运算符的奶妈级整理分享