快应用-实现添加购物车的动画效果

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

实现后的效果：

核心实现代码：

template ：

<template>
	<div>
		<!--红点的元素-->
    	<div class="fly" show="{{showfly}}" style="{{positonStyle}}"></div>
    </div>
</template>

style:

<style>
.fly{position:fixed;width:30px;height:30px;background-color: #ff0000;border-radius:100px;}
</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)
  }
}

不足之处：
1.没能实现贝塞尔曲线效果
2.左下角 "已选"按钮 的坐标位置是代码里写固定了，在不同设备上坐标位置会不同从而影响实现效果。应该通过代码获取它在屏幕的坐标位置，可是我没能找到获取它坐标位置的方法。(这个在 web的js中是可以获取到的，然而快应用不行。如果有知道的同学，请不吝赐教，谢谢！)