微信小程序 卡片动画 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="width:100%;height:auto;margin-top:13%;"><rich-text nodes="{{item.profile}}"></rich-text></view> 4 </view> 5 <view style="height:100rpx;width:100%; position: fixed;bottom:100rpx;"> 6 <view class="left-view" bindtap="LastPage" ><image src="/images/left.png" ></image></view> 7 <view style="float:left;width: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 }
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 })
