CSS3 抛物线加入购物车

最新推荐文章于 2022-06-16 22:50:49 发布

king_jw

最新推荐文章于 2022-06-16 22:50:49 发布

阅读量1.2w

点赞数 3

分类专栏：前端文章标签：动画效果

本文链接：https://blog.csdn.net/king_jw/article/details/47172291

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前言

项目中用到购物车抛物线动画一开始使用的是Jquery插件 jquery.fly.js;在手机上使用时一些较手机效果不是很好，因为这个插件会根据抛物线动画时间和距离计算抛物线点轨迹（FPS，说是一秒要有60帧的样子）会有卡顿现象，而且还有window.requestAnimationFrame的兼容性问题，如果在只是PC段使用还是挺好的。下面介绍我们使用CSS3的方式。

Demo下载地址:http://download.csdn.net/detail/king_jw/9115151 包含完整的demo,请勿使用demo中的页面和图片

使用的是Css3 两个元素，外面的元素纵坐标移动，里面的元素横坐标移动不使用keyframe

先贴代码

JavaScript

预设5个抛物点，这部分视情况是否要这样做

var $pointDiv = $('<div id="pointDivs">').appendTo('body');
for(var i = 0;i<5;i++){
    $('<div class="point-outer point-pre"><div class="point-inner"/></div>').appendTo($pointDiv);
}

点击事件代码

//获取开始点坐标
var startOffset = $(ev.target).offset();
//获取结束点坐标
var endTop = window.innerHeight - 30, endLeft = 20,left = startOffset.left+10,top = startOffset.top+10;
var outer = $('#pointDivs .point-pre').first().removeClass("point-pre").css({left:left+'px',top:top+'px'});
var inner = outer.find(".point-inner");
setTimeout(function(){
    outer[0].style.webkitTransform = 'translate3d(0,'+(endTop - top)+'px,0)';
    inner[0].style.webkitTransform = 'translate3d('+(endLeft - left)+'px,0,0)';
    setTimeout(function(){
        outer.removeAttr("style").addClass("point-pre");
        inner.removeAttr("style");
    },800);
},1);

CSS

.point-outer{
    position:absolute; 
    z-index:20;
    -webkit-transition:all 0.8s cubic-bezier(0.39,-0.4,0.83,0.23) 0s;
}
.point-inner{
    width:10px;
    height:10px; 
    border-radius:50%;
    background-color:#ff6326; 
    -webkit-transition:all 0.8s linear 0s;
}
.point-outer.point-pre{
    display:none;
}

说明

这里在说明下JS中的两个setTimeout。第一个setTimeout是等元素定位到起始点，第二个是抛物线动画自行完成后隐藏抛物点。
使用div中嵌入div：外面的div是outer,里面的是inner 。outer 的css设置其垂直方向运动，inner的css设置水平方式运动。为达到抛物线效果，inner的运动速度设置的匀速（linear），而outer运动速度由贝塞尔曲线(cubic-bezier(n,n,n,n))设定，贝塞尔曲线值可以参考示例中的值。

关于贝塞尔曲线值的设置可以看下大神的文章贝塞尔曲线与CSS3动画、SVG和canvas的基情