小球动画的适配

//如果固定死小球的位置,如果不同手机的分辨率不同,就会造成小球最后的位置不同,运动效果不好

//小球动画的优化思路:

//1.先得到徽标的横纵坐标,再得到小球的横纵坐标,二者相减得到的结果就是小球需要移动的位置

//2.使用DomObj.getBoundingClientRect();

//代码处理如下:

var ballPosition = this.$refs.ball.getBoundingClientRect();
var bagePosition = document.getElementById("bage").getBoundingClientRect();
var x = bagePosition.left - ballPosition.left;
var y = bagePosition.top - ballPosition.top;
el.style.transform = `translate(${x}px,${y}px)`;//这里使用了。
posted @ 2019-09-25 09:17  Moliy-Moliy  阅读(143)  评论(0编辑  收藏  举报