最近在考虑用 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; }
至此,就完成了人物奔跑动作的实现。
網頁設計.RWD響應式網站.行動版網站.企業形象網站 / 電子工業類
網站技術:PHP . Javascript
電線電纜的應用廣泛,像是居家、辦公室的線路配置都會使用的。比較重要的應用有消防系統、室內消防設備、火災警報系統...等等。 本公司官網主要是單純的產品介紹與業務說明,畫面排版與設計比較簡約,明亮。
網頁設計.RWD響應式網站 / 服務類
網站技術:Javascript
協助民眾了解與申請商標的相關流程與資訊,讓客戶加深專利商標這方面的訊息,以過往的案件來加深大眾對於商標的重要性。甚至可以為不同類型客戶量身打造品牌策略服務、分析對手情況...等等服務。
精選專案.網頁設計.RWD響應式網站.行動版網站 / 服務類
網站技術:Javascript
智慧財產局為提供使用者線上申請專利商標,以及商標申請進度查詢等服務,因此特別規劃此系統讓大眾更為便利,包含的業務申請、繳費、查詢到線上協助等眾多智慧財產權相關的服務內容。
電話:(02)2739-9096 | 傳真:(02)2739-6637 | 客服:[email protected] | 臺北市信義區和平東路3段257號6樓map
© 2019 傑立資訊 All rights reserved.| 網站隱私政策