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%; }
请发表评论