【黄啊码】微信小程序小程序仿蚂蚁森林浇水

<view class="return" bindtap="before">     <van-icon name="arrow-left" size="22px" color="#fff" /> </view> <view class="box">     <view class="progress_box">         <van-progress color="#f2826a" percentage="{{waternum}}" stroke-width="18" />         <image class="jindt" src="/images/jdt.png"></image>     </view>     <view style="color:#fff;margin-top:8rpx;text-align:center;font-size:24rpx">再浇水17000g水滴，小树将茁壮成长为茂盛大树～</view>     <!-- 树 -->     <view bindanimatiοnend="treeend" class="tree {{shutree?'a-swing':''}}">       <!-- 大树 -->         <image wx:if="{{waternum==100}}" class="shumu" mode="aspectFill" src="../../../images/shu.png"></image>      <image wx:if="{{waternum>=60 && waternum<100}}" class="zhongshu" mode="aspectFill" src="../../../images/xiaoshu@1x.png"></image>      <image wx:if="{{waternum>=20 && waternum<60}}" class="xiaoshu" mode="aspectFill" src="../../../images/xiaoshumiao@1x.png"></image>      <image wx:if="{{waternum>=0 && waternum<20}}" class="youshu" mode="aspectFill" src="../../../images/xiaoshuya@1x.png"></image>         <image mode="aspectFill" class="shupan" src="/images/shupan.png"></image>         <image wx:if="{{waterbool}}" class="water" src="/images/water.png"></image>     </view>     <!-- /树 -->     <!-- 水瓶 -->     <view style="opacity:{{bottle?'1':'0'}}" bindanimationstart="bottlestart" bindanimatiοnend="bottleend" class="bottle {{tree?'bottle-fadeIn':''}}  ">         <image mode="aspectFill" src="../../../images/shashui.png"></image>     </view>     <!--/水瓶-->     <!-- 雨水 -->     <view class="rain_box">         <view class="line line1">             <view></view>             <view></view>             <view></view>             <view></view>             <view></view>         </view>         <view class="line line2">             <view></view>             <view></view>             <view></view>             <view></view>             <view></view>         </view>         <view class="line line3">             <view></view>             <view></view>             <view></view>             <view></view>             <view></view>         </view>     </view>     <!-- 选项 -->     <view class="flex-between bot_s">         <view class="left_tab flex-around">             <image bindtap="answer" mode="aspectFill" src="/images/dt.png"></image>             <image bindtap="tosign" mode="aspectFill" src="/images/qd.png"></image>             <image bindtap="shaomiao" mode="aspectFill" src="/images/sm.png"></image>         </view>         <view>             <view class="imgs_box" bindtap="animation">                 <image mode="aspectFill" class="shuipan" src="/images/shuipan.png"></image>                 <image mode="aspectFill" class="shuihu" src="/images/shashui.png"></image>                 <view class="text">160g</view>             </view>         </view>     </view>     <!-- /雨水 -->     <!-- <view type="button" id="btn" bindtap="animation">浇水</view> --> </view> <image mode="aspectFill" class="tree_bg" src="/images/tree_bg.jpg"> </image>

wxss .box {   width: 100%;   /* margin: 20rpx auto; */   overflow: hidden;   position: relative;   z-index: 10;   height: 100vh;   /* padding-bottom: 30px; */ } .tree {   width:100%;   height:792rpx;   /* background: url(../../../images/shu.png) no-repeat; */   position: absolute;    bottom:20%; } .tree>.shumu{   width:470rpx;   height: 620rpx;   position: absolute;   bottom:72rpx;   z-index: 10;   left: 50%;   margin-left: -235rpx; } .tree>.zhongshu{   width:400rpx;   height: 550rpx;   position: absolute;   bottom:72rpx;   z-index: 10;   left: 50%;   margin-left: -200rpx; } .tree>.xiaoshu{   width: 250rpx;   height: 480rpx;     position: absolute;   bottom:72rpx;   z-index: 10;   left: 50%;   margin-left: -95rpx; } .tree>.youshu{   width: 170rpx;   height: 180rpx;     position: absolute;   bottom:60rpx;   z-index: 10;   left: 50%;   margin-left: -85rpx; } .bottle {   position: absolute;   bottom: 23%;   right: 150rpx;   width: 180rpx;   height: 130rpx;   transition: 1.8s;   -webkit-transform: rotate(-45deg);   -moz-transform: rotate(-45deg);   -ms-transform: rotate(-45deg);   -o-transform: rotate(-45deg);   transform: rotate(-45deg); } .bottle image{   width: 100%;   height: 100%; } .rain_box {   position: absolute;   overflow: hidden;   top: 440rpx;   right:380rpx; } .rain_box .line {   width: 8rpx;   float: left;   position: relative; } .rain_box .line view {   margin-top: 4rpx;   height: 4rpx;   width: 4rpx;   background: #384;   border-radius: 6rpx;   opacity: 0 } .rain_box .line1 {   -webkit-transform: rotate(45deg);   -moz-transform: rotate(45deg);   -ms-transform: rotate(45deg);   -o-transform: rotate(45deg);   transform: rotate(45deg);   margin-left: 30rpx; } .rain_box .line2 {   -webkit-transform: rotate(30deg);   -moz-transform: rotate(30deg);   -ms-transform: rotate(30deg);   -o-transform: rotate(30deg);   transform: rotate(30deg);   margin-left: 4rpx; } .rain_box .line3 {   -webkit-transform: rotate(20deg);   -moz-transform: rotate(20deg);   -ms-transform: rotate(20deg);   -o-transform: rotate(20deg);   transform: rotate(20deg);   margin-left: 6rpx; } #btn {   position: absolute;   top: 180rpx;   right: 20rpx;   height: 40rpx;   width: 100rpx;   background: #f60;   border: none;   color: #fff; } /* animation */     /* animation */     .a-swing{-webkit-animation:1s ease;-moz-animation:1s ease;-ms-animation:1s ease;animation:1s ease;}     .bottle-fadeIn{-webkit-animation:.8s ease;-moz-animation:.8s ease;-ms-animation:.8s ease;animation:.8s ease;}     .a-watering{-webkit-animation:0.9s ease 0 3;-moz-animation:0.9s ease  0 3;-ms-animation:0.9s ease  0 3;animation:0.9s ease  0 3;}     /* 摇摆 */     .a-swing{animation:swing 1s ;}     .bottle-fadeIn{-webkit-animation-name:bottleFadeIn;-moz-animation-name:bottleFadeIn;-ms-animation-name:bottleFadeIn;animation-name:bottleFadeIn 4s ;}     .a-watering{-webkit-animation-name:watering;-moz-animation-name:watering;-ms-animation-name:watering;animation-name:watering;}     /*水瓶动画*/     @keyframes bottleFadeIn{         0%{opacity:0;bottom:340rpx;right:0;-webkit-transform:rotate(0deg);}         100%{opacity:1;bottom:23%;right:150rpx;-webkit-transform:rotate(-45deg);}     }     /*流水动画*/     @keyframes watering{         0%{opacity:0;}         100%{opacity:1;height:8rpx;}     }     /* 摇摆 */     @keyframes swing{         0%{-webkit-transform:scale(1);}         25%{-webkit-transform:scale(1.1);}         50%{-webkit-transform:scale(1);}         75%{-webkit-transform:scale(1.1);}         100%{-webkit-transform:scale(1);}     } /*         @keyframes swing{         20%{transform:rotate(15deg);}         40%{transform:rotate(-10deg);}         60%{transform:rotate(5deg);}         80%{transform:rotate(-5deg);}         100%{transform:rotate(0);}     } */     .van-progress__portion{       background:-webkit-repeating-linear-gradient(-45deg,orange 0px,orange 5px,rgb(255,231,156) 8px,rgb(255,231,156) 16px)!important;       border-radius: 120rpx!important;     }     .van-progress__pivot{       right: -60rpx!important;     }     .progress_box{       width: 80%;       position: relative;       margin:200rpx auto 0;       left: 50%;       height: 65rpx;       margin-left: -40%;     }     .van-progress{       background: transparent!important;       z-index: 10;       height: 36rpx!important;       left: 13rpx!important;        top: 6rpx!important;     }     .van-progress__pivot{       background: transparent!important;     }     .tree_bg{       width: 100vw;       height: 100vh;       position: absolute;       z-index: 1;     }     .return{       position:absolute;       z-index:99;       top:110rpx;       left:30rpx;     }     .bot_s{       padding:0 56rpx;       position: absolute;       bottom:15rpx;     }     .left_tab image{        width: 98rpx;        height: 124rpx;        margin-right: 42rpx;        margin-top: 83rpx;     }     .left_tab image:last-child{       margin-right: 53rpx;     }     .imgs_box{       width:214rpx;       height: 226rpx;       position: relative;     }     .imgs_box .shuipan{        width: 100%;        height: 100%;        position: absolute;     }     .imgs_box .shuihu{       position: absolute;       width:194rpx;       height:138rpx;    }    .imgs_box .text{      color: #fff;      width: 80rpx;      font-weight: bold;      text-align: center;      position: absolute;      bottom: 20rpx;      left: 50%;      margin-left: -40rpx;    }    .shupan{      /* padding:; */      width: 430rpx;      height: 150rpx;       position: absolute;       bottom: 0;       left: 50%;       margin-left: -225rpx;    }    .water{      width: 22rpx;      height: 33rpx;      position: absolute;      z-index: 99;      bottom: 0;      left: 50%;      transform: rotateZ(45deg);      margin-left: 1rpx;     margin-bottom: 75rpx;    }    .jindt{      width: 105%;      height: 100%;      position: absolute;      bottom: 9rpx;    }    .van-progress__portion{      transition: .4s!important;    }

js

// index/pages/tree/tree.js Page({   /**    * 页面的初始数据    */   data: {     djshu:4,//树的等级1，2，3，4     tree:false,     waternum:0,     waterbool:false,     animation:true,     shutree:false,     bottle:false   },   treeend(){//树动画结束     this.setData({       tree:false,       shutree:false,       animation:true,     })     var num=this.data.waternum     if(num==100){       wx.showToast({         title: '你以完成任务',       })       return false     }      this.setData({       waternum:num+=20      })   },   before(){     wx.navigateBack({       delta: 1,     })   },   bottlestart(){//水滴动画开始前     this.setData({       bottle:true     })   },   bottleend(){//水滴动画结束     this.setData({       bottle:false,       tree:false,       waterbool:true,     })     setTimeout(()=>{       this.setData({         shutree:true,         waterbool:false,       })     },500)   },   animation(){//动画事件启动     var animation=this.data.animation     if(animation){       this.setData({         animation:false,         tree:true       })     }else{       return false     }   },   answer(){     wx.navigateTo({       url: '/index/pages/dati/dati',     })   },   tosign(){     wx.navigateTo({       url: '/index/pages/qiandao/qiandao',     })   },   shaomiao(){     wx.switchTab({       url: '/pages/zwy/zwy',     })   },   /**    * 生命周期函数--监听页面加载    */   onLoad: function (options) {   },   /**    * 生命周期函数--监听页面初次渲染完成    */   onReady: function () {   },   /**    * 生命周期函数--监听页面显示    */   onShow: function () {   },   /**    * 生命周期函数--监听页面隐藏    */   onHide: function () {   },   /**    * 生命周期函数--监听页面卸载    */   onUnload: function () {   },   /**    * 页面相关事件处理函数--监听用户下拉动作    */   onPullDownRefresh: function () {   },   /**    * 页面上拉触底事件的处理函数    */   onReachBottom: function () {   },   /**    * 用户点击右上角分享    */   onShareAppMessage: function () {   } })

怎么？缺少图片，拿去

透明图片自己P一下，另外后台交互自己写去。 

是黄啊码，码字的码，退。。。退。。。退。。。朝！