V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
qiutianaimeili
V2EX  ›  前端开发

小程序飞入购物车特效

  •  
  •   qiutianaimeili · 2018-11-16 10:06:41 +08:00 · 3561 次点击
    这是一个创建于 2203 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

    3 条回复    2018-11-19 10:23:23 +08:00
    del1214
        1
    del1214  
       2018-11-16 13:03:17 +08:00
    支持一下
    flowfire
        2
    flowfire  
       2018-11-19 10:21:57 +08:00 via iPhone
    可以用纯 css 实现,计算开始和结束坐标,x 轴用 linear,y 轴用 ease in
    flowfire
        3
    flowfire  
       2018-11-19 10:23:23 +08:00 via iPhone
    看了一下你发的 gif 图,y 轴你估计得自己写贝塞尔曲线了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5423 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 08:22 · PVG 16:22 · LAX 00:22 · JFK 03:22
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.