gsap动画bug？

Question

我跟源代码一模一样，为啥一开始的时候gsap动画确实初始位置是对的，在点击的图片中心开始变大，但是滚动屏幕之后，动画的位置就发生错误了，变成从最低部的位置开始变大动画了。但是我访问了你的上线项目网址，发现没有这个问题。但是我的代码和gsap的版本都是跟你的一样的呀。我尝试打印坐标，发现是正常的，但就是动画开始的位置是错误的？就是不知道怎么回事？就是数据是正常的，但是动画显示出错，就是滚动屏幕之后动画初始位置是错误的，好像有延迟一样，就是原本图片不是在最底部吗？然后滚动屏幕之后这个图片在顶部了，但是点开播放的动画，却是从最低部开始变大。都不知道怎么办了，数据是正确的，但是就是动画是错的
刚刚我又发现了，假如滚动屏幕之后，按F12打开检查元素，动画的位置又变成正常的了，我怀疑是屏幕刷新机制的问题？为啥打开f12的console面板，动画的位置又正常的呢？但是我又不知道怎么修复这个bug？

Answer 1

Sunday 2023-02-04 14:26:47

你好

咱们来捋一下逻辑。

根据 gasp 的动画打开 detail 页面，具体的逻辑如下：

1.   首先找到点击的 item 的中心坐标，并且把它记录下来

2.  通过一个动画展示 detail 组件

3. 关闭的时候，根据上面记录的位置，通过动画把 detail 组件关闭。

上面三步是一个大体逻辑。

那么根据你所说的，出现这个应该的原因，应该就是在第一步，也就是 记录中心点坐标的时候，出现了错误。或者说，动画执行的起始位置，不是你记录的中心点坐标。

那么可以从一个小 demo 入手，把复杂的项目逻辑简化成最简单的代码，从而分析具体原因

• 提问者 zippen #1

  你说的很对，但是一开始记录中心点坐标的时候是正常的呀，数据都是正确的，但是屏幕开始滚动之后，坐标就不对了。其实也不是不对，数据坐标我发现是对的，但是动画的坐标出错，就是显示错误，所以从小demo入手也没办法解决吧，因为是屏幕滚动问题

• 提问者 zippen #2

  怎么说呢？就是滚动屏幕的时候，同一张图片因为记录的上一次的坐标，迟迟不更新，就是明明图片都滚动到上面了，动画坐标还是一开始在屏幕下方时候的坐标

• 提问者 zippen #3

  我知道为啥错误了，就是一开始加载的20张图片的坐标被定死了。我发现滚动屏幕的时候，还是一开始记录的坐标。然后到了加载更多照片的时候，新的照片前几张的坐标是正确的，就是现在的问题是，加载了20张图片的时候坐标被定死了，滚动的时候不会动态刷新，所以应该怎么办呢

点开查看后面3条评论