velocityjs 由中心发出图片到指定位置

使用 velocity.js 可以很方便地实现从中心位置发出图片并移动到指定位置的效果。

首先，需要在 HTML 中定义一个包含图片的容器，并设置其位置为绝对定位，并将图片的初始位置设置为容器的中心位置。例如：

<div id="container" style="position: absolute; left: 50%; top: 50%;">
  <img src="image.png" style="position: absolute; left: -50%; top: -50%;">
</div>

然后，在 JavaScript 中使用 velocity.js 库的 animate() 方法来实现图片的移动效果。例如：

var container = document.getElementById("container");
var img = container.getElementsByTagName("img")[0];

// 使用 animate() 方法实现图片从中心位置移动到目标位置
img.velocity({
  left: "100px",
  top: "200px"
}, {
  duration: 1000,
  easing: "easeInOutQuad"
});

上述代码中，animate() 方法的第一个参数是一个对象，用于指定图片移动到的目标位置，这里设置为 left: "100px" 和 top: "200px"，表示将图片移动到距离左边界 100 像素、距离上边界 200 像素的位置。

animate() 方法的第二个参数是一个对象，用于指定动画的参数，这里设置了动画的时长为 1000 毫秒，缓动函数为 "easeInOutQuad"，表示动画先加速再减速。

通过上述代码，就可以实现从中心位置发出图片并移动到指定位置的效果。