移动轨迹问题

Question

这个小球的移动轨迹怎么处理的，小球有下x，y始值，但是没有结束x,y，结束值在哪设置？

enter（） 和  afterEnter（） 有啥区别?说的挺模糊

Answer 1

one_pieces 2023-04-01 19:26:56

同学你好，首先小球的移动轨迹，分了两个方向的动量，一个是水平方向的 x 轴，一个是垂直方向的 y 轴。通过在这两个方向去移动小球，就可以让小球从右上角的位置，移动到左下角了。如果两个方向移动的速度是相同的，那么这个移动轨迹就是一条直线，否则就会是一条曲线。具体到代码里，.ball 元素对应 y 轴，.inner 元素对应 x 轴，然后通过 transition 的动画曲线函数来控制它们的移动速度，这样就实现了曲线的移动轨迹，这个在视频里介绍了哈。

下个问题是结束值在哪里设置？结束的位置其实我们不需要设置，结束的位置就是小球原本的位置，因为我们是先将小球移动到点击的 cartControl 的位置，然后通过 transition，再回到原来的位置（也就是购物车的位置），来实现动画的。所以不需要设置结束位置。

最后一个问题，enter 和 afterEnter 有什么区别？首先 enter 是 transition 动画开始时的回调，那么 afterEnter 很明显，就是动画执行结束时的回调，beforeEnter 就是动画执行前。整个动画的流程是

1. start 里改变小球是否展示（item.isShown = true)，这时就会触发 Transition 组件的 beforeEnter 事件

2. beforeEnter 里会获取刚才的小球对应的 cartControl（也就是 item.el）的位置，然后将 y 和 x 分别设置到 .ball（也就是 el）和 .inner 的位置上（也就是 translate3d），接着就开始动画，也就是 enter

3. enter 里，我们通过在下帧（使用 setTimeout）将 translate3d 重置回原来的值，这样就会触发 trasition 的动画，小球开始移动。然后 transition 事件结束（就是 transitionend），在 transitionend 事件回调里调用 done，就会触发 afterEnter

4. afterEnter 里，把小球隐藏掉

  

这样整个小球移动的动画就结束了哈~