使用html5动画技术使官网更有吸引力

发送到手机
使用"扫一扫"即可发送至手机

通常大部分Web程序员平时的工作只是开发一些常规的网站、信息化办公系统等。在他们的眼里,Web游戏动画开发程序员似乎神奇的多,Web游戏动画明显比普通的Web应用要灵活,更注重交互和视觉冲击,而动画动作、做图配色等方面更是外行。

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

这是我们的示例,一个笑脸:

h5_1.png

鼠标移动到图片上的时候,有了动画效果:

h5_2.png

下面我们就用三分钟时间,用很少的几行代码把这个动画做出来。你只需要了解很少的几个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工具包。在页面的头部,我们需要这样引用它:

<script type="text/javascript" src="/js/kinetic-v5.0.1.min.js"></script>

其它几个分别是几个关键点,线条弹性,颜色,宽度等。这些都很容易理解。

第二步,让图动起来

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

左眼的动画:

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动画告诉,那你还需要做很多的努力。

使用html5动画技术使官网更有吸引力

使用html5动画技术使官网更有吸引力

分享: