起因：

公司每个月都要做推广活动，很多推广活动都需要抽奖，但是以前的抽奖的特效太简单，于是美工看到京东的年会抽奖机，我就不得不走向逆向仿制的道路上，经过三天的攻克，终于实现了抽奖效果。



分析：

水果抽奖机的动画效果是三个轮播图进行滚动到指定的位置。虽然是三个，但是只要破解一个，将其他动画依次延迟执行就可以了。 

    分析其中的一个轮播动画，就会发现就是我们平常写的轮播图，只不多这个轮播可以自己进行轮播，并且由快到慢，是一个减速运动，最后停止到指定的轮播图中。 

    本来想用swiper.js进行轮播的实现，但是swiper在loop模式和freeMode模式下有bug，不得不自力更生。 

    轮播很简单，无非是通过定时器不断的改变的位置,但是要注意要把第一张图片复制为最后一张图，这是为了让轮播更流畅，否则轮播的就会显得很尴尬，具体原理类似于摄影的视觉停留。但是使用setTimeout和setInterval定时器可以达到效果，但是W3C中推出了requestAnimateFrame这样更优秀的浏览器的定时效果。具体用法自定百度。 

    轮播解决以后要解决轮播的速度，推荐看一下tween.js的源码，或者其他人的分析，我这里使用的linear,就是匀速运动，之所以不适用easeInOut使用为它只针对一次轮播，会发现这样的轮播效果 —快平慢–快平慢—快平慢—…..,所以只能自己控制速度。怎沫控制速度哪？先看我的linear函数：



linear: function(t, b, c, d) {
    /*
    *tween是ImagesLoop的原型属性，表示图片容器运动曲线函数
    *@param  number t       当前的时间
    *@param  number b       当前的初始值
    *@param  number c       当前的改变的值
    *@param  number d       当前的改变值所用的时间
    *@return object object  运动曲线函数组合成的对象
    */
    return t*(c/d)+b;
}

其实公式很简单就是（时间*速度+初始值=当前的位置），而速度就是（改变的距离/所需的时间）。具体到这次的轮播就是（改变的距离=显示最后一张图片是top的值，而所需时间就是自定义时间段），所以我们可以改变自定义的时间段达到改变速度的目的。整体时间曲线是先加速到平缓再到减速，为了达到这个效果，我们制定轮播15次,时间段为500，前5次时间段每次*0.8,中间5次不变，最后5次*1.8。例如：



easeInOut: function(count = 0, duration = 10) {
        /*
        *easeInOut方法通过控制完成每次轮播的时间来控制轮播的速度
        *@param  number defalutCount        默认轮播的次数
        *@param  number count               当前轮播的次数
        */
        let percent = parseInt(this.DEFALUT_COUNT / 3);

        if (count == (this.DEFALUT_COUNT - 1)) {
            this.slideToIndex();
            return duration;
        }
        if (count < percent) {
            return duration * 0.9;
        } else if (count < (2 * percent)) {
            return duration;
        } else if (count < this.DEFALUT_COUNT) {
            return duration * 1.5;
        }
    }

最后要解决的问题是，滚动到指定位置。例如滚动到第5张图，意味着轮播容器最后top等于前4张高度之和乘以-1加上‘px’。因为我的每次的初始值是从0开始的（top=0）,所以最后一次轮播我将top值调整到我的指定图片所需的top值。 

结论：顺利完成水果机。 

代码：



function ImagesLoop(obj) {
        if (!this.empty(obj) 
            || !this.empty(obj.slideObjs) 
            || !this.empty(obj.slideWrap)) {
            return ;
        }
        this.interval    = obj.interval  || 200;
        this.slideObjs   = obj.slideObjs || {};
        this.slideWrap   = obj.slideWrap || {};
        this.DEFALUT_COUNT   = obj.defaultCount || 15;
        this.slideObjNum = this.slideObjs.length;
        this.totalHeight = this.getTotalHeight(this.slideObjs.slice(0,(this.slideObjs.length - 2)));
        this.index = obj.index || 3;
        this.stopAnimate = false;
        this.print('ImagesLoop', {
            slideObjs:this.slideObjs, 
            slideWrap:this.slideWrap,
            totalHeight:this.totalHeight
        });
    }
ImagesLoop.prototype = {
        empty: function(param) {   //检测参数是否为空
            if (!param) {
                throw new Error(param + 'Parameters can\'t empty!');
                return false;
            }
            return true;
        },
        getTotalHeight: function(slideObjs = []) {  //获取所有slide对象的所有高度的总和
            let totalHeight = 0;
            slideObjs.forEach((item) => {
                totalHeight += item.height;
            });
            return totalHeight;
        },
        print: function(fnName = 'fn', obj = {}) {  //打印所有的参数
            console.group(fnName);
            Object.keys(obj).forEach((key) => {
              console.log(key, obj[key]);
            });
            console.groupEnd('end'+fnName);
        },
        linear: function(t, b, c, d) {
            /*
            *tween是ImagesLoop的原型属性，表示图片容器运动曲线函数
            *@param  number t       当前的时间
            *@param  number b       当前的初始值
            *@param  number c       当前的改变的值
            *@param  number d       当前的改变值所用的时间
            *@return object object  运动曲线函数组合成的对象
            */
            return t*(c/d)+b;
        },
        compatibleRequestAnimationFrame: function() {
            /*
            *compatibleRequestAnimationFrame方法通过对requestAnimationFrame进行兼容性处理
            */
            if (!window.requestAnimationFrame) {
                requestAnimationFrame = function(fn) {
                    setTimeout(fn, 17);
                };    
            }
            if(!window.requestAnimationFrame){
                let lastTime = 0;
                window.requestAnimationFrame = function(callback){
                    let currTime = new Date().getTime();
                    let timeToCall = Math.max(0,16.7-(currTime - lastTime));
                    let timer = window.setTimeout(function(){
                        callback(currTime + timeToCall);
                    },timeToCall);
                    lastTime = currTime + timeToCall;
                    return timer;
                }
            }
            if (!window.cancelAnimationFrame) {
                window.cancelAnimationFrame = function(timer) {
                    clearTimeout(timer);
                };
            }

            window.requestAnimationFrame = window.requestAnimationFrame 
                                          || window.mozRequestAnimationFrame 
                                          || window.webkitRequestAnimationFrame 
                                          || window.msRequestAnimationFrame
                                          || window.oRequestAnimationFrame;
            window.cancelAnimationFrame = window.cancelAnimationFrame
                                          || window.mozCancelAnimationFrame;
        },
        slideToIndex: function() {
            /*
            *slideToIndex方法指定轮播滑动到指定的图片
            *@param  void
            *@return void
            */
            let _slideObjs = this.slideObjs.slice(0, this.index);
            this.totalHeight = this.getTotalHeight(_slideObjs);
            this.stopAnimate = true;
        },
        animate: function() {
            /*
            *animate方法执行轮播的动画
            *@param  void
            *@return void
            */
            let _self = this,
                timer = null;
            this.compatibleRequestAnimationFrame();
            cancelAnimationFrame(timer);
            let duration = 400,
                startTime = new Date().getTime(),
                count = 0,
                position = 0,
                lastSlideObjHeight = _self.slideObjs[(_self.slideObjs.length - 1)].height;
            timer = requestAnimationFrame(function fn(timestamp) {
                let currentTime = new Date().getTime(),
                    currentDuration = currentTime - startTime;
                if (currentDuration >= duration) {
                    position = position - _self.totalHeight;
                    if (_self.stopAnimate) {
                        position = _self.totalHeight;
                    }
                    startTime = currentTime;
                    ++count;
                    duration = _self.easeInOut(count, duration);
                } else {
                    position = _self.linear(currentDuration, 0, _self.totalHeight, duration);
                }
                if (count >= _self.DEFALUT_COUNT) {
                    _self.slideWrap.style.top = -1 * _self.totalHeight + 'px';
                    cancelAnimationFrame(timer);
                    timer = null;
                    return;
                }
                _self.slideWrap.style.top = -1 * position + 'px';
                timer = requestAnimationFrame(fn);
            });
        },
        easeInOut: function(count = 0, duration = 10) {
            /*
            *easeInOut方法通过控制完成每次轮播的时间来控制轮播的速度
            *@param  number defalutCount        默认轮播的次数
            *@param  number count               当前轮播的次数
            */
            let percent = parseInt(this.DEFALUT_COUNT / 3);

            if (count == (this.DEFALUT_COUNT - 1)) {
                this.slideToIndex();
                return duration;
            }
            if (count < percent) {
                return duration * 0.9;
            } else if (count < (2 * percent)) {
                return duration;
            } else if (count < this.DEFALUT_COUNT) {
                return duration * 1.5;
            }
        },
        init: function() {
            /*
            *init方法用于当做启动动画
            *@param  void
            *@return void
            */
            this.animate();
        }
    }

vue代码：

export default {
        data() {
            return {
                images: [],
                loopSlideObjs: [],
                loopContainer: {},
                loopWrapObjs: [],
                animateStyle: {},
                cssRule: {},
                loopWrapNums: 3
            }
        },
        created() {
            this.init();
        },
        mounted() {
            this.initDomData();
        },
        methods: {
            init() {
                this.initData();
            },
            initData() {  //舒适化静态数据和对象
                this.initImagesData();
            },
            initImagesData() {  //初始化图片数据
                this.images = [
                    {'src': '../../static/imgs/waterfull/hy1.jpeg'},
                    {'src': '../../static/imgs/waterfull/hy2.jpg'},
                    {'src': '../../static/imgs/waterfull/hy3.jpg'},
                    {'src': '../../static/imgs/waterfull/hy4.jpg'},
                    {'src': '../../static/imgs/waterfull/hy5.jpg'},
                    {'src': '../../static/imgs/waterfull/hy6.jpg'},
                    {'src': '../../static/imgs/waterfull/hy7.jpg'},
                    {'src': '../../static/imgs/waterfull/hy8.jpg'},
                    {'src': '../../static/imgs/waterfull/hy9.jpg'},
                    {'src': '../../static/imgs/waterfull/hy10.jpg'},
                    {'src': '../../static/imgs/waterfull/hy1.jpeg'}
                ];
            },
            initDomData() {  //初始化dom数据
                this.initSlidesDomData();
                this.initLoopImagesAnimate(0);
                this.compatibleRequestAnimationFrame();
            },
            initSlidesDomData() {  //初始化轮播的每个slide的dom数据
                let liObjs = document.querySelectorAll('.loop-container .loop-wrap.loop-wrap0 .loop-slide') || this.$refs.loopSlides;
                this.loopWrapObjs = document.querySelectorAll('.loop-container .loop-wrap') || this.$refs.loopWrap;
                let obj     = {},
                    item    = {};
                this.loopContainer.totalHeight = 0;
                for (let i = 0, len = liObjs.length; i < len; i++) {
                    item = liObjs[i];
                    obj.index = i;
                    obj.height = item.offsetHeight;
                    this.loopContainer.totalHeight += obj.height;
                    this.loopSlideObjs.push(obj);
                    obj = {};
                    item = {};
                }
                this.print('initDomData', {
                    liObjs: liObjs,
                    loopWrapObjs:this.loopWrapObjs,
                    loopSlideObjs: this.thisloopSlideObjs,
                    loopContainer: this.loopContainer
                });
                obj     = null;
                item    = null;
                liObjs  = null;
            },
            initLoopImagesAnimate(index) {  //初始化轮播的动画
                let _self = this;
                this.startLoopImagesAnimate();
            },
            compatibleRequestAnimationFrame: function() {
                /*
                *compatibleRequestAnimationFrame方法通过对requestAnimationFrame进行兼容性处理
                */
                if (!window.requestAnimationFrame) {
                    requestAnimationFrame = function(fn) {
                        setTimeout(fn, 17);
                    };    
                }
                if(!window.requestAnimationFrame){
                    let lastTime = 0;
                    window.requestAnimationFrame = function(callback){
                        let currTime = new Date().getTime();
                        let timeToCall = Math.max(0,16.7-(currTime - lastTime));
                        let timer = window.setTimeout(function(){
                            callback(currTime + timeToCall);
                        },timeToCall);
                        lastTime = currTime + timeToCall;
                        return timer;
                    }
                }
                if (!window.cancelAnimationFrame) {
                    window.cancelAnimationFrame = function(timer) {
                        clearTimeout(timer);
                    };
                }

                window.requestAnimationFrame = window.requestAnimationFrame 
                                              || window.mozRequestAnimationFrame 
                                              || window.webkitRequestAnimationFrame 
                                              || window.msRequestAnimationFrame
                                              || window.oRequestAnimationFrame;
                window.cancelAnimationFrame = window.cancelAnimationFrame
                                              || window.mozCancelAnimationFrame;
            },
            startLoopImagesAnimate: function() {  //开始轮播图片动画
                let _self       = this,
                    num         = this.loopWrapObjs.length,
                    count       = 0,
                    duration    = 1000,
                    startTime   = new Date().getTime(),
                    timer       = null;
                timer = requestAnimationFrame(function fn() {
                    let currentTime     = new Date().getTime(),
                        currentDuration = currentTime - startTime;
                    if (count >= num) {
                        cancelAnimationFrame(timer);
                        timer = null;
                        return ;
                    }
                    if (currentDuration >= duration) {
                        _self.initImagesLoopObj(_self.loopWrapObjs[count]);
                        startTime = currentTime;
                        ++count;
                    }
                    timer = requestAnimationFrame(fn);
                });
            },
            initImagesLoopObj: function(loopWrapObj) {  //初始化轮播图片的对象
                let imagesLoop = new ImagesLoop({
                    interval: 100,
                    slideObjs: this.loopSlideObjs,
                    slideWrap: loopWrapObj,
                    index: 6
                });
                imagesLoop.init();
            },
            print: function(fnName = 'fn', obj = {}) {  //打印所有的参数
                console.group(fnName);
                Object.keys(obj).forEach((key) => {
                  console.log(key, obj[key]);
                });
                console.groupEnd('end'+fnName);
            }
        }
    }

抽奖过程：

 
 
using System;

using System.Collections.Generic;

using System.ComponentModel;

using System.Data;

using System.Drawing;

using System.Linq;

using System.Text;

using System.Windows.Forms;

using System.Threading;
namespace 抽奖机

{

    public partial class Form1 : Form

    {

        delegate void LabelTextDelegate(Label lb,string labeltext);

        public Form1()

        {

            InitializeComponent();

            Label.CheckForIllegalCrossThreadCalls = false;

        }

        LabelTextDelegate labletextdelegate;

        List<Thread> thr = new List<Thread>();

       

        private void button1_Click(object sender, EventArgs e)

        {

            List<Label> labl = new List<Label>() {lbalF,lblFive,lblS,lblSix,lblT,lblF };
            if (button1.Text == "抽奖")

            {

                for (int i = 0; i < labl.Count; i++)

                {

                    Thread th = new Thread(ShowText);

                    th.IsBackground = true;

                    th.Start(labl[i]);

                    

                    thr.Add(th);

                    button1.Text = "停止";

                    

                }

               

            }

            else

            {

                foreach (Thread th in thr)

                {

                    th.Abort();

                }

                button1.Text = "抽奖";

            }

        }

        void aa(Label lb, string labeltext)

        {

           

            lb.Text = labeltext;

            

        }

        void ShowText(object lbl1)

        {

            Label lbl = (Label)lbl1;

          while(1==1)

          {

             

                Random rand = new Random();

               

                int k = rand.Next(0, 10);

                Thread.Sleep(10);

                //lbl.Text = k.ToString();

                string a = k.ToString();

                labletextdelegate = new LabelTextDelegate(aa);

                this.Invoke(labletextdelegate, lbl, a);

                

             

            }

           

        }
        private void Form1_Load(object sender, EventArgs e)

        {

           
            button1.Text = "抽奖";
        }

    }

}

    今天，我完成了第一个由我独立制作而成的有实际功能的UE4程序。我想，是不是应该立刻把这时的想法记录下来呢，于是我的博客便开通了。
    我的第一个UE4程序不是个游戏，而是一个抽奖机，我叫它，“抽奖机吧”。它是我四天编写和发展的结果，我一开始套用的是FPS第一人称射击模版。我觉得这样很酷，很有拓展性。事实也的确是这样的。这个模版使我不必去做一些与抽奖无关的琐事。我只要在意抽奖部分就好了。
    起初的编写是困难的，我对于蓝图节点的不熟悉，逻辑的紊乱导致了我的抽奖机吧产生了许多BUG，而每一个BUG都要花费我半小时以上的时间去解决。过程艰苦也充满着收获，解决BUG增长了我发现并解决问题的能力，提高了我运用UE4的技巧。
    顺带一提，我能解决BUG，除了我自己的努力外，也离不开UE4功能的强大，离不开UE4巨大的魅力使我产生的热情。
    游戏开发者多半是因为一种独特的快乐而选择这条道路的，这种乐趣就叫做创造的快乐。
    创造的快乐是难以言说的。儿时，我有幸很早地体会到了这种快乐，这是因为WE——魔兽地图编辑器。我的表哥很喜欢玩War3，他也教过我玩。但老实说，我玩得挺菜的。纵使如此，War3里各色鲜明的英雄。它的特效，技能，物品，单位都给了我巨大震撼，它们吸引着我，无时无刻地吸引着我，我想做个自己心目中的英雄。WE给了我这个机会。
    现在，我想做个很酷的抽奖机吧，于是UE4说，它来了。

抽奖活动的本质，就是通过一定概率的互动行为，再利用大众的侥幸心理，以及对奖品的渴望，来激励用户参与活动，最终转化订单或加深品牌印象。目前活动聚抽奖活动的抽奖模式有：大转盘、砸金蛋、抽奖箱、扭蛋机、九宫格等10几种玩法。这些抽奖形式的优势在于能实时出奖，参与门槛低，体验感强。
用户心理和硬件工具都有了，那你做抽奖活动的目的是什么呢？线上抽奖的成本对于商家而言都不算高，只是如何利用这些奖品，来达到活动目的。无论是提升品牌知名度，还是公号吸粉、门店引流，活动目的总概括还是：拉新——留存——促活——转化。
作为专业的活动营销工具平台，小聚今天列举平台上的4大主题案例，教你如何明确活动目标，制定适合自己的抽奖活动。
1、微信公众号抽奖活动
很多公号运营者都会选择借助第三方抽奖工具来吸粉，曝光品牌。不定期的公众号福利抽奖，可以促活老用户，吸引新粉丝，提升关注者对公众号的热情度和忠诚度。
案例
抽奖模板：幸运大转盘
抽奖规则：关注微信公众号，回复关键词“抽奖”
奖品设置：纪念T恤 等
活动对象：公号粉丝
活动目的：公号吸粉
2、门店抽奖活动
目前不管是门店开业还是节点店庆，商家都很喜欢定期做一些抽奖活动来提高销售额。过去总是会使用实体抽奖箱，或者其他物料来做形式抽奖，过程太繁琐、店员统计困难且浪费物资成本；线上抽奖完美解决了这一问题。
案例
抽奖模板：九宫格
抽奖规则：开业当天消费满额299元即有机会参与抽奖
奖品设置：iPhone XS Max 等
活动对象：消费者
活动目的：开业活动，提高营业额，增加客流量
3、社群抽奖活动
社群的存在，说白了就是因为某种特定的利益/兴趣/目的等聚集在一起的一群人；而一个普通的群内如果长期没有活动，也没有交流，成员就容易没有归属感。在社群创建初期和维护阶段，群管理员可以针对社群的属性发起抽奖活动，除了微信自带的抢红包功能，还可以发起有等级奖项的抽奖活动。
案例
抽奖模板：扭蛋机
抽奖规则：仅限微信群成员可参与抽奖
奖品设置：美妆产品 等
活动对象：群成员
活动目的：扩大社群，沉淀用户
4、投票后参与抽奖
如上所说每个抽奖活动都有商家的目的，投票后即可参与抽奖，也是主办方的一种营销手段。品牌商家会时常发起内部产品的评选，或者为了扩大某些主题投票的活跃度，需用抽奖来驱动用户做出投票行为，活动聚投票活动关联抽奖活动，即可实现该功能。
案例
投票活动：送你喜欢的商品上秒杀头条
抽奖模板：砸金蛋
抽奖规则：进行投票后，即可参与抽奖
奖品设置：优惠券 等
活动对象：投票者
活动目的：刺激了投票者的参与度，扩大活动传播范围
好了，以上案例看完是否对抽奖背后的活动目的有了自己理解？明确活动目标，明确用户对象，每一场抽奖活动，都要让活动奖品最大限度的发挥作用。