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

[P9]

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

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

[dong3580]

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

[helone]

是动画效果还是逻辑？

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

[66beta]

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

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

[harry890829]

@dong3580 放一个 gif 简直 imba

[aalska]

为什么不最做一个 swf..

然后逻辑

[feiyuanqiu]

不懂前端，有个想法

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

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

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

[foru17]

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

[fising]

专注抽奖 30 年

[ChefIsAwesome]

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

[Ellison]

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

[P9]

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

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


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

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

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

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

[P9]

@Ellison 棒棒棒！

[virusdefender]

http://chaitin.github.io/duty.html/

这个很棒~虽然不太符合你说的样式

[chizhong]

表单大师什么的有这种应用场景，还有很多 html5 海报的应用，可以借用一下，不必自己做

[bk201]

这个不应该把鲜花扔出去吗，搞得像年会一样干嘛。

[kidult]

我只想说婚礼抽奖不都是内定的么

[loryyang]

不会前端，不过建议数字一个一个的滚动，就和 777 一样的方式，不要直接一下子跳出结果来，这样更加有感觉

[Kilerd]

终于我的小轮子可以派上用场了
https://github.com/Kilerd/LotteryMachine

[Kilerd]

@virusdefender 看了下，狗眼快瞎了，不过效果真的很炫酷

[loading]

用来抽是和谁结婚吗？

[msg7086]

说真的。如果你自己结婚的话，这种东西还是外包给别人吧。
结婚的时候自己都忙成狗了，还有时间给你去 Debug 这种东西么……

[heiybb]

@msg7086 +1 快结婚了却想着专注抽奖 30 年…不会被未来老婆吊起来打么…

[rundis]

我觉得纯前端实现容易些吧

[Ouyangan]

@Kilerd 6666

[P9]

@msg7086 把婚庆的都外包出去了

@loading 哈哈哈，万一是个男的



@Kilerd 先试试，哈哈哈！
@kidult －。 － 内定也可以的啊
@virusdefender 哈哈哈，谢谢！ 其实样式不固定，适合就好。

@bk201 乡下地方没人见过这些。