├── .DS_Store
├── LICENSE
├── README.md
├── src
    ├── .DS_Store
    └── hello.vue
└── weex-tantan.gif


/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ezshine/weex-tindereffect/e7d92390bb73f7965d62813c89191103eeec7019/.DS_Store


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 ezshine
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # weex-tindereffect
 2 | based on weex to make card stack and drag effect  
 3 | ![weex-tindereffect](weex-tantan.gif)  
 4 | 其实是一个挺简单的效果，各种框架下都有类似的源码。但由于weex内没有z-index等，所以实现起来还是挺麻烦的。    
 5 | 真机效果很流畅，大家可尽情使用。
 6 | 
 7 | 		1、完全基于pan事件实现，实现了手滑方向的判定，以及扔出的判定。
 8 | 		2、计算了拖动的加速度，clone的朋友们可以改变animation里的duration寻找更合适的缓冲效果。
 9 | 		3、三卡片层叠，可重用。卡片的内容在交换时可更新下一张卡的内容，有注释。
10 | 
11 | thanks for eros , the best solution to build iOS/Android apps.


--------------------------------------------------------------------------------
/src/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ezshine/weex-tindereffect/e7d92390bb73f7965d62813c89191103eeec7019/src/.DS_Store


--------------------------------------------------------------------------------
/src/hello.vue:
--------------------------------------------------------------------------------
  1 | <!--  竞选首页  -->
  2 | <template>
  3 |     <div class="wrapper">
  4 | 		<div class="slider">
  5 | 			<div class="sliderlist" ref="card3" style="position:absolute;" :style="card3TransformStyle">
  6 | 				<div class="Player_image" >
  7 | 				
  8 | 				</div>
  9 | 			</div>
 10 | 			<div class="sliderlist" ref="card2" style="position:absolute;" :style="card2TransformStyle">
 11 | 				<div class="Player_image" >
 12 | 				
 13 | 				</div>
 14 | 			</div>
 15 | 			<div class="sliderlist" ref="card" style="position:absolute;"  :style="card1TransformStyle" @click="clickCard(item)" @panstart="onpanstart" @panmove="onpanmove" @panend="onpanend">
 16 | 				<div class="Player_image" >
 17 | 
 18 | 				</div>
 19 | 			</div>
 20 | 		</div>
 21 |     </div>
 22 | </template>
 23 | 
 24 | <script>
 25 | 
 26 |     export default {
 27 |         data () {
 28 |             return {
 29 |                 item:{},
 30 |                 item2:{},
 31 |                 item3:{},
 32 |                 index: 0,
 33 |                 
 34 |                 ElectionList: [],
 35 |                 cardOriginX:0,
 36 |                 cardOriginY:0,
 37 |                 moveX:0,
 38 |                 moveY:0,
 39 |                 touchDownX:0,
 40 |                 touchDownY:0,
 41 |                 touchDownTime:0,
 42 |                 card1TransformStyle:{
 43 |                     transform:"translate(0,0)",
 44 |                     transformOrigin: 'center center'
 45 |                 },
 46 |                 card2TransformStyle:{
 47 |                     transform:"scale(.9,.9) translate(0,60)",
 48 |                     transformOrigin: 'center center'
 49 |                 },
 50 |                 card3TransformStyle:{
 51 |                     transform:"scale(.8,.8) translate(0,120)",
 52 |                     transformOrigin: 'center center'
 53 |                 },
 54 |                 inAnimation:false,
 55 | 				screenHeight:0
 56 |             }
 57 |         },
 58 |         mounted () {
 59 |             var that=this;
 60 |             that.screenHeight=weex.config.eros.deviceHeight/(weex.config.eros.scale/2);
 61 |             this.cardOriginX=this.moveX=this.moveY=0;
 62 |             this.cardOriginY=(that.screenHeight-1334)/2;
 63 |         },
 64 |         methods: {
 65 | 			clickCard:function(item){
 66 | 
 67 | 			},
 68 |             onpanstart:function(e) {
 69 |                 if(this.inAnimation)return;
 70 |          		// console.log(e);
 71 |                  this.touchDownX=e.changedTouches[0].pageX;
 72 |                  this.touchDownY=e.changedTouches[0].pageY;
 73 |                  this.touchDownTime=new Date().getTime();
 74 | 			},
 75 | 			onpanmove:function(e){
 76 |                 if(this.inAnimation||this.touchDownTime<=0)return;
 77 | 				// this.moveX=JSON.stringify(e);
 78 | 				this.moveX=e.changedTouches[0].pageX-this.touchDownX;
 79 | 				this.moveY=e.changedTouches[0].pageY-this.touchDownY;
 80 | 
 81 |                 this.card1TransformStyle={transform:"translate("+this.moveX+","+this.moveY+")"};
 82 |                 
 83 |                 var distance=this.getDistance(e.changedTouches[0].pageX,e.changedTouches[0].pageY,this.touchDownX,this.touchDownY);
 84 |                 // this.search_text=distance;
 85 |                 var scale=0.9+distance/10000;
 86 |                 if(scale>1){
 87 |                     scale=1;
 88 |                 }
 89 |                 // this.card2TransformStyle={transform:"scale("+scale+","+scale+")",top:120*(1-distance/1000)};
 90 | 			},
 91 | 			onpanend:function(e){
 92 |                 if(this.inAnimation||this.touchDownTime<=0)return;
 93 | 
 94 |                 this.moveX=e.changedTouches[0].pageX-this.startX;
 95 | 				this.moveY=e.changedTouches[0].pageY-this.startY;
 96 | 
 97 |                 // common.showToast(this.moveX);
 98 |                 var distance=this.getDistance(e.changedTouches[0].pageX,e.changedTouches[0].pageY,this.touchDownX,this.touchDownY);
 99 | 
100 |                 var velocity=distance/(new Date().getTime()-this.touchDownTime);
101 |                 this.touchDownTime=0;
102 |                 // this.search_text=velocity;
103 | 
104 |                 if(velocity<=1.5&&distance<320)this.backCardToOrigin();
105 |                 else{
106 |                     var angle=Math.atan2(e.changedTouches[0].pageY-this.touchDownY, e.changedTouches[0].pageX-this.touchDownX)/(3.14159/180);
107 | 	                var direction={x:Math.cos(angle * (3.14159/180)),y:Math.sin(angle * (3.14159/180))};
108 | 
109 |                     this.throwCard(direction);
110 |                 }
111 | 			},
112 |             getDistance:function(x1, y1, x2, y2) {
113 |                 var _x = Math.abs(x1 - x2);       
114 |                 var _y = Math.abs(y1 - y2);       
115 |                 return Math.sqrt(_x * _x + _y * _y);   
116 |             },
117 |             throwCard:function(direction){
118 |                 var that=this;
119 |                 var card = this.$refs.card;
120 |                 var  animation = weex.requireModule('animation');
121 |                 this.inAnimation=true;
122 |                 animation.transition(card, {
123 |                     styles: {
124 |                         transform: 'translate('+(direction.x*2000)+', '+(direction.y*1500)+')',
125 |                         transformOrigin: 'center center',
126 |                         opacity:0,
127 |                     },
128 |                     duration: 300, //ms
129 |                     timingFunction: 'ease',
130 |                     needLayout:false,
131 |                     delay: 0 //ms
132 |                 }, 
133 |                 function () {
134 |                     
135 |                 });
136 | 
137 |                 var card2 = this.$refs.card2;
138 |                 var animation2 = weex.requireModule('animation');
139 |                 animation2.transition(card2, {
140 |                     styles: {
141 |                         transform: 'scale(1,1) translate(0,0)',
142 |                         transformOrigin: 'center center'
143 |                     },
144 |                     duration: 150, //ms
145 |                     timingFunction: 'ease',
146 |                     needLayout:false,
147 |                     delay: 0 //ms
148 |                     }, function () {
149 |                     });
150 | 
151 |                 var card3 = this.$refs.card3;
152 |                 var animation3 = weex.requireModule('animation');
153 |                 animation3.transition(card3, {
154 |                     styles: {
155 |                         transform: 'scale(.9,.9) translate(0,60)',
156 |                         transformOrigin: 'center center'
157 |                     },
158 |                     duration: 300, //ms
159 |                     timingFunction: 'ease',
160 |                     needLayout:false,
161 |                     delay: 0 //ms
162 |                     }, function () {
163 |                         that.inAnimation=false;
164 |                         that.resetAllPostion();
165 |                     });
166 |             },
167 |             resetAllPostion:function(){
168 |                 var that=this;
169 |                 // this.$router.refresh();
170 |                 var item=JSON.parse(JSON.stringify(this.item));
171 |                 //将卡片的内容对调
172 | 				this.item=JSON.parse(JSON.stringify(this.item2));
173 |                 
174 |                 that.card1TransformStyle={
175 |                         transform:"translate(0,0)",
176 |                         transformOrigin: 'center center',
177 |                         opacity:1
178 |                     }
179 | 
180 |                     that.inAnimation=true;
181 | 
182 |                     setTimeout(do23Animation,100);
183 | 
184 |                 function do23Animation(){
185 |                     that.cardOriginX=0;
186 |                 that.moveX=0;
187 |                 that.cardOriginY=(that.screenHeight-1334)/2;
188 |                 that.moveY=0;
189 | 
190 |                 that.touchDownX=0;
191 |                 that.touchDownY=0;
192 | 
193 | 				//更新下一张卡片的内容
194 |                 //that.item2=item;
195 | 
196 |                         var card = that.$refs.card;
197 |                 var  animation = weex.requireModule('animation');
198 |                 that.inAnimation=true;
199 |                 animation.transition(card, {
200 |                     styles: {
201 |                         transform:"translate(0,0)",
202 |                         transformOrigin: 'center center',
203 |                         opacity:1
204 |                     },
205 |                     duration: 300, //ms
206 |                     timingFunction: 'ease',
207 |                     needLayout:false,
208 |                     // delay: 0 //ms
209 |                     }, function () {
210 |                         that.inAnimation=false;
211 |                     });
212 | 
213 |                     var card2 = that.$refs.card2;
214 |                 var  animation2 = weex.requireModule('animation');
215 | 
216 |                 animation2.transition(card2, {
217 |                     styles: {
218 |                         transform:"scale(.9,.9) translate(0,60)",
219 |                         transformOrigin: 'center center',
220 |                     },
221 |                     duration: 150, //ms
222 |                     timingFunction: 'ease',
223 |                     needLayout:false,
224 |                     delay: 0 //ms
225 |                     }, function () {
226 |                     });
227 | 
228 |                     var card3 = that.$refs.card3;
229 |                 var  animation3 = weex.requireModule('animation');
230 |                 animation3.transition(card3, {
231 |                     styles: {
232 |                         transform:"scale(.8,.8) translate(0,120)",
233 |                         transformOrigin: 'center center',
234 |                     },
235 |                     duration: 300, //ms
236 |                     timingFunction: 'ease',
237 |                     needLayout:false,
238 |                     delay: 0 //ms
239 |                     }, function () {
240 |                         
241 |                     });
242 |                 }
243 |             },
244 |             backCardToOrigin:function(){
245 |                 var that=this;
246 |                 var card = this.$refs.card;
247 |                 var  animation = weex.requireModule('animation');
248 |                 this.inAnimation=true;
249 |                 animation.transition(card, {
250 |                     styles: {
251 |                         transform: 'translate(0,0)',
252 |                         transformOrigin: 'center center'
253 |                     },
254 |                     duration: 300, //ms
255 |                     timingFunction: 'ease',
256 |                     needLayout:false,
257 |                     // delay: 0 //ms
258 |                     }, function () {
259 |                         that.inAnimation=false;
260 |                     });
261 |             }
262 |         }
263 |     }
264 | </script>
265 | <style scoped>
266 |     .slider{
267 |         width: 750px;
268 | 		height:1334px;
269 | 		background-color: #f2f2f2;
270 |     }
271 |     .sliderlist{
272 |         width: 650px;
273 | 		height:750px;
274 | 		margin-left: 50px;
275 | 		margin-top: 200px;
276 | 		background-color:#fff;
277 | 		box-shadow: 0 0 30px 0 rgba(36,54,79,0.20);
278 |         /*position: relative;*/
279 |     }
280 |     
281 |     .Player_image{
282 |         width: 580px;
283 |         margin-top: 70px;
284 |         margin-left: 80px;
285 |         margin-right: 80px;
286 |         box-shadow: 0 0 30px 0 rgba(36,54,79,0.20);
287 |         align-items: center;
288 |         background-color: white;
289 |         /*height: 770px;*/
290 |         position: absolute;
291 |         top: 0;
292 |         transition: 1s all;
293 |     }
294 |     .Player_image_one{
295 |         width: 440px;
296 |         height: 440px;
297 |         margin-top: 80px;
298 |     }
299 |     .Player_image_two{
300 |         width: 60px;
301 |         height: 60px;
302 |         /*margin-top: 102px;*/
303 |         /*margin-top: 162px;*/
304 |     }
305 |     .Player{
306 |         width: 580px;
307 |         margin-top: 70px;
308 |         margin-left: 80px;
309 |         margin-right: 80px;
310 |         margin-bottom: 50px;
311 |         box-shadow: 0 0 30px 0 rgba(36,54,79,0.20);
312 |         transition: 1s all;
313 |     }
314 |     .Player_top{
315 |         height: 314px;
316 |         background-color: #24364f;
317 |     }
318 |     .Player_top_div_one{
319 |         margin-top: 40px;
320 |         margin-left: 40px;
321 |         margin-right: 40px;
322 |         margin-bottom: 30px;
323 |         flex-direction: row;
324 |     }
325 |     .Player_top_div_avatar{
326 |         width: 120px;
327 |         height: 120px;
328 |         border-radius: 100px;
329 |         overflow: hidden;
330 |         border-style: solid;
331 |         border-color: white;
332 |         border-width: 4px;
333 |         box-sizing: border-box;
334 |     }
335 |     .Player_top_div_two{
336 |         margin-left: 30px;
337 |     }
338 |     .Player_top_div_text_one{
339 |         font-size: 34px;
340 |         color: #FFFFFF;
341 |         font-weight: bold;
342 |         margin-top: 10px;
343 |     }
344 |     .Player_top_div_text_two{
345 |         font-size: 28px;
346 |         color: #FFFFFF;
347 |         margin-top: 20px;
348 |     }
349 |     .Player_top_div_one_text{
350 |         padding-top:5px;
351 |         padding-bottom:5px;
352 |         font-size: 30px;
353 |         color: #FFFFFF;
354 |         margin-left:40px;
355 |         margin-right: 40px;
356 |     }
357 |     .Player_bottom_div{
358 |         height:80px;
359 |         flex-direction: row;
360 |         align-items: center;
361 |         padding-left:40px;
362 |         padding-right:40px;
363 |         justify-content: space-between;
364 |         background-color: white;
365 |     }
366 |     .Player_bottom
367 |     {
368 | pointer-events: none;
369 | background-color:#ffffff;
370 |     }
371 |     .Player_bottom_div_bottom{
372 |         flex-direction: row;
373 |         padding-left:40px;
374 |         padding-right:40px;
375 |         padding-top: 24px;
376 |         padding-bottom:40px;
377 |         height: 100px;
378 |         justify-content: space-between;
379 |         background-color: white;
380 |     }
381 |     .active{
382 |         background-color: #F6F6F6;
383 |     }
384 |     .Player_bottom_div_text{
385 |         font-size: 24px;
386 |         color: #24364F;
387 |         text-align: right;
388 |     }
389 |     .Player_bottom_div_text2
390 |     {
391 |         font-size: 24px;
392 |         color: #24364F;
393 |         text-align: right;
394 |         height:100px;
395 |     }
396 |     .Player_bottom_div_bottom_div{
397 |         width: 360px;
398 |     }
399 |     .nolist{
400 |         width: 750px;
401 |         flex-direction: column;
402 |         align-items: center;
403 |     }
404 |     .nolist_image{
405 |         width: 400px;
406 |         height: 400px;
407 |         margin-top: 60px;
408 |     }
409 |     .nolist_text{
410 |         font-size: 34px;
411 |         color: #24364F;
412 |     }
413 | </style>
414 | 


--------------------------------------------------------------------------------
/weex-tantan.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ezshine/weex-tindereffect/e7d92390bb73f7965d62813c89191103eeec7019/weex-tantan.gif


--------------------------------------------------------------------------------