我们可以使用CSS3的animation动画来实现这个效果,同时使用贝塞尔曲线来控制动画的轨迹。下面是一个实现该效果的Javascript方法:

function throwAndFall(dom, startX, startY, endX, endY, duration) {
  // 计算贝塞尔曲线控制点的坐标
  var controlX = (startX + endX) / 2;
  var controlY = Math.min(startY, endY) - 100;
  
  // 设置动画的关键帧
  var keyframes = `
    @keyframes throwAndFall {
      0% { transform: translate(${startX}px, ${startY}px); }
      50% {
        transform: translate(${controlX}px, ${controlY}px);
      }
      100% { transform: translate(${endX}px, ${endY}px); }
    }
  `;
  
  // 创建一个style标签,并将关键帧插入到其中
  var style = document.createElement('style');
  style.innerHTML = keyframes;
  document.head.appendChild(style);
  
  // 设置dom元素的动画样式
  dom.style.animation = `throwAndFall ${duration}ms ease-out forwards`;
  
  // 动画完成后,移除style标签并清除动画样式
  setTimeout(function() {
    document.head.removeChild(style);
    dom.style.animation = '';
  }, duration);
}

使用该方法可以轻松地实现dom元素向上抛出再落下的动画,例如:

var elem = document.getElementById('my-elem');
throwAndFall(elem, 100, 300, 500, 100, 1000);

该代码将会使id为my-elem的dom元素从(100, 300)的位置向上抛出,再落到(500, 100)的位置,动画时长为1秒。

写一个Javascript方法给定起点和终点坐标实现dom元素向上抛出再落下的动画要求动画轨迹是贝塞尔曲线

原文地址: https://www.cveoy.top/t/topic/47k 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录