前端还能这样玩？做一只顶级走位的小蜘蛛

这么多图会不会页面加载太慢！感觉眼球血丝和蜘蛛爬动都分别只用两三帧保存就够了。而且或许可以用svg来画更省？[doge]

♥ 13 ↩ 1

！！！学会了学会了

♥ 11 ↩ 1

敲黑板敲黑板了哈，视频中有几个没讲到但很重要的点： 第一点：图片主体的旋转角度区间是0-360度，当角度超过360之后，会重新回到0度，虽然0度和360度几乎可以“等同”，但是，这之间会发生一个反转，所以我们没法给主体添加transition缓冲，不然当我们旋转超过这个边界的时候，主体会突然反转。 包括后面的小蜘蛛爬动，当我们旋转发生反转的时候，蜘蛛会反方向爬行一圈，归根到底是旋转算式的不足，jiejoe目前能想到的求旋转角度的方法就是视频中的这个，大家如果有更好的方法的话，欢迎在评论区补充👌 第二点：关于target_frame，它是由旋转角度求得的，旋转角度的区间是0-360，经过计算，target_frame的区间应该是0-74，而74对应的360度实际就是0度，第74帧实际就是第0帧，旋转一周，起点即终点。这也就是为什么我们要给target_frame设置一个超出最大帧归零。 第三点：当鼠标y坐标在主体上方的时候，我们在代码中计算角度用的是加：360-90+angle，但之前可视化示意里面用的是减，这是因为我们的nums比值无论坐标在上或是下都是用的y1-y2，所以当坐标在上的时候，相对于y2-y1，这是一个负值，减号自然要改为加号

♥ 10

视频简介: 源代码链接： 链接见视频简介   提取码：jiej 我的个人网站传送门🚪: 链接见视频简介 喜欢这个视频的话，就点个赞吧❤ bilibiliAI视频总结： 如何实现一个有趣的小蜘蛛走位效果。通过跟随鼠标转动的眼球和向上爬的小蜘蛛,展示了前端开发的技巧和创意。视频详细介绍了旋转图片和播放动画的实现方法,并解释了旋转角度和帧数之间的关系。通过这个效果,可以展示出前端开发的创造力和技术实力。视频中给出了具体的代码实现,并提供了详细的注释和说明。 如何实现一个有趣的小招呼,通过旋转图片和播放动画实现小蜘蛛爬动的效果。 0:01 眼球跟着鼠标转动，小蜘蛛爬动 1:55 三角形旋转和图片旋转效果 3:50 蜘蛛爬动和眼球旋转效果 小蜘蛛动画的核心原理,通过帧数和角度计算实现小蜘蛛的移动和旋转。 5:09 通过计算帧数让小蜘蛛回到原位 7:42 设置方向判定让小蜘蛛顺时针爬动

♥ 8 ↩ 1

好厉害啊up，而且视频做的很有趣，也能学到很多东西，[给心心][给心心][给心心]

♥ 2 ↩ 1

用精灵图，这样就只用加载一张图片资源了[doge]

♥ 2 ↩ 1

来几个过不下去的老铁合作项目。 出多少可以，收入平分。 只要不打工不受累[doge]

♥ 2 ↩ 3

老师数学不好可以学吗[辣眼睛]

♥ 1 ↩ 1

卧槽这么屌

♥ 1 ↩ 1

想学切页面以后的loading效果[打call]

♥ 1 ↩ 1

懂了，三连关注了

♥ 1 ↩ 1

@我不是小至同学 这个屌

我现在看pink老师的课才到移动端的rem布局部分，看到这个一脸懵

↩ 1

太厉害了[笑哭]

↩ 1

当你是图片的时候 就没有看的欲望了

帧图！

↩ 1

好帅

↩ 1

整体效果非常好，支持up

↩ 1

真的屌，复习了一下数学知识，代码这方面还得很你学啊

↩ 1