程序员

开发小技巧之sprite

2018-01-31  本文已影响0人  leehu

做过iOS+Cocos2D或Android游戏开发,或者前端开发中,我们经常做一些复杂的动画会应用到雪碧图。举个栗子在网易云音乐的的年度总结中会有一个小人在弹guita的动画



这个动画是通过css 的animate结合雪碧图来实现的,下面的小人的雪碧图



在翻看它的实现代码,你真的是想说 我的天
@-webkit-keyframes guitaSittingAnimation {
  0% {
    background-position: 0px 0px;
  }
  1.69% {
    background-position: -89px 0px;
  }
  3.39% {
    background-position: -178px 0px;
  }
  5.08% {
    background-position: -267px 0px;
  }
  ......

看到上面的代码要是自己硬编码让你写,你心中是万头草泥马,都是体力活



接下来说怎么快速有效的解决这个问题。

Step1

首先让UI通过AE cc将需要展示的动画的每一帧导出单独的图片给你


Step2

神器上场


关于你具体怎么使用(此处省略1000字吧)最重要的是下图中的两个步骤:选择Output中的Data format为css 然后 publish下


最后你会在生成的文件中找到.png 和 .css文件,看见css文件,你想想都开心(不!是惊喜)它会给我们生成具体的每一帧图片所在的位置。

/* ----------------------------------------------------
   created with http://www.codeandweb.com/texturepacker 
   ----------------------------------------------------
   $TexturePacker:SmartUpdate:dacea035d4dd4d6665055188849b8088:1/1$
   ----------------------------------------------------

   usage: <span class="{-spritename-} sprite"></span>

   replace {-spritename-} with the sprite you like to use

*/

.sprite {display:inline-block; overflow:hidden; background-repeat: no-repeat;background-image:url(Untitled.png);}

.00 { background-position: -2px -2px}
.01 { background-position: -754px -2px}
.02 { background-position: -1506px -2px}
.03 { background-position: -2258px -2px}
.04 { background-position: -3010px -2px}
.05 { background-position: -3762px -2px}
.06 { background-position: -4514px -2px}
.07 { background-position: -5266px -2px}
.08 { background-position: -6018px -2px}

Step3

​ Step2好像并不是我们想要的结果,我们需要的做动画的时候通过百分比来控制。接下来找到一个css计算器


比如我的一个动画周期需要跑74帧, 就可以借助它来帮助我们生成算百分比。

Step4

.00 { background-position: -2px -2px}

0%{ /* 动作1 */ }

好像这两个数据要合并成 0%{ background-position: -2px -2px } ,你总不至于一步一步复制粘贴吧,这时候就要用到我们的开发工具了,比如sublime中的多行编辑功能了,大功告成


上一篇下一篇

猜你喜欢

热点阅读