css抛物线动画——cubic-bezier
最近在看vue仿饿了吗的视频，因为看很多人说小程序很多部分和vue相似，以前粗浅的学过angular1,现在流行的三大框架有angular,vue,react。怎么说也要会一个吧，不然万一要跳槽呢。。
效果图.gif
在做这个点击商品，然后小球飞到购物车这个效果的时候很是头大，虽然视频中用的是vue1,我用的vue2。但是理论上能出一样的效果。但是始终出不来，小球一直是直线的，根本不是抛物线。然后去网上百度，都没有直接的例子。说的基本都是一样的，但是没找到一个抛物线运动的例子。
so,自己动手，丰衣足食（刚找同事要了个录屏软件。。。）
前面的我就不细说了
向下面这种写是不行的，大家估计试过了
大家请先忽略cubic-bezier的值，后面会简单说明
<style>
#inner{
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
background:blue;
margin-left: 100px;
margin-top: 100px;
transition:0.5s all cubic-bezier(0.14,-1.33,1,0.18);
transform:translate(200px,200px);
}
</style>
<div id="inner"></div>
如果用js来触发，发现是直线
<style>
#inner{
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
background:blue;
margin-left: 100px;
margin-top: 100px;
transition:0.5s all cubic-bezier(0.14,-1.33,1,0.18);
}
</style>
</head>
<body>
<button onclick="run1()">开始</button>
<div id="inner">
</div>
</body>
<script type="text/javascript">
function run1(){
var obj =document.getElementById("inner");
obj.style.transition="all 0.5s cubic-bezier(0,0,0,0)";
obj.style.transform="translate(200px,200px)";
}
</script>
直线.gif
网上和视频上都是用两层盒子嵌套的来实现的
外层盒子往X轴方向移动
内层盒子向Y轴移动
这样拆分的话是否能实现呢？
<style>
#inner{
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
background:blue;
margin-left: 100px;
margin-top: 100px;
transition:0.5s all cubic-bezier(0.14,-1.33,1,0.18);
}
</style>
</head>
<body>
<button onclick="run1()">开始</button>
<div id="box">
<div id="inner"></div>
</div>
</body>
<script type="text/javascript">
function run1(){
var obj =document.getElementById("box");
obj.style.transition="all 0.5s cubic-bezier(0,0,0,0)";
obj.style.transform="translateX(100px)";
var inner =document.getElementById("inner");
inner.style.transform="translateY(100px)";
}
</script>
成功.gif
大家一定要注意，内外两层的盒子都要写
transition:cubic-bezier(0.14,-1.33,1,0.18);
无论是在样式里面写，还是用js控制，都要给他这个属性
如果缺少其中的一个，都会变成直线形式
这里大家就自行下去实验了
还有一点，细心的人发现上面，我给外层盒子写的
图片.png
cubic-bezier的参数都是0
如果外部盒子也给参数的话会给曲线造成一些影响，具体怎么影响我也懒得研究了。。。
还有一点要说明，内外的动画的时间一定要一样
如果大盒子的时间大于外部，最后多的那几秒就会直线向X轴运动了，因为大盒子我给的transformX
同里，大盒子时间小于内部也是一样
以为本来就是X和Y轴的合成速度，现在少了一个分量，自然是直线了
最后我说下cubic-bezier的参数问题
推荐一个网站
http://cubic-bezier.com
cubic-bezier.png
通过手动调整就能得到想要的参数
值得一提的是，左边的点是动画起始点，右边的是结束点
一开始我是这么选的
错误曲线.png
结果悲剧了
演示.gif
正确的图形是这样的
正确图形.png
好了下班了，吃饭
需要慕课网饿了吗视频的可以留邮箱。
