浏览代码

修改分享海报上滑、下滑动画

xyg 3 年之前
父节点
当前提交
15b5848835

+ 26 - 15
light-application-wx/pages/meeting-cover/meeting-cover.js

@@ -132,21 +132,27 @@ Page({
                 that.setData({
                     moveFlag: false,
                 });
-                if (!that.data.showPart1 && that.data.showPart2) {
+                if (that.data.showPart1 && that.data.showPart2) {
                     let ani = wx.createAnimation({
                         delay: 0,
                         duration: 1000,
                     });
-                    ani.opacity(0.5).step();
-                    that.setData({
-                        showPart1: true,
-                        showPart2: false,
-                        ani: ani.export()
+                    let ani2 = wx.createAnimation({
+                        delay: 0,
+                        duration: 1000,
                     });
-                    ani.opacity(1).step();
+                    ani.translateY(0).step();
+                    ani2.translateY(0).step();
                     that.setData({
-                        ani: ani.export()
+                        ani: ani.export(),
+                        ani2: ani2.export(),
                     });
+                    setTimeout(() => {
+                        that.setData({
+                            showPart1: true,
+                            showPart2: false,
+                        });
+                    }, 1100);
                 }
             }
             // 上滑
@@ -156,19 +162,24 @@ Page({
                     moveFlag: false,
                 });
                 if (that.data.showPart1 && !that.data.showPart2) {
+                    that.setData({
+                        showPart2: true,
+                    });
                     let ani = wx.createAnimation({
                         delay: 0,
                         duration: 1000,
                     });
-                    ani.opacity(0.5).step();
-                    that.setData({
-                        showPart1: false,
-                        showPart2: true,
-                        ani: ani.export()
+                    let ani2 = wx.createAnimation({
+                        delay: 0,
+                        duration: 1000,
                     });
-                    ani.opacity(1).step();
+                    let windowInfo = wx.getWindowInfo();
+                    // console.info(windowInfo.screenHeight);
+                    ani.translateY(-windowInfo.screenHeight).step();
+                    ani2.translateY(-windowInfo.screenHeight).step();
                     that.setData({
-                        ani: ani.export()
+                        ani: ani.export(),
+                        ani2: ani2.export(),
                     });
                 }
             }

+ 1 - 1
light-application-wx/pages/meeting-cover/meeting-cover.wxml

@@ -22,7 +22,7 @@
     </view>
 </view>
 
-<view class="container" style="background-image: url({{imgPath}}/meeting-arrangement-bg.png);" wx:if="{{showPart2}}" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" animation="{{ani}}">
+<view class="container" style="background-image: url({{imgPath}}/meeting-arrangement-bg.png);" wx:if="{{showPart2}}" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" animation="{{ani2}}">
     <view class="agenda-title">{{title}}</view>
     <view class="english-name">Agenda arrangement</view>
     <view class="agenda-name">议程安排</view>