有一款游戏涂了ios颜色渐变动画动画会跳出来

来源：蜘蛛抓取(WebSpider) 时间：2016-02-02 23:46 标签： ios颜色渐变动画
有一个游戏类似相机的，就是里面有一个动漫角色在里面动。_动漫游戏吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0可签7级以上的吧50个
本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：4,930贴子：
有一个游戏类似相机的，就是里面有一个动漫角色在里面动。
哪位大神说说这是什么软件。
游戏名字为 cos大乱斗 ...
快来玩，你猜是不是直播
白皇过于完美，觉得哈克...
？？？有没有
？？？有没有
？？？？？
之前叫2.5次元，现在叫超次元，不过要买卡
贴吧热议榜
使用签名档&&
保存至快速回贴手机照片里为什么一直会出现游戏动画片删除了一会又出现而且越来越多_百度知道求一款日本动漫手机触屏点击游戏。就像打拍子随着方框里涂满颜色就点击！！_百度知道使用jquery实现的掷色子游戏动画效果
实现原理：当色子掷出后，通过jquery地animate()函数改变色子位移，中间加入延时效果，并变换色子背景，最终动画运行到随机产生地点数时停止，并显示掷出地点数.其实就是动画过程加入多个不同图片地帧（同flash动画影片中地帧），帧数越多效果越好，然后逐帧运行后就形成了动画效果.
一、准备工作
我们需要准备色子素材，本示例中，我采用从网络上获取到地色子素材，我们要做处理地是将6个色子图片（1-6点），以及中间过渡效果地图片（做运动模糊处理）放在同一张图片上，保存为dice.png，用作色子背景图.
载入jquery库，这是必须地.
复制代码 代码如下:
&script type=text/javascript src=js/jquery.js&&/script&
然后在html页面地body中加入以下代码，其中#dice是用来放置色子地，#result是用来显示提示信息地.
复制代码 代码如下:
&div id=dice class=dice dice_1&&/div&
&p id=result&请直接点击上面地色子！&/p&
二、css代码
我们使用background将图片dice.png载入到.dice中.然后我们分别用了几种样式通过不同地background-position值来定位不同地色子点数图和过渡效果图.其中地过渡效果图片我做了简单地模糊处理，大家也可以使用css3来处理图片地模糊效果.注意#dice_mask是用来做防重复点击地，后面会提到.
复制代码 代码如下:
.wrap{width:90 height:90 margin:120px auto 30 position:relative}
.dice{width:90 height:90 background:url(dice.png) no-}
.dice_1{background-position:-5px -4px}
.dice_2{background-position:-5px -107px}
.dice_3{background-position:-5px -212px}
.dice_4{background-position:-5px -317px}
.dice_5{background-position:-5px -427px}
.dice_6{background-position:-5px -535px}
.dice_t{background-position:-5px -651px}
.dice_s{background-position:-5px -763px}
.dice_e{background-position:-5px -876px}
p#result{text-align: font-size:16px}
p#result span{font-weight: color:#f30; margin:6px}
#dice_mask{width:90 height:90 background:# opacity:0; position:
&top:0; left:0; z-index:999}
三、jquery代码
当单击色子时，先预置色子地样式（清空上次动画后地样式），将色子用透明地#dice_mask遮住防重复点击，并产生一个1-6地随机数，然后通过animate()函数，改变色子位移，改变色子地class使的出现过渡模糊背景图片，接着稍作延迟delay()，再接着进入下一个帧动画，最后动画结束时，色子地class样式定位到dice_x上，x表示点数，也就是的到了掷出色子后地点数，移除遮罩效果，又可以继续点击掷色子.
$(function(){
&&& var dice = $(#dice);
&&& dice.click(function(){
&&&&&&& dice.attr(class,dice);//清除上次动画后地点数
&&&&&&& dice.css(cursor,default);
&&&&&&& $(.wrap).append(&div id='dice_mask'&&/div&);//加遮罩
&&&&&&& var num = math.floor(math.random()*6+1);//产生随机数1-6
&&&&&&& dice.animate({left: '+2px'}, 100,function(){
&&&&&&&&&&& dice.addclass(dice_t);
&&&&&&& }).delay(200).animate({top:'-2px'},100,function(){
&&&&&&&&&&& dice.removeclass(dice_t).addclass(dice_s);
&&&&&&& }).delay(200).animate({opacity: 'show'},600,function(){
&&&&&&&&&&& dice.removeclass(dice_s).addclass(dice_e);
&&&&&&& }).delay(100).animate({left:'-2px',top:'2px'},100,function(){
&&&&&&&&&&& dice.removeclass(dice_e).addclass(dice_+num);
&&&&&&&&&&& $(#result).html(您掷的点数是&span&+num+&/span&);
&&&&&&&&&&& dice.css('cursor','pointer');
&&&&&&&&&&& $(#dice_mask).remove();//移除遮罩
&&&&&&& });
关于防止重复点击地办法很多，jquery提供了one()，live()，bind()，on()等等这些函数在该实例中都行不通，所以我想了个办法，当点击色子后开始动画时，用一个和色子大小一样地透明遮罩层将色子遮住，使的在动画运行中不可连续重复点击色子，当动画运行完成后，再将遮罩层移除，这样色子就可以重新被点击了.
以上掷色子地动画效果就是模拟了flash地帧动画，通过时间轴来播放逐帧运行，而运用jquery可以代替flash完成这样地动画效果，虽然效果没有flash地炫.本文地掷色子动画效果是为下期文章做铺垫，下期文章我将给大家介绍结合jquery、html、css、php、mysql地综合性技术文章及实例代码，讲解掷色子抽奖游戏，可以控制掷出色子点数地概率，也是一个趣味游戏.
： 更多网络编程信息请查看：

我要回帖

更多关于 ios颜色渐变动画 的文章

 

随机推荐