KC Thought

《 做技術的人切忌因為個人一時喜好而瞎折騰 》

https://www.zhihu.com/question/63222133/answer/206812503

➊ 做技術的人切忌因為個人一時喜好而瞎折騰。話語權越大責任越大，改門的決定不能輕率。

➋ 技術這種東西夠用就行了，最終還是為了業務服務，只要業務能跑，真的沒有必要開坑折騰。

解法

原本示範的影片在output中只寫了

output: {              path: ( './dist' ),      filename: "app.bundle.js" },

結果範例影片是用2.0.0版的webpack 沒想到現在用了2.4.1，範例教的就過不了。後來查了一下網路的文件，要改成如下面的寫法

相容於IE11及以下的IE判斷法

 var ua = window.navigator.userAgent;  var msie = ua.indexOf("MSIE ");  if (msie > 0){    radio.value = getValueFromRadioButton('radioBtnName')  }

function getValueFromRadioButton(name) {

  //Get all elements with the name   var buttons = document.getElementsByName(name);   for(var i = 0; i < buttons.length; i++) {      //Check if button is checked      var button = buttons[i];      if(button.checked) {         //Return value         return button.value;      }   }   //No radio button is selected.   return null; }

客戶要求一個內部的EDM檔案，格式為eml，那在mac上怎麼製作呢？

一樣先切好html檔

以safari開啟切好的html檔

從safari中「檔案 ＞ 分享 ＞ 郵寄此網頁」，進入到mac的郵件軟體。

寄給自己

打開收到的信，「檔案 ＞ 儲存為 ＞ 郵件檔案格式」

很有GAME感的線上字型處理應用

在做2.5D地圖的FB GAME時，如果要用3D的物件放個東西到地圖上，有透視的東西往往會格格不入。一般來說我們會在3D場景中，create一個3d的camera，只要在下面再多加一行就好了。

code如下：

var Ocam:Camera3D = new Camera3D(); Ocam.lens = new OrthographicLens(projectionHeight);

為什麼使用EnselJS

以Flash使用者的使用經驗來看，這一套是最接近Flash的使用方式；

使用語法與習慣接近，適合老Flasher來進入html5的領域… XD

其實還有一套叫 flashJS，來不及看，所以先用看過的…

EnselJS的Class分類

stage stage包Canvas，DisplayObject被addChild到stage中，stage不斷的在update()或tick()中更新內容； canvas = document.getElementById("canvas的ID"); stage = new Stage(canvas);

類似Flash中的DisplayObject類別 Container：AS3是DisplayObjectContainer，把各DisplayObject再包起來再群組的工具 Bitmap：放圖片和影片用的 BitmapAnimation：放連結圖檔動畫（SpriteSheet）用的 Text：文字 Shape：放graphics畫出來的物件用的。 stage.addChild( DisplayObject )

類似Flash中MovieClip的方法類別，以下兩種皆不是DisplayObject，需要置放進對應的容器才能夠被addChild到stage中 graphics SpriteSheet

和Flash AS3的比對來學習>就動畫的使用上來比對說明

Flash中使用MovieClip來做動畫 使用play()、gotoAndStop()、gotoAndPlay()的方式來控制MovieClip

EnselJS使用SpriteSheet來製作類似MovieClip的物件, 也使用gotoAndPlay()與gotoAndPlay()相同的語法, 讓原本使用flash的使用者覺得親切

範例1，使用SpriteSheet來製作一個人物走路的動畫、使用BitmapAnimation做一個容器將SpriteSheet置入，再用addChild的方式加載進stage中 在gotoAndPlay()這方法中使用呼叫frame數的方法來控制 SpriteSheet http://192.168.43.33/~apple/EaselJStest/aniTest1.html 

使用Zoe來匯出連續圖檔 動畫全放在主場景上 使用grahpic元件，拉足影格 > 這種作法可能也可以轉出用AS創作的動畫 

範例2，使用function tick來不斷的改變元件的屬性，如同flash的onEnterFrame、setInterval等事件與方法。 http://192.168.43.33/~apple/EaselJStest/aniTest2.html 

範例3，加入判斷式來改變運行方向 http://192.168.43.33/~apple/EaselJStest/aniTest3.html 

範例4，在gotoAndPlay()這方法中使用flag的呼叫的方式來控制SpriteSheet，SpriteSheet對應的寫法。 使用DisplayObject中scaleX的方式來做物件的鏡射  http://192.168.43.33/~apple/EaselJStest/aniTest4.html 

TweenJS

主語法： Tween.get( 對像, {loop:true/false}) .to({屬性: 值} , 時間/豪秒)  .wait(時間/豪秒)  http://192.168.43.33/~apple/html5Test/aniTest5.html

和Flash AS3的比對來學習>就互動的方式來比對說明

滑鼠的控制Event：onPress、onRelease、onClick、onMouseOver、onMouseUp DisplayObject.事件類別 = function(){ }

http://192.168.43.33/~apple/html5Test/ctrlTest/helloWorld.html btn.onPress = showText  showText=function(){…} 

http://192.168.43.33/~apple/html5Test/test05.html for迴圏 (function(target) {      bmp.onPress = function(evt) {      } })(bmp) 

參考資源

EnselJS http://easeljs.com/

TweenJS http://tweenjs.com/

動畫方式 http://blogs.msdn.com/b/davrous/archive/2011/07/21/html5-gaming-animating-sprites-in-canvas-with-easeljs.aspx

EaselJS新手上路 http://blog.eddie.com.tw/2011/09/10/introduction-to-easeljs/

件者Grant Skinner http://gskinner.com/blog