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優化、全棧/全端開發、研究實驗、數據分析與監控、其它軟技能、前端技術網
主站蜘蛛池模板： YAGEO国巨电容|贴片电阻|电容价格|三星代理商-深圳市巨优电子有限公司 | 洗地机_全自动洗地机_手推式洗地机【上海滢皓环保】 | 托盘租赁_塑料托盘租赁_托盘出租_栈板出租_青岛托盘租赁-优胜必达 | 广州番禺搬家公司_天河黄埔搬家公司_企业工厂搬迁_日式搬家_广州搬家公司_厚道搬迁搬家公司 | Type-c防水母座|贴片母座|耳机接口|Type-c插座-深圳市步步精科技有限公司 | ICP备案查询_APP备案查询_小程序备案查询 - 备案巴巴 | POM塑料_PBT材料「进口」聚甲醛POM杜邦原料、加纤PBT塑料报价格找利隆塑料 | 欧洲MV日韩MV国产_人妻无码一区二区三区免费_少妇被 到高潮喷出白浆av_精品少妇自慰到喷水AV网站 | 板式换热器_板式换热器价格_管式换热器厂家-青岛康景辉 | 山东led显示屏,山东led全彩显示屏,山东LED小间距屏,临沂全彩电子屏-山东亚泰视讯传媒有限公司 | 碳化硅,氮化硅,冰晶石，绢云母，氟化铝，白刚玉,棕刚玉，石墨,铝粉,铁粉,金属硅粉,金属铝粉,氧化铝粉,硅微粉,蓝晶石,红柱石,莫来石,粉煤灰,三聚磷酸钠,六偏磷酸钠,硫酸镁-皓泉新材料 | 档案密集架,移动密集架,手摇式密集架,吉林档案密集架-厂家直销★价格公道★质量保证 | 深圳货架厂家_金丽声精品货架_广东金丽声展示设备有限公司官网 | 铝扣板-铝方通-铝格栅-铝条扣板-铝单板幕墙-佳得利吊顶天花厂家 elisa试剂盒价格-酶联免疫试剂盒-猪elisa试剂盒-上海恒远生物科技有限公司 | 制冷采购电子商务平台——制冷大市场| 山东彩钢板房,山东彩钢活动房,临沂彩钢房-临沂市贵通钢结构工程有限公司 | 全自动烧卖机厂家_饺子机_烧麦机价格_小笼汤包机_宁波江北阜欣食品机械有限公司 | 十二星座查询（性格特点分析、星座运势解读） - 玄米星座网 | 江苏密集柜_电动_手动_移动_盛隆柜业江苏档案密集柜厂家 | 酒店厨房设计_中央厨房设计_北京商用厨房设计公司-奇能商厨 | 衢州装饰公司|装潢公司|办公楼装修|排屋装修|别墅装修-衢州佳盛装饰 | 无硅导热垫片-碳纤维导热垫片-导热相变材料厂家-东莞市盛元新材料科技有限公司 | 变位机,焊接变位机,焊接变位器,小型变位机,小型焊接变位机-济南上弘机电设备有限公司 | 沈阳建筑设计公司_加固改造设计_厂房设计_设计资质加盟【金辉设计】 | 高铝砖-高铝耐火球-高铝耐火砖生产厂家-价格【荣盛耐材】 | 杭州画室_十大画室_白墙画室_杭州美术培训_国美附中培训_附中考前培训_升学率高的画室_美术中考集训美术高考集训基地 | 艺术涂料_进口艺术涂料_艺术涂料加盟_艺术涂料十大品牌 -英国蒙太奇艺术涂料 | 大米加工设备|大米加工机械|碾米成套设备|大米加工成套设备-河南成立粮油机械有限公司 | 华东师范大学在职研究生招生网_在职研究生招生联展网 | 佛山商标注册_商标注册代理|专利注册申请_商标注册公司_鸿邦知识产权 | 基本型顶空进样器-全自动热脱附解吸仪价格-AutoHS全模式-成都科林分析技术有限公司 | 斗式提升机,斗式提升机厂家-淄博宏建机械有限公司 | 电磁铁_推拉电磁铁_机械手电磁吸盘电磁铁厂家-广州思德隆电子公司 | 高压无油空压机_无油水润滑空压机_水润滑无油螺杆空压机_无油空压机厂家-科普柯超滤(广东)节能科技有限公司 | 北京模型公司-工业模型-地产模型-施工模型-北京渝峰时代沙盘模型制作公司 | 轻型地埋电缆故障测试仪,频响法绕组变形测试仪,静荷式卧式拉力试验机-扬州苏电 | 六维力传感器_三维力传感器_二维力传感器-南京神源生智能科技有限公司 | 产业规划_产业园区规划-产业投资选址及规划招商托管一体化服务商-中机院产业园区规划网 | 高柔性拖链电缆_卷筒电缆_耐磨耐折聚氨酯电缆-玖泰特种电缆 | 珠光砂保温板-一体化保温板-有釉面发泡陶瓷保温板-杭州一体化建筑材料 | 西安标准厂房_陕西工业厂房_西咸新区独栋厂房_长信科技产业园官方网站 |