要结婚了，做个抽奖程序，但是不知道怎么实现抽奖效果

This topic created in 3864 days ago, the information mentioned may be changed or developed.

已经写好后端，就是差页面效果

想在一堆头像中，随机滚动（高亮）。最后结束时，滚动的速度越来越慢，最后停下来。。请问我该怎么搜关键词？？？

滚动

抽奖

后端

头像

25 replies • 2015-11-11 10:02:41 +08:00

dong3580

Nov 9, 2015

效果，放个 GIF 动画....2333333333

helone

Nov 9, 2015

是动画效果还是逻辑？

滚动的话，首页得有一个图片列表，就是要抽奖的人，一竖排，然后人多*2 或者人少就*3 或者更多，后端直接返回抽奖结果，前端计算下这个图片在哪里，就是距离，然后滚到最后一遍，停在那个人的位置就可以了。

66beta

Nov 9, 2015

我第一想法是 transfom: translateY(**px) 滚动

用 setInterval 间隔重复，中途修改间隔时间与 translateY 的值

harry890829

Nov 9, 2015

@dong3580 放一个 gif 简直 imba

aalska

Nov 9, 2015

为什么不最做一个 swf..

然后逻辑

feiyuanqiu

Nov 9, 2015

不懂前端，有个想法

1 、把头像 ID 扔到个数组里面，不停 shuffle 数组，按照数组重绘排列，总是高亮放大一个固定位置，最后取停下来那个位置的头像

2 、或者按照头像所在位置弄个二维数组，用随机数在二维数组里面跳，最后停在哪就是哪

逐渐变慢这个效果我只知道 setTimeout ，用循环控制动画，不断增大 timeout 值， timeout 到达一个值之后 clearTimeout ，停止循环，得到结果

foru17

Nov 9, 2015

刚好以前做过这种动画效果，大概看了下，给楼主说下思路吧
1.如果要做老虎机那种效果（尤其是最后那么几秒逐渐慢速），请搜索 Slot Game HTML Canvas ，但是轮播的时候用的图片是固定高度的，如果是动态的头像，怕不好弄，但应该有办法解决。
2.动效这块建议 LZ 从简，就别搞 Canvas 了，直接用 CSS3 吧， transfrom 和 animation 组合，一样可以出来很不错的效果，中间可以拿一些占位的头像，最后的中奖头像在最后 100ms 里 fade 进去就好。

fising

Nov 9, 2015

专注抽奖 30 年

ChefIsAwesome

Nov 9, 2015

我尝试过，那东西不好写。
开始抽奖：滚动越来越快，接着匀速滚动
收到后台的结果：算好要停的位置，在现有速度的基础上减速到 0 。

Ellison

Nov 9, 2015

http://runjs.cn/code/9xk5mrc0

Nov 9, 2015

@helone 啊哈，谢谢哈。是想要效果了，计划让结果在前端计算，后端只返回用户列表。

@aalska swf 没接触过诶，我用 tornado 写的后端，前端用 js.

@ChefIsAwesome －。－没有现成的啊，还以为一大把咧。。。。

@foru17 是微信的头像，所以不需要担心。好的，谢谢你的建议，晚上试试。

@feiyuanqiu 嗯，我之前就是第一个思路哦。就是效果不知道怎么整。

@66beta 嗯，就是这个思路。