前言

大家好， 我是Fly哥 ，最近AI 大热， 我也抱着试一试的目的是去尝试使用下。 这里推荐下面这两款工具

image-20230319115948092

image-20230319120007824

1. 第一个是 基于 Gpt 4.0 免费开源的编辑器, 可以说是无敌，强烈推荐

2. 第二 codeium.com/ github copilot 免费平替。

   个人开发者永久免费。

   支持代码AI补全、问题搜索。支持市面上大多数IDE。

开始

故事的开始，我就想让他给我写一下前端帧动画的demo.

OK 写成这样 我不是很满意😊 ， 我全选继续问他。

大概翻译下 「一句话概括 就是我们经常用的 使用css 的 step 函数 配合上背景图片的偏移 background-position。」

这时候我就继续往下问题

给他说了 背景图 是 多个图拼接而成， 每一个大小是 width：10 和 height: 20

然后霹雳吧啦 打了 一顿， 这时候我就接着问

然后这哥们👬🏻 就把上面的再打了一遍， 说了 序列帧啥啥的。然后我就灵魂拷问他：

image-20230319121228919

他说 我确定我的问题， 你如果有正确✅的答案想可以让他知道。然后我打了下面这段话：

image-20230319121324650

然后这哥们说话了：

image-20230319121346755

这哥们很八股哇， **「硬件加速， 使用gpu 渲染」**吗 说的头头是道， 我也很认可。

然后我在一次灵魂拷问他：

他最后也还是来了一句，如果你有更好的想法 可以告诉他。哈哈哈哈😁

我提出下面这个问题：

image-20230319121700998

看看他给的建议：

总结一下：

1. 大图移动端会加载很多时间
2. 渲染大图在移动端也会花费更多时间
3. 他这里提到一个技巧： 「you may want to consider using a smaller image or breaking the image up into smaller pieces.」 要我们考虑将大图分切多个小图， 这是工作中我们使用的解决方案之一。
4. 然后就是 问我你如果知道可以告诉他

然后我继续给他提示：

然后他又一顿操， 霹雳啪把打下了一堆。

这时候我在问题， 问了这两种技术方案在性能方面的问题。

看下他的答复

我直接总结： 「使用scale提高性能在移动端, 因为他减少的图片的加载和渲染的数据，同时他也提出问题， 过度scale 会导致失幁。这种方法是否比以前的方法更具性能取决于许多因素，包括图像的大小、动画中的帧数以及将在其上显示动画的设备的能力。通常，使用较小的图像并使用scale（）函数将其缩小是提高移动设备上动画性能的好方法，但您可能需要尝试不同的方法，以找到适合您特定用例的最佳解决方案。」

整体的结论还是不错的

最后

相信屏幕前的你也学会了， 对于任何结论， 我觉得都保持质疑， 追求原理的心，不要放弃。 纸上得来终觉浅，绝知此事要躬行。 最好觉得写的不错，给我点个👍🏻， 如果喜欢这种的，我可以继续写哈哈哈哈