最近在考虑用 DOM 实现 2D 游戏基本动作,其中需要实现精灵(sprite)的行走,跳跃等动作,因为 Canvas 才刚开始学习,于是便想用 CSS3 来实现这个动作。
首先从 dribbble 上找来某位大师的作品:
作为 2D 游戏,要响应键盘的动作就肯定不能直接使用 Gif 图了,于是在 Photoshop 中打开这张图,提取出所有帧:
扣去背景以后拼接成雪碧图:
然后利用 CSS3 的 keyframes 自定義动画:
$spriteWidth: 140px; // 精灵宽度
@keyframes run {
0% {
background-position: 0 0;
}
100% {
background-position: -($spriteWidth * 12) 0; // 12帧
}
}
#sprite {
width: $spriteWidth;
height: 144px;
background: url("../images/sprite.png") 0 0 no-repeat;
animation: run 0.6s steps(12) infinite;
}
实现效果如下:
https://idiotwu.me/css3-running-animation/
其中用到 animation-timing-function 里的 steps() , steps([, [ start | end ] ]?):第一个参数number为指定的间隔数,即把动画分为n步阶段性展示,第二个参数默认为end,设置最后一步的状态,start为结束时的状 态,end为开始时的状态,若设置与animation-fill-mode的效果冲突,而以animation-fill-mode的设置为动画结束的 状态。
所以 animation-timing-function: steps(12) 就相当于:
@keyframes run {
0% { background-position: 0 0; }
8.33% { background-position: -140px 0; }
16.67% { background-position: -280px 0; }
25% { background-position: -420px 0; }
33.33% { background-position: -560px 0; }
41.67% { background-position: -700px 0; }
50% { background-position: -840px 0; }
58.33% { background-position: -980px 0; }
66.67% { background-position: -1120px 0; }
75% { background-position: -1260px 0; }
83.33% { background-position: -1400px 0; }
91.67% { background-position: -1540px 0; }
100% { background-position: 0 0; }
}
#player { animation-timing-function: step-start; }
至此,就完成了人物奔跑动作的实现。
精選專案.Line OA / 休閒餐飲類
網站技術:PHP/MySql
勝博殿終於推出LINE OA 官方帳號,LINE 聊天室裡包含最新消息、訂位/餐與票劵/點數。不但可以累積點數甚至還可以兌換商品。此功能推出無疑就是增加用博殿的用餐次數。
精選專案.網頁設計.RWD響應式網站.企業形象網站.無障礙網頁 / 其他類
網站技術:PHP . Javascript/MySql
對於無障礙朋友來說,先天的缺陷不能阻止自己對藝術的熱情。伊甸看到這些藝術家的實力,要將這些精采的作品對外發表。不僅僅是在國內甚至推廣到國外展現台灣的軟實力,此平台正是這些藝術家展現實力的舞台。
CI/平面設計 / 建築設計類
電話:(02)2739-9096 | 傳真:(02)2739-6637 | 客服:[email protected] | 臺北市信義區和平東路3段257號6樓map
© 2019 傑立資訊 All rights reserved.| 網站隱私政策