chapter 2 技術創意形式

• 動畫形式
• 移動裝置 Web API 詳解
• WebVR
• 創意點

2.1 動畫形式

2.1.1 CSS3

CSS3 Cascading Style Sheets 層疊樣式表。 CSS3是CSS技術的一個升級版本，是由Adobe、Apple、Google、HP、IBM、Microsoft、Mozilla及Opera等諸多WEB巨頭聯合組織的一個名為“W3C”的組織共同協商策劃的。
優勢：
易於編寫，不懂JavaScript、canvas及SVG一樣能寫動畫。
在效能上會稍微好一點，瀏覽器一般都對CSS3動畫做了一些優化。
能夠非常容易的實現一些三維效果。
劣勢：
相容性有一些切確，在低版本瀏覽器上無法播放。
動畫控制方面不夠靈活，如精確播放和曲線運動等。
相對於SVG和WebGL，在向量和3D方面比較欠缺。

CSS3有三個動畫屬性：Transform、Transition、Animation。

.demo{
    transition-property:all;//指定當元素其中一個屬性改變時間執行transition效果
    transition-duration:5s;//指定元素轉換過程的持續時間
    transition-timing-function:ease;//允許你根據時間的推進去改變屬性值的變換速率
    transition-delay：0.5s;//指定一個動畫開始執行的時間
}
//可以合併為一下一段程式碼：
transition:all 5s ease 0.5s;
transition:transition-property
 
 transition-duration transition-timing-function transition-delay;

• Animation（動畫）：

//Keyframe
@keyframs Name{
    from{屬性名:屬性值;}
    to{屬性名:屬性值;}
}
//百分比寫法
@keyframs Name{
    0%{屬性名:屬性值;}
    100%{屬性名:屬性值;}
}
//Animation寫法
.demo{
    animation-name:"name";//動畫屬性名稱
    animation-duration:10s;//動畫持續時間
    animation-timing-function
 
:ease;//動畫頻率
    animation-delay:2s;//動畫延遲時間
    animation-iteration-count:10;//定義迴圈次數，infinite無限次
    animation-direction:alternate;//定義動畫方式
}
//合併為一段程式碼
animation: 'name' 10s ease 2s 10 alternate;

2.1.2 幀動畫

幀動畫的原理是將動作分解為很多張具有不同內容的圖片，按順序快速播放這些圖片，使其連續播放形成動畫。
小時候會在一本書的每一頁都畫上形狀，然後快速地翻動書頁，就會出現連續的動畫。
因為幀動畫的幀序列內容一樣，最終輸出的圖片檔案體積可能非常大，這樣很大程度上影響開啟頁面的速度，進而影響使用者體驗。
幀動畫的優勢：具有非常大的靈活性，可以指定幀動畫的播放次數，可以自由控制播放的次數，可以相容大部分瀏覽器，所能表現的動畫可比CSS3的Animation細膩得多。
目前位於移動端頁面的幀動畫形式主要有3種控制方式：

• CSS3動畫來控制；
• 通過JavaScript控制canvas；
• 通過JavaScript控制CSS。

》通過CSS3控制：
將動畫過程分5個階段完成，使靜態圖片首尾相接，則分別在0%，25%，50%，75%及100%執行bacground-position改變即可，實現程式碼如下：

.box{
    width:225px;
    height:95px;
    background:url(images/garen_skill.png) 0 0 no-repeat;
    bacground-size:900px 95px;
    -webkit-animation: run 250ms step(1) infinite 0s;
}
@-webkit-keyframes run{
    0%{
        bacground-position:0 0;
    }
    25%{
        bacground-position:-225px 0;
    }
    50%{
        bacground-position:-450px 0;
    }
    75%{
        bacground-position:-675px 0;
    }
    100%{
        bacground-position:-900px 0;
    }
}

》通過JavaScript來控制canvas

//實現思路：封裝一個drawImage方法，設定一個定時器，在定時器中執行這個方法，每個多少秒重複執行。方法中設定一個半兩，自增同時通過變數來改變圖片座標，使得每一個執行圖片都會變化。設定一個極限值，變數達到極限值時，賦值0，重新初始化。

var ctx = document.getElmentById("wake").getContext("2d")
ctx.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

//img:規定要使用的影象、畫布、及視訊
//sx:可選。開始剪下的x座標
//sy:可選。開始剪下的y座標
//swidth:可選。被剪下影象的寬度。
//sheight:可選。被剪下影象的高度。
//x:在畫布上放置影象的x標位置
//y:在畫布上放置影象的y標位置
//width:可選。要使用的影象的寬度
//height:可選。要使用的影象的高度

》通過JavaScript來控制CSS（比較常見）：
通過JavaScript不斷改變圖片的background-position來實現幀動畫的播放。
實現思路同canvas類似，封裝方法，設定定時器，設定邊界變數。不同的是是去通過style屬性去改變background-position。

2.1.3 Canvas

動畫原理：
動畫的本質就是一連串的影象，每個影象之間的 差別非常微小，並且他們以極快的速度連續顯示。
對於canvas，就是在螢幕上繪製一些物件，然後清除螢幕上的物件，接著快速在歐慕尚繪製其他物件—-更新影象。
使用Flash動畫編輯器

• 在Flash CS6版本里面支援通過“安裝外掛”來匯出HTML5型別的canvas檔案，在動畫編輯上 Flash IDE的HTML5 canvas檔案型別很好地解決了我們前面提到的問題。它將動畫製作完全視覺化，沿用了Flash動畫編輯器，製作canvas動畫跟原先製作Flash動畫幾乎沒有差別，動畫表現直接交由動畫設計師來完成，前端無須關心動畫表現細節。
  動畫製作的注意事項：
  》圖片、元件命名不能使用中文
  》少用大範圍alpha漸變動畫和大範圍alpha漸變
  》慎用補間動畫自定義緩入緩出
  》幀從0開始數起
  》分佈載入
  》合成雪碧圖

<canvas width="400" height="400" id="cas"></canvas>
<script>
    var cas = document.querySelector('#cas');
    var ctx = cas.getContext("2d");
    ctx.moveTo(100, 200); 
    ctx.lineTo(200, 300); 
    ctx.lineTo(300, 100); 
    ctx.lineTo(-100, 100); 
    ctx.fill(); 
</script>

//弧度角度轉換
<script>
function toAngle(radian) {
        return radian * 180 / Math.PI;
    }

function toRadian(angle) {
        return angle * Math.PI / 180;
    }
</script>

//繪製圖片
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=new Image();
img.onload = function(){
ctx.drawImage(img,0,0);
};
img.src="img_flwr.png";
</script>

2.1.4 SVG

• 常用元素及屬性
  SVG 是一個XML檔案，具備獨立了的文件流，整個程式碼包含在一個 <svg>標籤中。
  SVG 元素一般分為圖形元素、動畫元素、容器元素、描述性元素、濾鏡元素、漸變元素及文字內容元素；
  SVG 屬性一般分為圖形屬性、動畫屬性、條件處理屬性、核心屬性、文件事件屬性、過濾器原始屬性、外觀屬性、變換函式屬性及 Xlink 屬性等。

 <svg width="1000" height="1000" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <path d="M 100 100 L 300 100 L 200 300 z" fill="skyblue" stroke="blue" stroke-width="1" />
        <!-- 路徑 -->
        <circle cx="100" cy="300" r="50" fill="pink" stroke="deeppink" stroke-width="1" />
        <!-- 圓形 -->
        <ellipse cx="100" cy="300" rx="50" ry="20" fill="skyblue" stroke="blue" stroke-width="1" />
        <!-- 橢圓形 -->
        <ellipse cx="100" cy="300" rx="20" ry="50" fill="transparent" stroke="blue" stroke-width="1" />
        <!-- 橢圓形 -->
        <rect x="400" y="400" width="200" height="100" fill="green" />
        <!-- 矩形 -->
        <polygon points="60,20 100,40 100,80 60,100 20,80 20,40" fill="orange" stroke="yellow" stroke-width="1" />
        <!-- 多邊形 -->
        <polyline points="40,20 200,20 350,300 460,100 520,180 620,40" fill="none" stroke="red" stroke-width="1" />
        <!-- 折線 -->
        <line x1="10" y1="200" x2="400" y2="50" stroke="black" stroke-width="2" />
        <!-- 直線 -->
        <text x="50" y="500">I'm a line of text</text>
        <!-- 文字 -->
</svg>

2.1.5 Three.js

未完待續。。。