<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一下，另外后台交互自己写去。
是黄啊码，码字的码，退。。。退。。。退。。。朝！
