轩枫阁

玩转HTML5移动页面

前言

作为一名前端，在拿到设计稿时你有两种选择：

快速输出静态页面
加上高级大气上档次狂拽炫酷屌炸天的动画让页面动起来

作为一个有志向的前端，当然是选2啦！可是需求时间又很短很短，怎么办呢？

这次就来谈谈一些动画设计的小技巧，能在你时间不多又没有动画想法的时候瞬间让页面增色不少。
同时也会谈及移动端H5页面的优化细节与关键点，因此本文章将分为动效篇和优化篇。

动效篇

（1） CSS3时序错开渐显动画

这是一种比较常用的动画，它的优点是节奏感强，做法就是先让每个元素隐藏，然后当页面呈现后每个元素错开时间出现。

例子（忽略兼容前缀和无关属性）：查看全文

2016/02 20 周六

《全民突击》HTML5设计全程回顾及经验总结

小宝：腾讯游戏HTML 5实战案例！在这次朋友圈广告的设计过程中，遇到了好多拦路虎，有惊喜有郁闷，但在这个过程中我收获到了很多关于设计的经验和对项目的理解。下面，我以设计师的角度来分享一下在这次朋友圈广告中的一些过程和感悟，附设计流程图哟。

前言

最近有好多好多的优秀的朋友圈广告出现在我们的眼前，得到了好多人的关注。

小宝也很期待能够做一个有意思的朋友圈广告给大家玩玩，没想到梦想成真了！

这篇有趣的文章呢，我会分3大部分来和大家讲述，请屏幕前的你耐心的听我“墨迹”呗：

一个前所未有的挑战；
《全民突击》朋友圈广告的设计回顾；
就是很有震撼力的总结了；

接下来我就开始了呀！

一、前所未有的挑战

（空降了一个大大大需求）

听说一款3D枪击手游《全民突击》要上微信朋友圈广告了呀。项目组的同学们和我们设计师们都惊呆了，手忙脚轮的赶紧的展开筹划和讨论。

1.01项目背景

随着枪击手游的竞争越来越凶，玩家对《全民突击》的认知还是不够，需要做一次品牌的曝光宣传，让玩家对《全民突击》的认知更深入做到拉新的一个宣传效果，也借助微信朋友圈广告的渠道，打造一个《全民突击》是第一个上微信朋友圈广告的枪击游戏品类的游戏。小伙伴们都“鸡冻湿”了！

1.02需求目的

《全民突击》要在这个阶段进行一次拉新，品牌曝光，提升产品知名度，还要保持老玩家活跃度和拉回流的目的，转化新进，提升市场占有率，做一次品牌的整合传播推广，围绕整个初始想法策划了一个H5对其进行传播。查看全文

2016/02 15 周一

浅析js随机函数Math.random()

随机数

随机数是统计学领域的一个重要概念，对于游戏来说同样意义非凡，用好随机数，可以使你的游戏更真实、更人性、富有魅力。

举例子来说：一个打靶游戏，子弹每次都命中准心所示位置是不科学的，加上抖动误差，会使真实感更加强烈；再如，抽奖大转盘程序，每当转盘停止转动时，指针恰好都指向奖品图片的正中点，人们会觉得这个转盘很不自然，指向一个随机位置效果要好得多。

学过 JavaScript 的人都知道，使用随机数很简单，只要一个 Math.random() 就可以获得一个大于等于 0 小于 1 的浮点数。从一个集合中随机选择对象时，使用浮点数离散化后的结果作为选择集的索引：

var objects = [...];

var randomIndex = Math.floor( objects.length * Math.random() );

var object = objects[ randomIndex ];

随机数的分布规律

前面代码中 Math.random() 和 randomIndex 的取值，在「概率分布」理论中属于「连续型分布」和「离散型分布」，分布用来描述随机变量的概率性质。其中，不论是连续型还是离散型，均匀分布都是最最常用的分布类型（没有之一）。在大转盘的例子中，决定转盘「停在哪个奖品上」和「停到该奖品的哪个位置」，都可以采用均匀分布。

均匀分布的特点是：所有基本事件的可能性相等，以下是 100 万次 Math.random() 实验的取值发生次数直方图：