HTML5最新版参考手册
HTML5是现在网站建设里头最厉害的技术之一，它一直在不断升级改进。最新版本的HTML5参考手册里头都有各种各样标签、属性、API啥的详细介绍，能帮大家更轻松地用这个技术去做漂亮的网页。下面文章就来给大家看看这本手册里面的东西，还会教你们怎么用开源的Web动效工具库Kinetic。
开源Web动画工具包Kinetic
Kinetic这货就是个能让你弄出各式各样好看的网页动画的开源软件，咱们这节课就来看看怎么用它做一个会动的小丑脸。这个动画可以根据鼠标点击改变五官，展示出HTML5和动画技术的神奇之处！
绘制小丑脸五官
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
});
首先，就是要画小丑的五官，也就是眼睛跟嘴巴咯。接下来，你得分别写一下怎么画出左边的眼睛、右边的眼睛还有嘴巴。这部分就得靠Kinetic工具包这个好帮手了！你只需要在代码里给它们设定颜色啊、宽度什么的，就能成功搞定小丑的五官~
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
});
咱们接下来就是要把那个小丑面具的五官动起来，跟着用户鼠标的动作走。这种互动式的动画肯定能吸引大家眼球，提高你玩游戏/浏览网页的愉悦感！我们要通过改变眼睛、鼻子和嘴巴的形状来弄出那种渐变的效果，让小丑看上去逼真又好玩儿。
动画原理与算法
这些动画效果用到的算法和技术，包括衰减模式和持续时间这些。用Kinetic工具包做动画时，这些都给简化成了一套好上手的操作界面。只要你告诉它关键帧和参数，就能做出炫酷的动画效果来。这样的操作方式让做动画真的轻松多！
深入理解Canvas动画技术
HTML5里那叫Canvas的东西能让我们直接在网页上画图，用JavaScript搭配还能做出各种炫酷的动态效果！学会这个Canvas动画技能后，咱们就能玩转Web前端开发中的关键环节，让用户看到的网页更有趣味性！
进阶学习与应用
除了刚才提到的小丑脸小动画，其实网上还有好多好玩的动画等你来玩！比如Canvas、SVG这些东东，再加上一些好用的开源工具像Kinetic、GreenSock什么的，就能做出更炫酷的互动效果！
总结与展望
var leftEyeTween = new Kinetic.Tween({
node: leftEye,
duration: 1,
easing: Kinetic.Easings.ElasticEaseOut, y: -100,
points: [0, 200, 50, 150, 100, 200, 50, 200]
});
今天我们来讲讲HTML5最新版参考手册和Kinetic Web动画工具包这两样东西，帮你更好地理解Web前端开发中的那些神秘词汇——比如CSS3，Canvas什么的，甚至是朴实无华的Web动画，让你不再对它们感到陌生。记住，Web动画可是网页设计里的重头戏，能让你的网站不仅好看，还好用！
var rightEyeTween = new Kinetic.Tween({
node: rightEye,
duration: 1,
easing: Kinetic.Easings.ElasticEaseOut, y: -100,
points: [0, 200, 50, 150, 100, 200, 50, 200]
});
曾经有没有想过自己动手做一个超级炫酷的网页？你觉得什么样的网站应该用到web动画面元素？
var noseTween = new Kinetic.Tween({
node: nose,
duration: 1,
easing: Kinetic.Easings.ElasticEaseOut, y: -100,
points: [220, 280, sw/2, 200, sw-220,280]
});
评论0