微信小程序卡片动画 for循环

wxml页面：

 1 <view class="container">
 2     <view wx:for="{{info}}" data-index="{{index}}" class="card" id="{{item.id}}" style="position: absolute; left:{{item.left}}rpx; top:{{item.top + index*10}}rpx;display:{{display1}}; z-index:{{100-index}}; opacity:1;" bindtouchstart="viewTouchInside" bindtouchmove="viewDidMove" bindtouchend="viewTouchUpDownInside" animation="{{item.animation}}">
 3         <view style="100%;height:auto;margin-top:13%;"><rich-text nodes="{{item.profile}}"></rich-text></view>
 4     </view>
 5     <view style="height:100rpx;100%;  position: fixed;bottom:100rpx;">
 6         <view class="left-view" bindtap="LastPage" ><image src="/images/left.png"  ></image></view>
 7         <view style="float:left;60%;">
 8         <label class="progress-view">进度{{currentTime}}/{{duration}}</label>
 9          <progress class="progress" percent="{{currentTime/duration * 100}}" color="#F9F9FF" backgroundColor="#943134"></progress></view>
10         <view class="right-view" bindtap="NextPage" ><image src="/images/right.png"  ></image></view>
11     </view>
12 </view>

wxss：

  1 .container {
  2   /* height: 100%; */
  3   overflow: hidden;
  4 
  5 }
  6 
  7 page {
  8   /* height: 100%; */
  9   overflow: hidden;
 10   background-color: black;
 11   background: -moz-linear-gradient(top, #FE7676 0%, #FE4E4E 100%);
 12   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FE4E4E), color-stop(100%, #FE4E4E));
 13   background: -webkit-linear-gradient(top, #FE7676 0%, #FE4E4E 100%);
 14   background: -o-linear-gradient(top, #FE7676 0%, #FE4E4E 100%);
 15   background: -ms-linear-gradient(top, #FE7676 0%, #FE4E4E 100%);
 16   background: linear-gradient(to bottom, #FE7676 0%, #FE4E4E 100%);
 17 }
 18 
 19 .card {
 20   width: 600rpx;
 21   height: 800rpx;
 22   box-sizing: border-box;
 23   background-color: white;
 24   text-align: center;
 25   box-shadow: 2px 2px 8px #aaa;
 26   border-radius: 10rpx;
 27   padding: 0 50rpx;
 28   background-image: url('data:image/png;base64,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');
 29   background-position: bottom;
 30 
 31 }
 32 
 33 .card .name {
 34   font-size: 20px;
 35   font-weight: bolder;
 36   margin: 60rpx 0 20rpx;
 37 }
 38 
 39 .card .location {
 40   font-size: 28rpx;
 41   margin: 30rpx 0 20rpx;
 42   line-height: 40rpx;
 43   text-align: left;
 44   color: #535353;
 45 
 46 }
 47 
 48 .name1 {
 49   font-size: 26rpx;
 50   font-weight: bolder;
 51 }
 52 
 53 .card .like-img {
 54   width: 50%;
 55   height: 45rpx;
 56   margin: 10rpx 0 40rpx;
 57 }
 58 
 59 .school-sign-img {
 60   width: 280rpx;
 61   height: 440rpx;
 62   position: absolute;
 63   left: 320rpx;
 64   top: 360rpx;
 65 }
 66 
 67 .allLikeView {
 68   width: 100rpx;
 69   height: 100rpx;
 70   box-sizing: border-box;
 71   background-color: white;
 72   padding: 30rpx;
 73   box-shadow: 0px 2px 8px #aaa;
 74   border-radius: 50rpx;
 75   margin: 800rpx;
 76 }
 77 
 78 .allLikeView .all-like-img {
 79   width: 40rpx;
 80   height: 40rpx;
 81 }
 82 
 83 .left-view {
 84   float: left;
 85   width: 20%;
 86   text-align: center;
 87   padding-top: 12rpx;
 88 }
 89 
 90 .left-view image {
 91   width: 32px;
 92   height: 32px;
 93 }
 94 
 95 .right-view {
 96   float: right;
 97   width: 20%;
 98   text-align: center;
 99   padding-top: 12rpx;
100 }
101 
102 .right-view image {
103   width: 32px;
104   height: 32px;
105 }
106 
107 .progress-view {
108   color: #ffffff;
109   text-align: center;
110   width: 100%;
111   font-size: 24rpx;
112   display: block;
113   padding-bottom: 12rpx;
114 }

View Code

js：

  1 import util from '../../utils/util.js';
  2 const marginHori = 74
  3 const marginVerti = 100
  4 
  5 Page({
  6 
  7   data: {
  8     course_id: 0,
  9     course_type: 1,
 10     info: [],
 11     currentTime: 0, //当前卡片的索引
 12     duration: 1, //持续时间，卡片总数;
 13 
 14     startX: 0, //滑动开始x轴
 15     startY: 0, //滑动开始y轴
 16 
 17     windowWidth: 0, //屏幕宽度
 18     windowHeight: 0, //屏幕高度
 19 
 20     currentId: 1,
 21   },
 22 
 23   onLoad: function (options) {
 24 
 25     wx.setNavigationBarTitle({
 26       title: '卡片动画',
 27     })
 28     var that = this
 29 
 30     //获取屏幕的宽度和高度
 31     wx.getSystemInfo({
 32       success: function (res) {
 33         that.setData({
 34           windowWidth: res.windowWidth,
 35           windowHeight: res.windowHeight
 36         })
 37       }
 38     });
 39 
 40     var course_id = options.id; //课程id
 41     var course_type = options.type; //课程类型
 42     this.setData({
 43       course_id: parseInt(course_id),
 44       course_type: parseInt(course_type),
 45     });
 46 
 47     //服务接口数据
 48     this.getInfo();
 49 
 50   },
 51   getInfo: function () {
 52     let self = this;
 53     util.request(util.apiUrl + '接口获取数据列表', 'POST', {
 54       course_id: self.data.course_id,
 55       course_type: self.data.course_type,
 56       currentTime: self.data.currentTime,
 57     }).then(res => {
 58       //
 59     }).catch(res => {
 60       var info = res.data.list;
 61 
 62       //获取服务器数据
 63       info.data.forEach((item, index) => {
 64         // info.data[index].animation = animation; //保存动画
 65         info.data[index].left = marginHori //卡片坐标 距左边距离
 66         info.data[index].top = marginVerti //卡片坐标 距上边距离
 67         if ((parseInt(info.currentTime) - 1) > index) { //数组索引index从0开始，所以需要-1
 68           info.data[index].left = 10000; //卡片坐标 距左边距离
 69           info.data[index].top = 10000; //卡片坐标 距上边距离
 70         }
 71       });
 72 
 73       self.setData({ //保存卡片数据
 74         info: info.data
 75       })
 76 
 77       self.setData({
 78         currentTime: info.currentTime,
 79         duration: parseInt(info.duration),
 80       });
 81       console.log(self.data.info);
 82     });
 83   },
 84 
 85   //获取课程进度
 86   getProcess: function () {
 87     let self = this;
 88     util.request(util.apiUrl + '接口', 'POST', {
 89       course_id: self.data.course_id, //当前课程id
 90       current: self.data.currentTime, //已看的索引
 91       duration: self.data.duration, //课程总共的卡片数量
 92       read_id: self.data.currentId, //当前索引
 93     }).then(res => {
 94       //
 95     }).catch(res => {
 96       console.log(res)
 97     });
 98   },
 99 
100   onReady: function () { },
101 
102   onShow: function () { },
103 
104   //手指触摸动作开始
105   viewTouchInside: function (event) {
106 
107     var that = this
108     var index = event.currentTarget.dataset.index; //下标
109     var item = that.data.info[index].animation; //获取每一个的动画
110     var pointX = event.touches[0].clientX
111     var pointY = event.touches[0].clientY
112 
113     that.setData({
114       startX: pointX,
115       startY: pointY,
116       currentId: event.currentTarget.id
117     })
118   },
119 
120   //手指触摸后移动
121   viewDidMove: function (event) {
122 
123     var that = this
124 
125     var pointX = event.touches[0].clientX
126     var pointY = event.touches[0].clientY
127 
128     var widthCenter = that.data.windowWidth / 2
129     var heightCenter = that.data.windowHeight / 2
130 
131     var perX = (pointX - that.data.startX) / widthCenter
132     var perY = (pointY - that.data.startY) / heightCenter
133     var maxPer = (Math.abs(perX) > Math.abs(perY)) ? Math.abs(perX) : Math.abs(perY)
134 
135     var index = event.currentTarget.dataset.index; //下标
136     var item = that.data.info[index].animation; //获取每一个的动画
137 
138     var animationRotate = wx.createAnimation({
139       duration: 100,
140       timingFunction: 'ease-out',
141     })
142     animationRotate.scale(1).rotate(perX * 20).step();
143     var x = marginHori + pointX - that.data.startX
144     var y = marginVerti + pointY - that.data.startY
145 
146     that.data.info[index].left = x,
147       that.data.info[index].top = y,
148       that.data.info[index].animation = animationRotate.export();
149 
150     that.setData({
151       info: that.data.info
152     })
153   },
154 
155   //手指触摸动作结束
156   viewTouchUpDownInside: function (event) {
157 
158     var that = this
159     console.log("that.data.currentId " + that.data.currentId);
160     var endX = event.changedTouches[0].clientX
161     var endY = event.changedTouches[0].clientY
162 
163     var distanceX = endX - that.data.startX
164     var distanceY = endY - that.data.startY
165 
166     var index = event.currentTarget.dataset.index; //下标 这个下标从0开始，所以不需要-1
167     var item = that.data.info[index].animation; //获取每一个的动画
168 
169     if (distanceX > 93.75) {
170       that.removeCard('right', index + 1); //往右移除卡片
171     } else if (distanceX < -93.75) {
172       that.removeCard('left', index + 1); //往左移除卡片
173     } else if (distanceY < -100) {
174       that.removeCard('up', index + 1); //往上移除卡片
175     } else if (distanceY > 100) {
176       that.removeCard('down', index + 1); //往下移除卡片
177     }
178 
179     var animation = wx.createAnimation({
180       duration: 100,
181       timingFunction: 'ease-out',
182     })
183 
184     //移动的范围不大，回到原点
185     if (distanceX < 93.75 && distanceX > -93.75 && distanceY > -150 && distanceY < 150) {
186 
187       that.data.info[index].left = marginHori;
188       that.data.info[index].top = marginVerti;
189       that.setData({
190         info: that.data.info
191       })
192       animation.scale(1).step();
193       that.data.info[index].animation = animation.export();
194       that.setData({ //保存动画内容并渲染到页面
195         info: that.data.info
196       })
197     }
198 
199   },
200 
201   //移除卡片
202   removeCard: function (direction, index) {
203 
204     console.log('removeCard', direction);
205     var that = this
206 
207     var animation = wx.createAnimation({
208       duration: 250,
209       timingFunction: 'linear',
210     })
211 
212     if (direction == 'right') { //往右滑动
213       animation.translateX(400).rotate(10).opacity(0).step()
214       animation.translateX(0).rotate(0).step()
215     } else if (direction == 'left') { //往左滑动
216       animation.translateX(-400).rotate(-45).opacity(0).step()
217       animation.translateX(0).rotate(0).step()
218     } else if (direction == 'up') { //往上滑动
219       animation.translateY(-400).opacity(0).step()
220       animation.translateY(0).step()
221     } else if (direction == 'down') { //往下滑动
222       animation.translateY(-60).opacity(0).step()
223       animation.translateY(0).opacity(1).rotate(0).step()
224     }
225 
226 
227     if (direction == 'down') { //下拉
228 
229       //index有可能为1
230       if (index > 1) {
231         that.data.info[index - 1 - 1].animation = animation.export(); //下一页，即将移除的卡片动画
232       }
233       that.setData({
234         info: that.data.info,
235       })
236       //数组索引从0开始，所以-1，把上一页数据显示出来，所以-1
237 
238       if (index > 1) {
239         that.data.info[index - 1 - 1].top = marginVerti;
240         that.data.info[index - 1 - 1].left = marginHori;
241       }
242       that.data.info[index - 1].top = marginVerti;
243       that.data.info[index - 1].left = marginHori;
244       index = index == 1 ? 1 : index - 1;
245       setTimeout(function () {
246         that.setData({
247           info: that.data.info,
248           currentTime: index
249         })
250       }.bind(that), 250);
251     } else {
252 
253       that.data.info[index - 1].animation = animation.export(); //下一页，即将移除的卡片动画
254       //开始执行动画
255       that.setData({
256         info: that.data.info
257       });
258 
259       that.data.info[index - 1].top = 10000;
260       that.data.info[index - 1].left = 10000;
261 
262 
263       setTimeout(function () {
264         that.setData({
265           info: that.data.info,
266         })
267       }.bind(that), 250);
268 
269       console.log("index=" + (index + 1));
270       that.setData({
271         currentTime: index + 1
272       });
273 
274       that.getProcess();
275       if ((parseInt(that.data.currentTime)) > that.data.duration) {
276         wx.redirectTo({
277           url: '../result/index',
278         })
279       }
280     }
281   },
282 
283   //左箭头 上一张卡片
284   LastPage: function () {
285     var that = this;
286     console.log("that.data.currentTime" + that.data.currentTime);
287     //测试使用
288     // that.setData({
289     //   currentTime: 1,
290     // });
291     // that.getProcess();
292     if (that.data.currentTime == 1) { //当前是第一页 返回
293       return;
294     }
295     that.data.info.forEach((item, i) => {
296       that.data.info[i].animation = ''; //清除之前的卡片动画
297     });
298 
299     //核心动画
300     var animation = wx.createAnimation({
301       duration: 250,
302       timingFunction: 'linear',
303     })
304     animation.translateY(-60).opacity(0).step();
305     animation.translateY(0).opacity(1).rotate(0).step();
306 
307     //数组索引从0开始，所以-1，把上一页数据显示出来，所以-1
308     that.data.info[that.data.currentTime - 1 - 1].animation = animation.export(); //保存动画到数组
309 
310     that.setData({
311       info: that.data.info
312     })
313 
314     that.data.info[that.data.currentTime - 1 - 1].top = marginVerti; //上一页，恢复到原始的距顶部距离
315     that.data.info[that.data.currentTime - 1 - 1].left = marginHori; //上一页，恢复到原始的距左部距离
316     setTimeout(function () {
317       that.setData({
318         info: that.data.info
319       })
320     }.bind(that), 250);
321 
322     that.setData({
323       currentTime: that.data.currentTime - 1,
324       currentId: that.data.currentId - 1
325     })
326 
327     that.getProcess(); //服务器接口保存卡片浏览当前页码
328 
329   },
330 
331   //右箭头 下一张卡片
332   NextPage: function () {
333 
334     var that = this;
335     //console.log('lastpage=that.data.currentTime=' + that.data.currentTime);
336     var currentTime = parseInt(that.data.currentTime);
337     if (currentTime >= that.data.duration) {
338       wx.redirectTo({
339         url: '../result/index',
340       })
341     }
342     that.removeCard('right', currentTime); //往右移除卡片
343 
344   }
345 })

微信小程序 卡片动画 for循环

微信小程序卡片动画 for循环