Uni-App 蚂蚁森林

Uni-App 蚂蚁森林

仿支付宝-蚂蚁森林,给小树苗浇水逐渐成长到大树的过程,给小树浇水成长、给好友投票、加油、助力等,所有参数都可配置(如水滴值,树的类型、动画等)

功能概述:

  1. 该插件是用Uni-App写的,是一个完整的uni-app工程(可在微信小程序中运行),可直接在HBuilder X 中能直接运行的(注:您在使用时请把Uni-App应用标识(AppID)换成自己的哦)。
  2. 插件样式是模仿蚂蚁森林,而其中的所有数据都是可配的(完全可以自义定 或 从后端API获取),根据不同的数据(如用户信息、水滴值等)显示对应的动效。
  3. 该插件可用于为某种评比活场景的参赛人员加油、拉票、助力等类似场景。
  4. 给大家分享出来,如有不足之处还请见谅,同时也欢迎指证,我在此先谢过啦。

实例效果:

在这里插入图片描述

在这里插入图片描述

源码地址:

GitHub:https://github.com/MuGuiLin/AntForest
插件市场:https://ext.dcloud.net.cn/plugin?id=363

操作说明:

  1. 用水壶每浇水1次,水滴值向上+1。
  2. 点击树上面的雨滴,水滴值 + 收取到的雨滴值。

成长过程:

  1. 树的成长过程分为小树、中树、大树3个阶段。
  2. 现默认值: 小树(水滴值在100以下), 中树(水滴值在100 到 1000), 大树(水滴值在1000以上)。
  3. 树苗会在水滴值变化时会展示对应的动效 和 树的动效、大小等。

使用方法:

  1. 该模板是用Uni-Aapp框架进行编写的, 其语法就是vue的,模板就是微小程序,动画实现以CSS3主,JS辅。
  2. 可根据自己的需求和使用场景修改相应的配置参数和逻辑,如(水滴值,树的类型、大小、树成长动画,云走动的动画,浇水动画,树的进度,选手信息等等。
  3. 代码中有详细的代码注释,可根据自己的业务需求,修改为自己 或 项目所用。
  • 6
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值