五莲网站建设,网络广告策划的内容,苏州城乡建设局网站质检员,做项目管理的网站相信大家都有浏览过#xff0c;很多购物网站购物车的添加商品动画#xff0c;今天#xff0c;我们就手写一个简单的抛物线动画#xff0c;先上案例#xff1a; 一、绘制页面
我们这里简单实现#xff0c;一个按钮#xff0c;一个购物车图标#xff0c;样式这里直接跳过…相信大家都有浏览过很多购物网站购物车的添加商品动画今天我们就手写一个简单的抛物线动画先上案例 一、绘制页面
我们这里简单实现一个按钮一个购物车图标样式这里直接跳过最终dom结构
div classcontainerdiv classappend idadd添加/divfooterdiv classcar idcarimg src./static/image/car.png alt/div/footer
/div二、核心逻辑
其他的基本没什么难度主要是这里的弧度怎么生成我们用到贝塞尔曲线这里我们可以看到根据弧度大概调下曲线弧度
接下来我们一步步实现逻辑
1. 创建点击事件生成要发生跳跃的元素这里跳跃的元素我们使用俩个 dom 生成利用外面的节点执行x 轴移动利用里面的节点执行 y 轴移动同时执行相互拉扯元素会向45°角度移动同时 x 轴加入过度效果就会形成弧度。
let btn document.getElementById(add) // 添加按钮
let car document.getElementById(car) // 小车
let delay 0.3 // 整个过程持续的时间秒(s)为单位btn.addEventListener(click, event {// 生成要执行弧度的元素let el createEl()// 按钮的位置信息let btn_rect btn.getBoundingClientRect()// 小车的位置信息let car_rect car.getBoundingClientRect()// 设置小球的位置X: 添加按钮距离网页的左边距 添加按钮自身一半的宽度 - 小球自身宽度的一半 Y: 添加按钮距离网页的上边距 - 按钮紫自身的高度el.style.left btn_rect.x btn_rect.width / 2 - el.offsetWidth / 2 pxel.style.top btn_rect.y - btn_rect.height px
})/*** description 生成弧度的元素* return {Object} dom 节点*/
function createEl() {let warp document.createElement(div)let slide document.createElement(div)warp.style.position fixedwarp.style.left 0warp.style.top 0warp.style.zIndex 2000warp.style.borderRadius 50%warp.style.transition transform ${delay}s linearslide.style.width 30pxslide.style.height 30pxslide.style.textAlign centerslide.style.lineHeight 26pxslide.style.backgroundColor redslide.innerHTML slide.style.fontSize 20pxslide.style.color #fffslide.style.borderRadius 50%slide.style.transition transform ${delay}s cubic-bezier(.62,-0.32,.9,.49)document.body.appendChild(warp)warp.appendChild(slide)return warp
}我们可以看下效果创建一个即将要跳转的元素 2. 这里我们让小球外边元素横向平移里边元素纵向移动形成一个拉扯计算横向平移的位置纵向平移的位置
setTimeout(_ {// 横向平移点击按钮距离网页左边距 - 购物小车距离网页左边距 小车自身宽度的一半el.style.transform translateX(-${btn_rect.x - car_rect.x car_rect.width / 2}px)// 纵向平移小车距离网页的上边距 - 点击按钮距离网页的上边距 小车自身高度的一半el.childNodes[0].style.transform translateY(${car_rect.y - btn_rect.y car_rect.height / 2}px)// 延迟动画结束后删除生成的跳跃元素setTimeout(_ {el.remove()}, delay * 1000)
}, 100)至此我们便实现了简单的购物车抛物线动画
三、其他
贝塞尔曲线
