三分钟HTML5画布(Canvas)动画教程

时间:2016-03-06
       通常大部分Web程序员平时的工作只是开发一些常规的网站、信息化办公系统等。在他们的眼里,Web游戏动画开发程序员似乎神奇的多,Web游戏动画明显比普通的Web应用要灵活,更注重交互和视觉冲击,而动画动作、做图配色等方面更是外行。之前我也在一篇《未来web浏览技术提前体验:10个会让你惊叹不已的HTML5画布(canvas)技术应用演示》中向大家展示了Web动画的神奇魅力。


       但事实上,也许你想错了。Web动画并不难。你只需要掌握一些非常基本的知识就能开发出非常漂亮的Web动画。以前开发动画应用你可能需要学习很复杂的动画制作框架。自从HTML5画布(Canvas)功能面世后,Web动画就一下子从云端跌落到了地面——任何一个Web程序员都可以轻易的用画布(Canvas)技术+JavaScript来开发出各种动画效果。网上用来方便程序员开发画布(Canvas)游戏动画的JS工具包非常丰富,《盲打高手打飞字》这款练习盲打的游戏就是一个叫做impactjs的游戏引擎。而文下面的教程中将使用的是另外一个叫做kinetic的Web动画工具包。它们都是开源的。


1.jpg


2.jpg


观看演示
把鼠标放到上面的小丑脸上,然后移开,看看会发生效果。


这就是一个最简单的动画。简单吗?你能做出来吗?


下面我们就用三分钟时间,用很少的几行代码把这个动画做出来。你只需要了解很少的几个API,然后使用需要的动画参数,就能制作出这个有趣又能响应你的动作的Web动画。


第一步,画五官


这个小丑没有耳朵和眉毛,所以只剩下三官,但它的两个眼睛我们要分别绘制,所以一共是四个部分。下面先看看代码。


绘制左眼的代码
  1. var leftEye = new Kinetic.Line({
  2.         x: 150,
  3.         points: [0, 200, 50, 190, 100, 200, 50, 210],
  4.         tension: 0.5,
  5.         closed: true,
  6.         stroke: 'white',
  7.         strokeWidth: 10     
  8.       });
复制代码
绘制右眼的代码
  1. var rightEye = new Kinetic.Line({
  2.         x: sw - 250,
  3.         points: [0, 200, 50, 190, 100, 200, 50, 210],
  4.         tension: 0.5,
  5.         closed: true,
  6.         stroke: 'white',
  7.         strokeWidth: 10   
  8.       });
复制代码
绘制鼻子的代码
  1. var nose = new Kinetic.Line({
  2.         points: [240, 280, sw/2, 300, sw-240,280],
  3.         tension: 0.5,
  4.         closed: true,
  5.         stroke: 'white',
  6.         strokeWidth: 10
  7.       });
复制代码
绘制嘴巴的代码
  1. var mouth = new Kinetic.Line({
  2.         points: [150, 340, sw/2, 380, sw - 150, 340, sw/2, sh],
  3.         tension: 0.5,
  4.         closed: true,
  5.         stroke: 'red',
  6.         strokeWidth: 10
  7.       });
复制代码
       你会不会觉得很失望,原来就这么简单几行代码。没错,就是这么简单,相信你对自己能成为一名Web游戏动画程序员开始有信心了!


       简单讲解一下上面的代码。Kinetic就是我们使用的js工具包。在页面的头部,我们需要这样引用它:
  1. <script type="text/javascript"
  2. src="/js/kinetic-v5.0.1.min.js?0d64e4"></script>
复制代码
其它几个分别是几个关键点,线条弹性,颜色,宽度等。这些都很容易理解。


第二步,让图动起来


这个动画之所以能吸引人,是因为它能响应你的鼠标动作,和用户有互动,这是一个成功的动画最关键的地方。如果你仔细观察,这个小丑五官的变化只是形状的变化,眼睛变大,嘴巴变大,鼻子变大,但特别的是这个变化不是瞬间变化,而是有过渡性的,这里面有一些算法,这就是最让人发愁的地方。幸运的是,这算法技术都非常的成熟,不需要我们来思考,在这些动画引擎库里都把这些技术封装成了非常简单方便的接口。下面我们来看看如何让动起来。


左眼的动画
  1. var leftEyeTween = new Kinetic.Tween({
  2.         node: leftEye,
  3.         duration: 1,
  4.         easing: Kinetic.Easings.ElasticEaseOut,
  5.         y: -100,
  6.         points: [0, 200, 50, 150, 100, 200, 50, 200]
  7.       });
复制代码
右眼的动画
  1. var rightEyeTween = new Kinetic.Tween({
  2.         node: rightEye,
  3.         duration: 1,
  4.         easing: Kinetic.Easings.ElasticEaseOut,
  5.         y: -100,
  6.         points: [0, 200, 50, 150, 100, 200, 50, 200]
  7.       });
复制代码
鼻子的动画
  1. var noseTween = new Kinetic.Tween({
  2.         node: nose,
  3.         duration: 1,
  4.         easing: Kinetic.Easings.ElasticEaseOut,
  5.         y: -100,
  6.         points: [220, 280, sw/2, 200, sw-220,280]
  7.       });
复制代码
嘴巴的动画
  1. var mouthTween = new Kinetic.Tween({
  2.         node: mouth,
  3.         duration: 1,
  4.         easing: Kinetic.Easings.ElasticEaseOut,
  5.         points: [100, 250, sw/2, 250, sw - 100, 250, sw/2, sh-20]
  6.       });
复制代码
        这些代码非常的简单,而且变量名能自释其意。稍微有点经验的程序员想看懂这些代码应该不难。基本每段代码都是让你提供一些点,指定动画动作的衰退模式和持续时间。


完整的动画代码
  1. <!DOCTYPE HTML>
  2. <html>
  3.   <head>
  4.     <style>
  5.       body {
  6.         margin: 0px;
  7.         padding: 0px;
  8.       }
  9.       #container {
  10.         background-color: black;
  11.       }
  12.     </style>
  13.   </head>
  14.   <body>
  15.     <div id="container"></div>
  16.     <script src="/js/lib/kinetic-v5.0.1.min.js?0d64e4"></script>
  17.     <script defer="defer">
  18.       var sw = 578;
  19.       var sh = 400;
  20.       var stage = new Kinetic.Stage({
  21.         container: 'container',
  22.         width: 578,
  23.         height: 400
  24.       });
  25.       var layer = new Kinetic.Layer({
  26.         y: -30
  27.       });

  28.       var leftEye = new Kinetic.Line({
  29.         x: 150,
  30.         points: [0, 200, 50, 190, 100, 200, 50, 210],
  31.         tension: 0.5,
  32.         closed: true,
  33.         stroke: 'white',
  34.         strokeWidth: 10     
  35.       });

  36.       var rightEye = new Kinetic.Line({
  37.         x: sw - 250,
  38.         points: [0, 200, 50, 190, 100, 200, 50, 210],
  39.         tension: 0.5,
  40.         closed: true,
  41.         stroke: 'white',
  42.         strokeWidth: 10   
  43.       });

  44.       var nose = new Kinetic.Line({
  45.         points: [240, 280, sw/2, 300, sw-240,280],
  46.         tension: 0.5,
  47.         closed: true,
  48.         stroke: 'white',
  49.         strokeWidth: 10
  50.       });

  51.       var mouth = new Kinetic.Line({
  52.         points: [150, 340, sw/2, 380, sw - 150, 340, sw/2, sh],
  53.         tension: 0.5,
  54.         closed: true,
  55.         stroke: 'red',
  56.         strokeWidth: 10
  57.       });

  58.       layer.add(leftEye)
  59.            .add(rightEye)
  60.            .add(nose)
  61.            .add(mouth);

  62.       stage.add(layer);

  63.       // tweens

  64.       var leftEyeTween = new Kinetic.Tween({
  65.         node: leftEye,
  66.         duration: 1,
  67.         easing: Kinetic.Easings.ElasticEaseOut,
  68.         y: -100,
  69.         points: [0, 200, 50, 150, 100, 200, 50, 200]
  70.       });

  71.       var rightEyeTween = new Kinetic.Tween({
  72.         node: rightEye,
  73.         duration: 1,
  74.         easing: Kinetic.Easings.ElasticEaseOut,
  75.         y: -100,
  76.         points: [0, 200, 50, 150, 100, 200, 50, 200]
  77.       });

  78.       var noseTween = new Kinetic.Tween({
  79.         node: nose,
  80.         duration: 1,
  81.         easing: Kinetic.Easings.ElasticEaseOut,
  82.         y: -100,
  83.         points: [220, 280, sw/2, 200, sw-220,280]
  84.       });

  85.       var mouthTween = new Kinetic.Tween({
  86.         node: mouth,
  87.         duration: 1,
  88.         easing: Kinetic.Easings.ElasticEaseOut,
  89.         points: [100, 250, sw/2, 250, sw - 100, 250, sw/2, sh-20]
  90.       });

  91.       stage.getContainer().addEventListener('mouseover', function() {
  92.         leftEyeTween.play();
  93.         rightEyeTween.play();
  94.         noseTween.play();
  95.         mouthTween.play();
  96.       });

  97.       stage.getContainer().addEventListener('mouseout', function() {
  98.         leftEyeTween.reverse();
  99.         rightEyeTween.reverse();
  100.         noseTween.reverse();
  101.         mouthTween.reverse();
  102.       });

  103.     </script>
  104.   </body>
  105. </html>
复制代码


观看演示


       我相信你已经在3三分钟内看完并看懂了这个动画的制作过程和原理。当然,这个动画很简单,我们这里只是粗浅的讲解一些HTML5画布(Canvas)动画技术的皮毛。如果想真正的成为Web动画告诉,那你还需要做很多的努力。但如果你只是业余爱好,我相信这已经足够让你骄傲了。




上一篇:LESS-Middleware:Node.js 和 LESS 的完美搭配 下一篇:HTML5中缩略词标记的重要作用

相关文章

最新文章