写一个Javascript方法给定起点和终点坐标实现dom元素向上抛出再落下的动画要求动画轨迹是贝塞尔曲线
我们可以使用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秒。
原文地址: https://www.cveoy.top/t/topic/47k 著作权归作者所有。请勿转载和采集!