阅读更多

3顶
0踩

Web前端
使用CSS3的steps()动画属性可以用来生成PNG背景动画。这种技术的主要功能是利用铺贴PNG背景图的方式“重现”GIF图的动画效果。

很多人都非常痴迷《街头霸王》游戏,而当我看到了这个素材,你知道我的脑子里想到了什么吗?



观看演示

让我们来做出第一个CSS动作

首先我们要实现的是直拳(就是下面图案中的第三个)。第一步是打开Photoshop,抠出这几个图,这些图都要保持着70px宽和80px高。有一个很好的网站Texture Packer,它能帮你处理这些图片。最终,你的图片应该是这个样子:



下面我们需要有一个DIV,动作将显示到这个DIV里:

/* html */
<div class="ken lazy "></div>
/* css */
.ken { 
    width:70px; height:80px; /* exactly the size of an image in our sprite */
    background-image:url('../images/sprite.png'); 
}


这里我省略了可能需要的浏览器CSS前缀。那么,打直拳的CSS代码就应该是这样:

/* css */
.punch { 
    animation: punch steps(4) 0.15s infinite; 
}
@keyframes punch {
    from { background-position:0px -160px; }
    to { background-position:-280px -160px; }
}


我们这里做的就是定义一个动画CSS类(.punch),基本的动作就是让background-position从0px运动到-280px(沿x轴)。这个动作有四帧(steps(4)就是对应的4副打拳的图片),这个动作在0.15秒里完成;这里的设置是循环播放。

我们还需要有个增加/删除DIV.ken上的.punch类的方法,当控制键被按下时,会调用这个方法。

/* javascript */
$(document).on('keydown', function(e) {
    if (e.keyCode === 68) { // 68 是键盘上的D字符
        $('.ken').addClass('punch');
        setTimeout(function() { $ken.removeClass('punch'); }, 150);
    }
});


如果有人按下了“D”键,我们使用jQuery的addClass('punch')来增添CSS类,而且用setTimeout设置了150毫秒时间的延迟后,删除它(因为我们的动作是在0.15s完成的)。基本上这就是创造所有动画需要的基础知识了。

使用SASS改进代码

如果你留心我们所做的事情,你会发现代码里有些值永远不会改变(图片的长宽等),而且,在创建了一些动画后,你会发现有很多重复的代码,这会让我们的代码很难阅读和维护。SASS能帮助我们消除重复的代码

首先我们要创建几个基本的@mixins,比如animation()和keyframes():

@mixin animation($params) { 
    -webkit-animation:$params;
    -moz-animation:$params;
    -ms-animation:$params;
    animation:$params;
}
@mixin keyframes($name) { 
    @-webkit-keyframes $name { @content }
    @-moz-keyframes    $name { @content }
    @-ms-keyframes     $name { @content }
    @keyframes         $name { @content }
}


我们要把图片的长度和宽度存储到变量里,SASS变量在这里就有了很大的用处:

$spriteWidth:70px;
$spriteHeight:80px;


最终,我们把这些组合到一起,创建一个复杂的SASS mixin,用来声明我们的动画动作和计算背景移动的位置:

@mixin anim($animName, $steps, $animNbr, $animParams){
    .#{$animName} { 
        @content;
        @include animation($animName steps($steps) $animParams); 
    }
    @include keyframes($animName) {
        from { background-position:0px (-$spriteHeight * ($animNbr - 1)); }
        to { background-position:-($spriteWidth * $steps) (-$spriteHeight * ($animNbr - 1)); }
    }
}


现在,你可以用一行代码创建一个动画动作:

$spriteWidth:70px;
$spriteHeight:80px;

/* 直拳 */
@include anim($animName:punch, $steps:3, $animNbr:3, $animParams:.15s infinite);
/* 踢腿 */
@include anim($animName:kick, $steps:5, $animNbr:7, $animParams:.5s infinite);
/* 波動拳 */
@include anim($animName:hadoken, $steps:4, $animNbr:1, $animParams:.5s infinite);
...


这个$animNbr变量很重要:我们的动画中的计算要基于这个数字。事实上,它就是动画中的动作序列的编号。我们第一个例子是长拳,它在图片中的位置是3,踢腿是7,以此类推。

对光电球发生碰撞的检测

我需要一个很高的频率对碰撞进行检测。每50毫秒对光电球的位置(偏移)检查一次,如果光电球的偏移量超出了窗口宽度,这意味着这个球要撞击到边框,我们要马上应用.explodeCSS类。

下面就是如何实现的;虽然不完美,但完全可以运行:

var $fireball = $('<div/>', { class:'fireball' });
$fireball.appendTo($ken);

var isFireballColision = function(){ 
    return $fireballPos.left + 75 > $(window).width();
};

var explodeIfColision = setInterval(function(){
    $fireballPos = $fireball.offset();
    if (isFireballColision()) {
        $fireball.addClass('explode'); 
        clearInterval(explodeIfColision);
        setTimeout(function() { $fireball.remove(); }, 500); 
    }
}, 50);


观看演示

下一步需要做的

我们可以很容易的往里面添加一些声效、背景音乐、其它视觉效果,还可以增加web RTC功能,让多台计算机控制多个人物。(也许你可以使用NodeJSSocket.io,或Meteor framework);这些就是我喜欢web开发的原因:给你无限可能。

英文:Build a Street Fighter Demo with CSS Animations and JavaScript. 译文: webhek.com

关注ITeye官微,随时随地查看最新开发资讯、技术文章。
  • 大小: 69.6 KB
  • 大小: 32.9 KB
来自: webhek
3
0
评论 共 4 条 请登录后发表评论
4 楼 flasheep 2014-04-22 15:25
3 楼 LinApex 2014-04-20 11:29
哎哟,不错哦
2 楼 xp_zed 2014-04-20 02:26
斜跳不能?
1 楼 lsjinpeng 2014-04-19 09:09
  

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • LigerUI 表单和表格中的combobox如何初始化值

    在修改基础信息的时候,通常会遇到需要修改值为选择值的时候,这时候,数据库存的一般是value,而不是显示的text值,但页面显示的时候如果显示成数字型的值,通常会给人不够直观的感觉。因此,要求页面在加载的时候...

  • ExtJs 之 ComboBox级联使用

    刚接触ExtJs不到一周,项目使用ExtJs框架,有个版块用到了combobox的级联(两级),遇到了一系列的问题,两天来一直查API、网络资料,终于解决了。 先列出遇到的一系列问题(也许你也遇到过!),再看是如何一步步解决...

  • flex的datagrid内嵌combobox和itemclick

     private function hsComResult(event:ResultEvent):void{ //表格有结果   dataXML=XMLList(XML(event.result.valueOf()).children());  datalist.dataProvider = dataXML;  selectedItems = new Array();  ...

  • 使用jquery、EasyUI 实现可编辑表格复杂功能

    表格行内下拉: 日期控件: 弹框下拉表单: 上传导入文件: 模态框,处理状态提示: 源代码: ; charset=UTF-8" pageEncoding="UTF-8"%&gt; &lt;!DOCTYPE ...

  • EasyUI 的应用

    EasyUI怎么应用?  author:songfuwfei 1.先在myeclipse搭好一个ssm的框架。 2.在mysql里面建好需求表。 3.创建好表,搭好框架写个index文件跑一下项目看框架好使不。 4.导入一些 ...

  • C#学生管理系统——班级列表(查询功能)

    简单写下,查询这个浅色的框框是GroupBox,其功能是带有标题的框框(只是为了美观,没啥卵用),年级这些都是Label标签,选择年级的下拉菜单框用combobox,班级textbox,查询按钮button。 下半部分因为要...

  • S:标签实际大全(struts2)

    (1): ---- 文本...如果是要显示值的话可以这样:value = “实体Bean。Get***()”。? (4): ---- 单选按钮? 使用:其中list 属性是必须要有的。? :第一种方式:list = “#{‘male’:’男’,’female’:’女’}

  • Struts2标签使用

    转载觉得不错 转自:... Struts2标签使用  (1): ---- 文本输入框  使用:  (2): ----- 文本域输入框  ...如果是要显示值的话可以这样:value = “实体Bean。Get***()”。

  • Struts2常用标签

    Struts2标签使用 (1): ---- 文本输入框 ...如果是要显示值的话可以这样:value = “实体Bean。Get***()”。 (4): ---- 单选按钮 使用:其中list 属性是必须要有的。 :第一种方式:list = “#{‘mal

  • struts2标签总结

    &lt;s:param name="gId" value="20"&gt;&lt;/s:param&gt; value="50"&gt;&lt;/s:param&gt; value="30"&gt;&lt;/s:param&gt; &lt;/s:url&gt;"&gt; insert&lt;/a&gt; (21):&lt;s:set/&gt; --- Set标签用户将某一值赋给某一变量,因此,任何对该项值的引用...

  • EXT属性

    top.Ext.Msg.alert("值"); top.Ext.Msg.confirm("值"); top.Ext.Msg.notify("值"); Ext.getCmp("控件ID").setText("值"); //设置控件的Text值 Ext.getCmp("控件ID").setValue("值");...

  • 18第一章 ASP.Net内建对象

    第一章 ASP.Net内建对象 第一章 ASP.Net内建对象 ASP.Net为保持用户的数据和信息,内建了许多对象,...// Cookies中的值不能修改,只能覆盖  label1.Text="您是第"+Num.ToString()+"次访问本站";  }  ...

  • EASYUI

    EasyUI数据表格DataGrid 需要引入: &lt; link rel = "stylesheet" type = "text/css" href = "themes/default/easyui.css" &gt; &lt; link rel = "stylesheet" type = "text/css" href = "themes/...

  • EasyUI的简单应用

    EasyUI怎么应用?  author:songfuwfei 1.先在myeclipse搭好一个ssm的框架。 2.在mysql里面建好需求表。 3.创建好表,搭好框架写个index文件跑一下项目看框架好使不。 4.导入一些 css js 小图标 插件放到web...

  • 1基于蓝牙的项目开发--蓝牙温度监测器.docx

    1基于蓝牙的项目开发--蓝牙温度监测器.docx

  • AppDynamics:性能瓶颈识别与优化.docx

    AppDynamics:性能瓶颈识别与优化

  • percona-xtrabackup-2.4.28-1.ky10.x86-64.rpm

    xtrabackup银河麒麟v10rpm安装包

  • 2024年全球产品经理大会(脱敏)PPT合集(34份).zip

    2024年全球产品经理大会(脱敏)PPT合集,共34份。 1、AI 原生产品设计的 7 个反共识 2、AI 时代的策略产品与内容社区推荐实践 3、AI时代的用户界面设计 4、AI智能陪练:大模型赋能销售成长 5、AI浪潮中的应用主义者 6、AI驱动下的B端产品的思考与创新 7、AI驱动业务增长的探索与实践 8、Al Native 生产力工具的发展、价值与商业落地 9、B端产品设计避坑指南 10、GenAl驱动的xGen电商AI平台产品实践与思考 11、Kwaipilot 在快手的落地实践 12、OPPO AI的探索新交互到新生态 13、RPA + AI打造大模型驱动的领先数字员工 14、产品AI化重塑的思考与实践 15、产品分析:通过关键指标助力团队与企业成功 16、从RPA到Al Agent,高价值、可落地的智能助手 17、从流量运营到AI驱动的机器增长 18、做穿越时代的产品 19、创造好工具,创造世界一流产品力 20、医疗健康场景的大模型产品探索 21、即时零售柔性供应链体系建设与AIGC在零售数字化的探索 22、向量数据库的出海实践与未来展望 23、大模型在B端落地思考实践

Global site tag (gtag.js) - Google Analytics