JS 实现抛物线动画

在做小程序的项目中,需要在添加购物车的时候,增加抛物线小球动画。先给大家看下效果图(其实已经是实现后的效果了,顺便给自己公司打广告了哈哈)

1460000013355489

分析

这种不固定起始位置的动画,自然不能用 gif 图,所以只能用原生代码实现

那我们有什么工具来实现动画呢?

  • 小程序提供了 JS API createAnimation 来创建动画
  • CSS transition

工具有了,我们再看一下什么是抛物线。

这里我们只讨论水平抛物线,水平抛物线从数学原理上来说就是【水平匀速、垂直加速的运动】,转换成代码层面就是在动画效果 timingFunction 中,水平动画采用 linear ,垂直动画采用 ease-in

所以我们需要把这个抛物线动画分解成 两个 同时 进行但 不同动画效果 的动画。

实现

(一)小程序的实现

JS:

HTML:

translate 优化

据我所知,用 transform: translate() 来实现的动画会比 top & left 性能更优,但实现下来却没那么容易咯。

研究来研究去,发现 translate 的做法比 top & left 的做法多了一步,就是需要将小球的 translate 位移还原(否则 translate 一直有值),才能保证下一次的位移从点击的位置开始

HTML 部分不变

(二)H5 的实现

除了小程序之外,前端日常开发更多的当然还是 H5,下面我将用 CSS3 transition 的方法来实现

还有体验链接哦,点我

至此,水平抛物线动画的实现就介绍得差不多啦,嘻嘻!!

1 3 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部