小程序定时器自动隐藏/显示

wxml页面:

<view class="guide {{showView?'show':'hide'}}" animation="{{animationGuide}}">
    <view class="welcome" bindtap="welcome" animation="{{animationTxt}}">
      <text class="wel tocenter_left1" animation="{{animationData}}">W</text>
      <text class="wel tocenter_left2" animation="{{animationData2}}">E</text>
      <text class="wel tocenter_left3" animation="{{animationData3}}">L</text>
      <text class="wel tocenter_middle" animation="{{animationDataRotate}}">C</text>
      <text class="wel tocenter_right3" animation="{{animationData4}}">O</text>
      <text class="wel tocenter_right2" animation="{{animationData5}}">M</text>
      <text class="wel tocenter_right1" animation="{{animationData6}}">E</text>   
    </view>
    <view class="welcome_txt">网络</view>
</view> 

<view>
  <text style='height:100%;width:100%;backgroung-color:yellow'></text>
</view>

  <import src="/we7/pages/templates/footer.wxml" />
  <template is="footerWx" data="{{...tabBar}}" />
js页面:
Page({
data: {
showView: true,
animationData: {}
},


onLoad: function (options) {
showView: (options.showView == "true" ? true : false)
},

onReady: function () {
var animation = wx.createAnimation({
duration: 500,
timingFunction: 'linear',
})

this.animation = animation

//WELCOME动画效果
this.setData({
animationData: animation.export()
})

setTimeout(function () {
// W字母
animation.translate(80).step()
this.setData({
animationData: animation.export()
})
// E字母
animation.translate(65).step()
this.setData({
animationData2: animation.export()
})
// L字母
animation.translate(40).step()
this.setData({
animationData3: animation.export()
})
// O字母
animation.translate(-35).step()
this.setData({
animationData4: animation.export()
})
// M字母
animation.translate(-55).step()
this.setData({
animationData5: animation.export()
})
// E字母
animation.translate(-80).step()
this.setData({
animationData6: animation.export()
})

}.bind(this), 1000)

setTimeout(function () {
// C字母
animation.translate(0).rotateY(360).step()
this.setData({
animationDataRotate: animation.export()
})

}.bind(this), 2000)

setTimeout(function () {
// 背景色
animation.translate(0).rotateY(0).height(300).step()
this.setData({
animationGuide: animation.export()
})

}.bind(this), 3000)

//黄色背景隐藏
setTimeout(function () {
var that = this;
that.setData({
showView: (!that.data.showView)
})
}.bind(this), 4500)

}
})
 
wxss页面:
::-webkit-scrollbar{
display:none;
}
/* swiper navigator{
display: inline; */
/* height:200px; */
/* }
.swiper{
height:300px;
} */
.guide{
width: 100%;
height: 100%;
background: #fff100;
position: fixed;
left: 0;
top: 0;
text-align: center;
/* display: flex; */
}
.welcome{
top:40%;
position: relative;
}
.welcome_txt{
top: 52%;
position: relative;
}
.hide{
display: none;
}
.show{
display: block;
}
.wel{
padding: 3px;
font-size: 20px;
font-weight: 400;
position: absolute;
}
.around {
  transform: rotateY(360deg);
  transition: all ease 1s;
}
.tocenter_left1 {
left: 3%;
}
.tocenter_left2 {
left: 16%;
}
.tocenter_left3 {
left: 30%;
}
.tocenter_middle {
left: 47%;
}
.tocenter_right3 {
right: 30%;
}
.tocenter_right2 {
right: 16%;
}
.tocenter_right1 {
right: 3%;
}

 

posted @ 2017-11-01 14:45  小蘑菇123  阅读(2401)  评论(0编辑  收藏  举报