Uni-App 蚂蚁森林
仿支付宝-蚂蚁森林,给小树苗浇水逐渐成长到大树的过程,给小树浇水成长、给好友投票、加油、助力等,所有参数都可配置(如水滴值,树的类型、动画等)
功能概述:
- 该插件是用Uni-App写的,是一个完整的uni-app工程(可在微信小程序中运行),可直接在HBuilder X 中能直接运行的(注:您在使用时请把Uni-App应用标识(AppID)换成自己的哦)。
- 插件样式是模仿蚂蚁森林,而其中的所有数据都是可配的(完全可以自义定 或 从后端API获取),根据不同的数据(如用户信息、水滴值等)显示对应的动效。
- 该插件可用于为某种评比活场景的参赛人员加油、拉票、助力等类似场景。
- 给大家分享出来,如有不足之处还请见谅,同时也欢迎指证,我在此先谢过啦。
实例效果:
源码地址:
GitHub:https://github.com/MuGuiLin/AntForest
插件市场:https://ext.dcloud.net.cn/plugin?id=363
操作说明:
- 用水壶每浇水1次,水滴值向上+1。
- 点击树上面的雨滴,水滴值 + 收取到的雨滴值。
成长过程:
- 树的成长过程分为小树、中树、大树3个阶段。
- 现默认值: 小树(水滴值在100以下), 中树(水滴值在100 到 1000), 大树(水滴值在1000以上)。
- 树苗会在水滴值变化时会展示对应的动效 和 树的动效、大小等。
使用方法:
- 该模板是用Uni-Aapp框架进行编写的, 其语法就是vue的,模板就是微小程序,动画实现以CSS3主,JS辅。
- 可根据自己的需求和使用场景修改相应的配置参数和逻辑,如(水滴值,树的类型、大小、树成长动画,云走动的动画,浇水动画,树的进度,选手信息等等。
- 代码中有详细的代码注释,可根据自己的业务需求,修改为自己 或 项目所用。