本文共 1476 字，大约阅读时间需要 4 分钟。

因为在快应用中，相比web的js有很多方法不支持，所以实现起来比较受限制。这里写了一个简易的效果。未用到贝塞尔曲线，想做的效果更完美的话可以花时间尝试一下。

实现后的效果：

核心实现代码：

template ：

style:

script:

export default {
     private: {
     	positonStyle: {
   }, //红点样式    showfly: false, //是否展示红点  },     //点击商品 触发动画  clickFood(e) {
       var me = this;    //显示红点    me.showfly = true;     //获取点击商品的位置坐标值    var left = e.changedTouches[0].clientX;    var top = e.changedTouches[0].clientY;    //设置红点动画的起始位置    me.positonStyle = {
         'left': left + "px",      'top': top + "px",    }		//执行红点动画    var animate_rate = 0;    let myFunction = setInterval(() => {
         animate_rate += 0.01;      animate_rate = animate_rate > 1 ? 1 : animate_rate;      var scaleRate = 1;      scaleRate = (1 - (animate_rate * 0.5));      if (animate_rate >= 1) {
           clearInterval(myFunction);        scaleRate = 0;        me.addFoodByOften(idx);      }	 // 这里的 坐标140,1300  是左下角 "已选"按钮 的坐标（动画目标位置）      var leftdistance = 140 - left;      var topdistance = 1300 - top;      var newleft = left + (leftdistance * animate_rate);      var newtop = top + (topdistance * animate_rate);      me.positonStyle = {
           'left': newleft + "px",        'top': newtop + "px",        'transform': 'scaleX(' + scaleRate + ')' + ' scaleY(' + scaleRate + ')',      }    }, 6)  }}

不足之处：

转载地址：http://fomen.baihongyu.com/