微信小程序 - 点餐界面添加购物车左右摆动动画（用户点击添加到购物车后会有一个左右摆动的购物车提示）

布满荆棘的人生 2022-12-09 05:12 230阅读 0赞

## 效果图 ##

![在这里插入图片描述][20200922090021321.gif_pic_cnter]

## 动画代码 ##

> 这里 **只提供图中购物车动画代码**，不提供以上点餐界面（需要点餐界面 [点击这里：Gitee仓库][Gitee]）。

在触发代码中使用 `this.cartWwing()` 调用动画，不理解请访问 [教程。][Link 1]

/** * 点击商品+号购物车摆动 * @return void */
    cartWwing: function()
    { 
    
      // 创建动画实例(animation)
      var animation = wx.createAnimation({ 
        duration: 100,//动画持续时间
        timingFunction: 'ease-in',//动画以低速开始
        //具体配置项请查看文档
      })
    
      // 通过实例描述对象()
      animation.translateX(6).rotate(21).step()
      animation.translateX(-6).rotate(-21).step()
      animation.translateX(0).rotate(0).step()
    
      // 导出动画
      this.setData({ 
        ani: animation.export()
      })
    
    },

[20200922090021321.gif_pic_cnter]: /images/20221123/e960e1bf3ef54848b3c79698df0ad685.png
[Gitee]: https://gitee.com/wangjiabin-x/ordering-interface
[Link 1]: https://blog.csdn.net/weixin_44198965/article/details/108049637?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160073674219724835844507%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=160073674219724835844507&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_v1~rank_blog_v1-2-108049637.pc_v1_rank_blog_v1&utm_term=%E5%8A%A8%E7%94%BB&spm=1018.2118.3001.4187