小程序飞入购物车特效

2018-11-16 10:06:41 +08:00
 qiutianaimeili

一个简单的小程序飞入购物车特效：

主要思路就是利用抛物线方程计算出一些关键点，然后定时去绘制位置，不过小程序里不能计算太过密集，否则会很卡，和 pc 上的主要区别是绘制更少的关键点，中间的过渡用 css 的 transition 去做。

可以同时有多个抛物线，更多详情请看原文，：

http://qiutianaimeili.com/html/page/2018/11/3q4638qm4pk.html

3553 次点击
所在节点    前端开发
3 条回复
del1214
2018-11-16 13:03:17 +08:00
支持一下
flowfire
2018-11-19 10:21:57 +08:00
可以用纯 css 实现，计算开始和结束坐标，x 轴用 linear，y 轴用 ease in
flowfire
2018-11-19 10:23:23 +08:00
看了一下你发的 gif 图，y 轴你估计得自己写贝塞尔曲线了

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/508402

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX