摘要：
鲤鱼跳龙门动画 1. 需求 年中618营销活动要求做一个鲤鱼跳龙门的动画，产品参考了某宝上的一个动画，要求模仿这个来做一个类似的动画。产品提供的截屏视频如下： 图1 从这个视频里得到的信息，我们可以把动画分解一下： 321倒计时结束，动画开始播放。 小河背景向下滚动，看上去小鱼在不停的向上游动，其实 阅读全文
摘要：
本文介绍一个小型动画库anime.js，anime.js 是一款功能强大的Javascript 动画库插件。anime.js 可以和CSS3 属性，SVG，DOM 元素和JS 对象一起工作，制作出各种高性能，平滑过渡的动画效果。 anime.js虽然没有其他动画库功能强大，但是它包含的功完全能够满足 阅读全文
摘要：
本文介绍一种12宫格抽奖，这种抽奖方式是九宫格抽奖的演变，只不过开始播放的时候是随机方式，不是顺时针播放了。 1.需求 先看看高保，如下图1 图1 用户点击"立即抽奖"后12个奖品随机高亮 请求接口，待所有产品都高亮后，根据接口结果，固定在抽中奖品上 最后弹出中奖结果弹框 2.思路 2.1 高亮 实 阅读全文
摘要：
1. 需求 开宝箱在一些商家营销活动中也很常见，这个需求简单，产品经理说就是做个动画就好，那我们就可以自由发挥了。高保图如下图1. 图1 开局一张图，剩下的全靠自己编了，动作怎么动，先看看UI给的素材，看米下锅。一张关闭的箱子图片，如下图2 图2 一张打开的箱子，如下图3 图3 一张奖品背景图片，是 阅读全文
摘要：
本文介绍九宫格抽奖功能的实现。 1.需求 功能很简单，来看看高保截图，如下图1 图1 需求的功能点如下： 用户点击抽奖，九宫格四周的图片顺时针依次闪烁，空转几圈。 请求接口，等接口有返回后最后对应的奖品闪烁，其他奖品不闪烁。 登录后，正中间的抽奖这个小方格点亮，未登录是灰色，这一点和抽奖无关，本文不 阅读全文
摘要：
1. 需求 上次讲到lao虎机抽奖，通过jquery.animate修改background-prosition-y来修改背景图片实现上下滚动动画，本文介绍一种左右滚动的动画，原理是一样的，这里通过修改background-prosition-x来实现动画，同时也要注意奖品图片的尺寸问题，这里姑且叫 阅读全文
摘要：
本文介绍一个lao虎机抽奖动画的实现，lao虎机抽奖在各类商家营销活动中非常常见，这里主要介绍动画的实现过程，其他细节不做详细分析。 ps：lao虎机是敏感词，博客园的富文本和markdown编辑器都限制不允许出现，所以文章中的“老”字用拼音代替。 1. 需求 UI给到的蓝湖如下截图1 图1 三栏图 阅读全文
摘要：
1.需求 抽奖是各类营销活动中最常见的一种形式，本产品需求大致如下：转盘周围跑马灯交替闪烁，点击抽奖，大转盘旋转，调用接口获取抽奖结果，大转盘指针指向对应的奖品。高保如下图1 图1-高保 2.整体思路 2.1跑马灯 本需求要求跑马灯交替闪烁，那四周的跑马灯就不能是死的图片了，要用动画来实现，并且第奇 阅读全文