|
[tr][td] 通常大部分Web程序员平时的工作只是开发一些常规的网站、信息化办公系统等。在他们的眼里，Web游戏动画开发程序员似乎神奇的多，Web游戏动画明显比普通的Web应用要灵活，更注重交互和视觉冲击，而动画动作、做图配色等方面更是外行。之前我也在一篇《未来web浏览技术提前体验：10个会让你惊叹不已的HTML5画布(canvas)技术应用演示》中向大家展示了Web动画的神奇魅力。
但事实上，也许你想错了。Web动画并不难。你只需要掌握一些非常基本的知识就能开发出非常漂亮的Web动画。以前开发动画应用你可能需要学习很复杂的动画制作框架。自从HTML5画布(Canvas)功能面世后，Web动画就一下子从云端跌落到了地面——任何一个Web程序员都可以轻易的用画布(Canvas)技术+JavaScript来开发出各种动画效果。网上用来方便程序员开发画布(Canvas)游戏动画的JS工具包非常丰富，《盲打高手打飞字》这款练习盲打的游戏就是一个叫做impactjs的游戏引擎。而文下面的教程中将使用的是另外一个叫做kinetic的Web动画工具包。它们都是开源的。 图片：131651yq4e2zaat7k2a3h7.jpg  图片：131651yq4e2zaat7k2a3h7.jpg 观看演示 把鼠标放到上面的小丑脸上，然后移开，看看会发生效果。 这就是一个最简单的动画。简单吗？你能做出来吗？ 下面我们就用三分钟时间，用很少的几行代码把这个动画做出来。你只需要了解很少的几个API，然后使用需要的动画参数，就能制作出这个有趣又能响应你的动作的Web动画。 第一步，画五官 这个小丑没有耳朵和眉毛，所以只剩下三官，但它的两个眼睛我们要分别绘制，所以一共是四个部分。下面先看看代码。 绘制左眼的代码 [*] var leftEye = new Kinetic.Line({ [*] x: 150, [*] points: [0, 200, 50, 190, 100, 200, 50, 210], [*] tension: 0.5, [*] closed: true, [*] stroke: 'white', [*] strokeWidth: 10 [*] }); 复制代码 绘制右眼的代码 [*]var rightEye = new Kinetic.Line({ [*] x: sw - 250, [*] points: [0, 200, 50, 190, 100, 200, 50, 210], [*] tension: 0.5, [*] closed: true, [*] stroke: 'white', [*] strokeWidth: 10 [*] }); 复制代码 绘制鼻子的代码 [*]var nose = new Kinetic.Line({ [*] points: [240, 280, sw/2, 300, sw-240,280], [*] tension: 0.5, [*] closed: true, [*] stroke: 'white', [*] strokeWidth: 10 [*] }); 复制代码 绘制嘴巴的代码 [*]var mouth = new Kinetic.Line({ [*] points: [150, 340, sw/2, 380, sw - 150, 340, sw/2, sh], [*] tension: 0.5, [*] closed: true, [*] stroke: 'red', [*] strokeWidth: 10 [*] }); 复制代码 你会不会觉得很失望，原来就这么简单几行代码。没错，就是这么简单，相信你对自己能成为一名Web游戏动画程序员开始有信心了! 简单讲解一下上面的代码。Kinetic就是我们使用的js工具包。在页面的头部，我们需要这样引用它： [*] 复制代码 其它几个分别是几个关键点，线条弹性，颜色，宽度等。这些都很容易理解。 第二步，让图动起来 这个动画之所以能吸引人，是因为它能响应你的鼠标动作，和用户有互动，这是一个成功的动画最关键的地方。如果你仔细观察，这个小丑五官的变化只是形状的变化，眼睛变大，嘴巴变大，鼻子变大，但特别的是这个变化不是瞬间变化，而是有过渡性的，这里面有一些算法，这就是最让人发愁的地方。幸运的是，这算法技术都非常的成熟，不需要我们来思考，在这些动画引擎库里都把这些技术封装成了非常简单方便的接口。下面我们来看看如何让动起来。 左眼的动画 [*]var leftEyeTween = new Kinetic.Tween({ [*] node: leftEye, [*] duration: 1, [*] easing: Kinetic.Easings.ElasticEaseOut, [*] y: -100, [*] points: [0, 200, 50, 150, 100, 200, 50, 200] [*] }); 复制代码 右眼的动画 [*]var rightEyeTween = new Kinetic.Tween({ [*] node: rightEye, [*] duration: 1, [*] easing: Kinetic.Easings.ElasticEaseOut, [*] y: -100, [*] points: [0, 200, 50, 150, 100, 200, 50, 200] [*] }); 复制代码 鼻子的动画 [*]var noseTween = new Kinetic.Tween({ [*] node: nose, [*] duration: 1, [*] easing: Kinetic.Easings.ElasticEaseOut, [*] y: -100, [*] points: [220, 280, sw/2, 200, sw-220,280] [*] }); 复制代码 嘴巴的动画 [*]var mouthTween = new Kinetic.Tween({ [*] node: mouth, [*] duration: 1, [*] easing: Kinetic.Easings.ElasticEaseOut, [*] points: [100, 250, sw/2, 250, sw - 100, 250, sw/2, sh-20] [*] }); 复制代码 这些代码非常的简单，而且变量名能自释其意。稍微有点经验的程序员想看懂这些代码应该不难。基本每段代码都是让你提供一些点，指定动画动作的衰退模式和持续时间。 完整的动画代码 [*] [*] [*] [*] [*] [*] [*] [*] [*] [*] [*] 复制代码 观看演示 我相信你已经在3三分钟内看完并看懂了这个动画的制作过程和原理。当然，这个动画很简单，我们这里只是粗浅的讲解一些HTML5画布(Canvas)动画技术的皮毛。如果想真正的成为Web动画告诉，那你还需要做很多的努力。但如果你只是业余爱好，我相信这已经足够让你骄傲了。 [/td][/tr] |
|
