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

举报
黄啊码 发表于 2022/09/01 23:52:49 2022/09/01
【摘要】 <view class="return" bindtap="before">     <van-icon name="arrow-left" size="22px" color="#fff" />      </view> <...

<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一下，另外后台交互自己写去。 

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

文章来源: markwcm.blog.csdn.net，作者：黄啊码，版权归原作者所有，如需转载，请联系作者。

原文链接：markwcm.blog.csdn.net/article/details/126640584

【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
小程序
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入