canvas教程

HTML5小游戏 制作技巧&经验

字号+ 作者:H5之家 来源:H5之家 2015-10-16 16:21 我要评论( )

TGideas隶属于腾讯公司互动娱乐业务系统的专业推广类设计团队,工作范围涉及各类游戏产品的推广设计工作,由专业的视觉设计师、网站重构工程师、FLASH动画设计师

进入正题,我要开始认真了!(严肃脸…… ( ̄ー ̄〃)

嗯……首先大家先来跟我一起玩个游戏,请快速的掏出手机,打开微信,“扫一扫”下面的二维码,通关最多的前三名同学……什么奖品都没有!!

相信大家都认真的玩儿了游戏吧?我们这里有一位万技师一直玩到50多关,最后体力透支,主动“自杀”,否则相信他能玩出过百关,怎么做到的?有彩蛋,不知道你有没有发现,哈哈……

嗯……回归正题,这个小游戏当中用到了大量的动画效果,主要是逐帧动画,今天的第一部分,就先来讲讲动画这个事情。

我先来列一排动画效果给大家看……

图1

图2

图3

刚才上面列的动画效果分别是 GIF 动画、Canvas + CSS 动画、逐帧动画。其实说起常见的动画实现,除了 GIF(APNG)、Flash 和 Canvas 外,其他基本都是 CSS 动画,即使是通过 JS 实现,大部分情况下只是通过 JS 来修改 CSS 属性而已。

而 GIF 动画仅支持 8 位色,颜色偏少,虽然 APNG 解决了这个问题,但是存在兼容问题,同时它和 GIF 一样,没有可控性,所以它们一般很少用于动画制作流程中,仅用来展示。相对来说 CSS 动画和 Canvas 动画的可控性更易于制作页面效果动画以及页面游戏。

1. 可控性……

刚才说了“可控性”,那到底什么是可控性?我们先来看一个动画效果的大概示意图!

一段动画一般由“开始 - 过渡 - 结束”来组成,GIF 动画是无法通过代码来获取到这些状态的,但 CSS 动画可以!

我这里的做法是把每一组图片合成一张“雪碧图”,然后利用 CSS 的 animation 做逐帧动画,写好函数通过不同的参数来调用不同的角色。

Role(dirt)

 

Role(rises)

 

Role(cast)

 

Role(broken)

 

Role(death)

合成“雪碧图”的逐帧动画

像上面 图2 和 图3 的例子,都是由好几个动画衔接完成,那么它们之间如何衔接呢?有的同学可能会说用 setTimeout/setInterval/requestAnimationFrame 一类的延迟功能来做衔接,但是这样会有个问题就是在性能不同的机器上,会有误差,而且维护繁琐。所以,我们需要一个触发形式的衔接方式,即上一个动画完成了,通知下一个动画开始。

CSS 动画实现一般使用 animation 和 transition 来搭配其他属性使元素产生不同变化,从而达到动画效果。

而这两个属性是可以通过 JS 中的事件来监听到“开始”和“结束”状态。具体事件如下:

animationstart:

animationstart 事件在 CSS animation 开始时被触发。

如果有 animation-delay ,事件将在延迟时效过期之后立即触发。 如果延迟时效是负值,事件触发时将带有等于延迟时效绝对值的 elapsedTime 。

animationend: animationstart 事件在 CSS animation 完成时被触发。 transionstart: transionstart 事件在 CSS transition 过渡开始时被触发。 transitionend:

transitionend 事件会在 CSS transition 结束后触发。

当 transition 完成前移除 transition 时,比如移除 CSS 的 transition-property 属性,事件将不会被触发。

这些事件在不同浏览器下需要加前缀什么的大家应该都懂得,至于 transionstart,目前仅在 IE10+ 上有效……

通过事件监听的方式衔接,并利用分层的形式叠加多重动画,最终实现效果:

现在,开始状态和结束状态获取到了,那中间的过渡状态要怎么办呢?比如说我要动画执行到 30% 的时候,执行一个回调,亲一口姐姐,肿么办??(?ε??)

虽然没有直接的事件可以监听到过渡状态,而且这个需求中也暂时用不到这个过渡状态监听,但是我们也可以稍微做点事情的。(不抛弃,不放弃!)

怎么做呢?比如一个动画的执行时间是10s,那么在动画开始的时候,跑一个 setInterval 来不断的记录过渡状态,然后用当前跑到的值和总时长就能算出具体的进度了。这里要稍微注意一下,因为动画播放控制(animation-play-state)属性的存在,在暂停和重新播放时,需要对计时器稍微进行一下处理,否则得出的进度值会有错误。

这不是一个很完美的办法,因为在不同的性能下,计时器的值可能会有微弱误差,但如果你要求并不是很精确,还是可以尝试这个办法的。

2. 如何 Perfect 的兼容各分辨率?

兼容各式屏幕一般有这样的办法:

还有这样的办法:

最后,还有传说中的弹性自适应布局:∑(O_O;)

但是,在这个需求上,统统不适用!为什么?

viewport 和 media Query 在 iOS 和 Android 上识别的单位不同,在 iOS 上识别的是“设备像素”,而在 Android 上识别的是“CSS像素”,这两个词后面会讲到。

因为这个页面游戏上有大量的元素用到绝对定位,如果使用弹性自适应布局的话,会进行大量的布局计算,而且还不一定精准。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 从底层谈WebGIS 原理设计与实现(六):WebGIS中地图瓦片在Canvas上的拼接显示原理

    从底层谈WebGIS 原理设计与实现(六):WebGIS中地图瓦片在Canvas上的

    2017-04-21 09:00

  • html5课程设计论文

    html5课程设计论文

    2017-04-18 09:03

  • H5拍照应用开发经历的那些坑儿

    H5拍照应用开发经历的那些坑儿

    2017-04-09 18:05

  • 网页设计中html和html5语言的区别?

    网页设计中html和html5语言的区别?

    2017-04-06 13:01

网友点评
a