pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

三分鐘HTML5畫布(Canvas)動畫教程

html5教程 html5模板網
通常大部分Web程序員平時的工作只是開發一些常規的網站、信息化辦公系統等。在他們的眼里，Web游戲動畫開發程序員似乎神奇的多，Web游戲動畫明顯比普通的Web應用要靈活，更注重交
       通常大部分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.       });

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

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

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

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

  63.       layer.add(leftEye)
  64.            .add(rightEye)
  65.            .add(nose)
  66.            .add(mouth);

  68.       stage.add(layer);

  70.       // tweens

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

  80.       var rightEyeTween = new Kinetic.Tween({
  81.         node: rightEye,
  82.         duration: 1,
  83.         easing: Kinetic.Easings.ElasticEaseOut,
  84.         y: -100,
  85.         points: [0, 200, 50, 150, 100, 200, 50, 200]
  86.       });

  88.       var noseTween = new Kinetic.Tween({
  89.         node: nose,
  90.         duration: 1,
  91.         easing: Kinetic.Easings.ElasticEaseOut,
  92.         y: -100,
  93.         points: [220, 280, sw/2, 200, sw-220,280]
  94.       });

  96.       var mouthTween = new Kinetic.Tween({
  97.         node: mouth,
  98.         duration: 1,
  99.         easing: Kinetic.Easings.ElasticEaseOut,
  100.         points: [100, 250, sw/2, 250, sw - 100, 250, sw/2, sh-20]
  101.       });

  103.       stage.getContainer().addEventListener('mouseover', function() {
  104.         leftEyeTween.play();
  105.         rightEyeTween.play();
  106.         noseTween.play();
  107.         mouthTween.play();
  108.       });

  110.       stage.getContainer().addEventListener('mouseout', function() {
  111.         leftEyeTween.reverse();
  112.         rightEyeTween.reverse();
  113.         noseTween.reverse();
  114.         mouthTween.reverse();
  115.       });

  117.     </script>
  118.   </body>
  119. </html>
復制代碼


觀看演示


       我相信你已經在3三分鐘內看完并看懂了這個動畫的制作過程和原理。當然，這個動畫很簡單，我們這里只是粗淺的講解一些HTML5畫布(Canvas)動畫技術的皮毛。如果想真正的成為Web動畫告訴，那你還需要做很多的努力。但如果你只是業余愛好，我相信這已經足夠讓你驕傲了。




【網站聲明】本站除付費源碼經過測試外，其他素材未做測試，不保證完整性，網站上部分源碼僅限學習交流，請勿用于商業用途。如損害你的權益請聯系客服QQ：2655101040 給予處理，謝謝支持。

相關文檔推薦

由于實際運行環境是在瀏覽器中，因此性能還取決于JavaScript解釋器的效率，指定的FPS幀速在低性能解釋器中可能不會達到，所以這部分不是開發者能夠決定的，開發者能作的是盡可能通
本文將使用HTML5提供的VideoAPI做一個自定義的視頻播放器，需要用到HTML5提供的video標簽、以及HTML5提供的對JavascriptAPI的擴展。，HTML5中國，中國最大的HTML5中文門戶。
隨著 Hybrid 應用的豐富，HTML5 工程師們已經不滿足于把桌面端體驗簡單移植到移動端，他們覬覦移動原生應用人性化的操作體驗，特別是原生應用與生俱來的豐富的手勢系統。HTML5 沒有提
你想要在自己網站上分享一個產品，或者是一個作品集，又或者僅僅只是一個靈感。在你發布到網上之前，你想讓它看起來有吸引力，專業，或者至少得看起來像那么回事。那么你接下
H5廣告，包括H5廣告的設計流程，究竟有什么講究，和階段。為了能幫助更多的人了解H5廣告，我專門做了一個講義。同時，也讓我意外的收到了非常好反饋和認!這是對我的極大鼓勵!我的
本文主要內容有：框架與組件、構建生態、開發技巧與調試、html、css與重構、native/hybrid/桌面開發、前端/H5優化、全棧/全端開發、研究實驗、數據分析與監控、其它軟技能、前端技術網
主站蜘蛛池模板： ISO9001认证咨询_iso9001企业认证代理机构_14001|18001|16949|50430认证-艾世欧认证网 | 太平洋亲子网_健康育儿 品质生活| 不锈钢复合板厂家_钛钢复合板批发_铜铝复合板供应-威海泓方金属复合材料股份有限公司 | 防弹玻璃厂家_防爆炸玻璃_电磁屏蔽玻璃-四川大硅特玻科技有限公司 | 四合院设计_四合院装修_四合院会所设计-四合院古建设计与建造中心1 | WTB5光栅尺-JIE WILL磁栅尺-B60数显表-常州中崴机电科技有限公司 | 厦门ISO认证|厦门ISO9001认证|厦门ISO14001认证|厦门ISO45001认证-艾索咨询专注ISO认证行业 | 科普仪器菏泽市教育教学仪器总厂 | 阁楼货架_阁楼平台_仓库仓储设备_重型货架_广州金铁牛货架厂 | 动库网动库商城-体育用品专卖店:羽毛球,乒乓球拍,网球,户外装备,运动鞋,运动包,运动服饰专卖店-正品运动品网上商城动库商城网 - 动库商城 | 洁净实验室工程-成都手术室净化-无尘车间装修-四川华锐净化公司-洁净室专业厂家 | 作文导航网_作文之家_满分作文_优秀作文_作文大全_作文素材_最新作文分享发布平台 | uv固化机-丝印uv机-工业烤箱-五金蚀刻机-分拣输送机 - 保定市丰辉机械设备制造有限公司 | 高防护蠕动泵-多通道灌装系统-高防护蠕动泵-www.bjhuiyufluid.com慧宇伟业（北京）流体设备有限公司 | EFM 022静电场测试仪-套帽式风量计-静电平板监测器-上海民仪电子有限公司 | 齿轮减速机电机一体机_齿轮减速箱加电机一体化-德国BOSERL蜗轮蜗杆减速机电机生产厂家 | 一路商机网-品牌招商加盟优选平台-加盟店排行榜平台 | 灌装封尾机_胶水灌装机_软管灌装封尾机_无锡和博自动化机械制造有限公司 | 柔性测斜仪_滑动测斜仪-广州杰芯科技有限公司 | 西门子伺服电机维修,西门子电源模块维修,西门子驱动模块维修-上海渠利 | 齿轮减速机_齿轮减速电机-VEMT蜗轮蜗杆减速机马达生产厂家瓦玛特传动瑞环机电 | 煤矿人员精确定位系统_矿用无线通信系统_煤矿广播系统 | 120kv/2mA直流高压发生器-60kv/2mA-30kva/50kv工频耐压试验装置-旭明电工 | 南京兰江泵业有限公司-水解酸化池潜水搅拌机-絮凝反应池搅拌机-好氧区潜水推进器 | 上海新光明泵业制造有限公司-电动隔膜泵,气动隔膜泵,卧式|立式离心泵厂家 | 布袋除尘器|除尘器设备|除尘布袋|除尘设备_诺和环保设备 | 冷水机-工业冷水机-冷水机组-欧科隆品牌保障 | 加气混凝土砌块设备,轻质砖设备,蒸养砖设备,新型墙体设备-河南省杜甫机械制造有限公司 | 在线浊度仪_悬浮物污泥浓度计_超声波泥位计_污泥界面仪_泥水界面仪-无锡蓝拓仪表科技有限公司 | 全国国际化学校_国际高中招生_一站式升学择校服务-国际学校网 | 法钢特种钢材（上海）有限公司 - 耐磨钢板、高强度钢板销售加工 阀门智能定位器_电液动执行器_气动执行机构-赫尔法流体技术(北京)有限公司 | bkzzy在职研究生网 - 在职研究生招生信息咨询平台 | 耐火浇注料-喷涂料-浇注料生产厂家_郑州市元领耐火材料有限公司 耐力板-PC阳光板-PC板-PC耐力板 - 嘉兴赢创实业有限公司 | Magnescale探规,Magnescale磁栅尺,Magnescale传感器,Magnescale测厚仪,Mitutoyo光栅尺,笔式位移传感器-苏州连达精密量仪有限公司 | 医疗仪器模块 健康一体机 多参数监护仪 智慧医疗仪器方案定制 血氧监护 心电监护 -朗锐慧康 | 臭氧实验装置_实验室臭氧发生器-北京同林臭氧装置网 | 东莞螺杆空压机_永磁变频空压机_节能空压机_空压机工厂批发_深圳螺杆空压机_广州螺杆空压机_东莞空压机_空压机批发_东莞空压机工厂批发_东莞市文颖设备科技有限公司 | 金属检测机_金属分离器_检针验针机_食品药品金属检探测仪器-广东善安科技 | 美侍宠物-专注宠物狗及宠物猫训练|喂养|医疗|繁育|品种|价格 | 澳威全屋定制官网|极简衣柜十大品牌|衣柜加盟代理|全屋定制招商 百度爱采购运营研究社社群-店铺托管-爱采购代运营-良言多米网络公司 | 无缝方管|无缝矩形管|无缝方矩管|无锡方管厂家 |