js曲線動畫源碼（js曲線圖）

• 1、js動畫效果代碼方法
• 2、如何使用Createjs來編寫HTML5遊戲TweenJS和Tick動畫
• 3、如何使用Tween.js各類原生動畫運動緩動演算法
• 4、如何用Paper.js製作網頁動畫
• 5、threejs–模型動畫線性控制

1.toggle():

toggle()方法除了模擬滑鼠連續單擊事件之外，同時會動態的隱藏改變當前元素的高度，寬度和不透明度，最終切換當前元素的可見狀態。如果元素可見，則切換隱藏狀態，如元素隱藏，切換可見狀態

2.fadeln()與fadeOut();

這兩個方法，實現了淡入和淡出的一個動畫效果，fadeln（）漸顯效果，fadeout（）漸隱效果，兩者結合使用，可把元素隱藏在按鈕中，在通過點擊事件顯示，兩方法只改變元素的透明度，不修改其他屬性

3.fadeToggle();

此方法會動態的改變當前元素的透明度，最終卻換當前元素的可見狀態。如果元素是可見的，則通過淡出效果切換隱藏；如果元素是隱藏的，則通過淡入效果切換可見狀態，不設置參數時，默認0.4秒內發生淡入與淡出的動畫效果

4.fadeTo() ;

fadeln()與fadeOut()方法都是漸隱漸顯，透明度從1到0，從0到1實現一個漸隱漸顯效果，而fadeToggle()方法則是可以控制1-0的透明度，為更好展示透明度的效果，可在頁面中創造一個下拉框，用於保存透明度值，操作下拉框去控制圖片透明度值

5.slideDown(); 與 slideUp() ;

slideDown()可改變元素高度，呈現一個滑動效果，由上往下滑動，直到顯示最終的當前元素，slideUp（）相反，由下往上滑動，直到隱藏最終的當前元素

6.slideToggle();

slideToggle()方法跟slideDown(); 與 slideUp() ;兩個方法有異曲同工之妙，同樣可改變元素的高度，不同於slideDown(); 與 slideUp() ; 的效果， 這個方法是通過點擊事情控制元素的隱藏和顯示

7.animate() ;

這個方法是自定義動畫效果的方法，高度，寬度，透明度，運行速度都是可通過自定義給屬性，這個方法只能改變可以取數字值的css屬性，如：大小，邊框，內外邊距，定位，字體，文本，背景，透明度。

8.stop() ;

停止動畫，stop（）方法能結束當前的動畫，並立即進入到下一個動畫。

createJs的由來，基礎什麼的就不說了，就直接說createJs的用法吧。

首先到createJs官網下載，createJs分成easelJs（圖形動畫）、preloadJs（文件載入）、soundJs（音頻控制）以及tweenJs（補間動畫）四部分，大家下載的時候，建議下載兩個文件，一個是壓縮版文件，用於項目中的引用，再下載個源碼文件，用於查看用法、API、demo等。因為樓主目前只用了easelJs和preloadJs，所以暫時就只說這兩個，其實就這兩個已經非常夠用了。

接下來開始分析代碼：

首先引入js文件

script src=”easeljs-0.7.1.min.js”/script

script src=”preloadjs-0.4.1.min.js”/script

然後進行舞台初始化操作：

function init(){

stage = new createjs.Stage(“cas”);

C_W = stage.canvas.width;

C_H = stage.canvas.height;

var manifest = [

{src:”image/man.png” , id:”man”},

{src:”image/ground.png” , id:”ground”},

{src:”image/bg.png” , id:”bg”},

{src:”image/high.jpg” , id:”high”},

{src:”image/coins.png” , id:”coin”}

]

loader = new createjs.LoadQueue(false);

loader.addEventListener(“complete” , handleComplete);

loader.loadManifest(manifest);

drawLoading();

}

上面就用到了preloadJs中的方法，實例化一個loader，把需要載入的圖片文件放在manifest裡面，進行載入，載入完成後調用回調handleCompelete函數：

function handleComplete(){ //當圖片素材load完後執行該方法

var manImage = loader.getResult(“man”),

lowground = loader.getResult(“ground”),

highground = loader.getResult(“high”),

bgImage = loader.getResult(“bg”),

coins = loader.getResult(“coin”);

sky = new createjs.Shape();

sky.graphics.bf(bgImage).drawRect(0,0,C_W,C_H);

sky.setTransform(0, 0, 1 , C_H/bgImage.height);

stage.addChild(sky);

man = createMan(200,326,manImage);

//該框為判定角色的判定區域

kuang = new createjs.Shape();

kuang.graphics.beginStroke(“rgba(255,0,0,0.5)”).drawRect(0 , 0 , man.size().w , man.picsize().h*1.5);

// stage.addChild(kuang);

mapHandle(lowground , highground , coins);

createjs.Ticker.timingMode = createjs.Ticker.RAF;//設置循環方法，可以是requestAnimationFrame或者是setTimeout

createjs.Ticker.setFPS(30);//舞台幀率控制

createjs.Ticker.addEventListener(“tick”, tick);//綁定舞台每一幀的邏輯發生函數

window.addEventListener(“keydown” , function(event){

event = event||window.event;

if(event.keyCode===32man.jumpNumman.jumpMax){

man.jump();

}

})

}

獲得載入完成後端的圖片數據就直接用loader.getResult就可以獲取了，跑酷遊戲需要一個背景，所以，我們實例化一個sky，然後進行點陣圖繪製，bf方法是beginBitmapFill的縮寫，該方法就是開始繪製點陣圖，後面的drawRect是點陣圖的繪製區域，區域當然是整個畫布啦，所以就是drawRect(0,0,C_W,C_H)。實例化出來sky後就直接添加到舞台stage裡面就行了。接下來是實例化一個角色，createMan方法後面有說，是自己封裝的。

然後進行舞台循環設置，上面有注釋了，就不說了。

使用緩動功能，您可以加快或放慢動畫的開頭或結尾速度，以獲得更加逼真或更加令人愉悅的效果。該技術用於修改 Flash 計算補間中的屬性關鍵幀之間的屬性值的方式。如果不使用緩動，Flash 在計算這些值時，會使對值的更改在每一幀中都一樣。如果使用緩動，則可以調整對每個值的更改程度，從而實現更自然、更複雜的動畫。緩動是應用於補間屬性值的數學曲線。補間的最終效果是補間和緩動曲線中屬性值範圍組合的結果。例如，在製作汽車經過舞台的動畫時，如果讓汽車從停止開始緩慢加速，然後在舞台的另一端緩慢停止，則動畫會顯得更逼真。如果不使用緩動，汽車將從停止立刻到全速，然後在舞台的另一端立刻停止。如果使用緩動，則可以對汽車應用一個補間動畫，然後使該補間緩慢開始和停止。一個未應用緩動的運動路徑。請注意幀沿路徑的均勻分布。已應用「停止並啟動（中）」緩動的同一運動路徑。請注意路徑末尾附近幀的濃度，產生更逼真的汽車加速和減速。可以在屬性檢查器或動畫編輯器中應用緩動。在屬性檢查器中應用的緩動將影響補間中包括的所有屬性。在動畫編輯器中應用的緩動可以影響補間的單個屬性、一組屬性或所有屬性。緩動可以簡單，也可以複雜。Flash 包含一系列的預設緩動，適用於簡單或複雜的效果。在動畫編輯器中，還可以創建自己的自定義緩動曲線。緩動的常見用法之一是在舞台上編輯運動路徑並啟用浮動關鍵幀以使每段路徑中的運行速度保持一致。然後可以使用緩動在路徑的兩端添加更為逼真的加速或減速。在向屬性曲線應用緩動曲線時，屬性曲線圖形區域中將顯示緩動曲線的可視疊加。通過將屬性曲線和緩動曲線顯示在同一圖形區域中，疊加使得在測試動畫時了解舞台上所顯示的最終補間效果更為方便。因為動畫編輯器中的緩動曲線可以很複雜，所以可以使用它們在舞台上創建複雜的動畫而無需在舞台上創建複雜的運動路徑。除空間屬性 X、Y 和 Z 外，還可以使用緩動曲線創建其他任何屬性的複雜補間。

這裡介紹一種簡單的編譯達到同樣的強大效果的動畫製作：

計算機喜歡乾淨簡潔。不管是報表，統計，或者函數曲線，他們總是使用簡潔明了的線條；而現實是，所有物理世界的物體是混沌的。樹葉離開枝丫，水珠四濺 ，花朵迎風搖曳 － 所有這些物理世界的互動感覺簡單，因為我們已經習慣這些。但是實際上哪怕是那一霎那的風，都是混沌的，她的演算法非常複雜。這篇文章裡面，我們要製作蒲公英種子微風舞動的動畫。

(Image: Arnoldius)

動畫製作的蒲公英沒有辦法模擬物理的複雜性，實際上她看上去更加自然如果我們不試圖去模擬。我們將要製作一朵給你同樣感覺的花朵但是省略了很多細節。

Paper.js

使用 canvas 標籤 製作簡單圖形. 創建你的canvas:（寬：300，高：300）

1

2

canvas id=”canvas” width=”300″ height=”300″/canvas

//加入JavaScript:

1

2

//定義二維動畫

var canvas = $(‘#canvas’)[0].getContext(“2d”);

1

2

3

4

5

6

7

8

9

// 05－06：圓心x＝100，圓心y＝100, 半徑＝15，初始角度＝0，結束＝360。,反時針。

canvas.beginPath();

canvas.arc(100, 100, 15, 0, Math.PI*2, true);

// 結束

canvas.closePath();

// 填色

canvas.fill();

掌握canvas的基本就很容易做這些，但是如果你要製作更加複雜的東西，你需要高級編譯語言像Paper.js

Paper.js 是一個 JavaScript庫用來製作繪圖和動畫， 一種Adobe Illustrator使用的基於Scriptographer的腳本語言 . 它自稱是「矢量圖腳本語言中的瑞士軍刀」（ 「The Swiss Army Knife of Vector Graphics Scripting,」 ），其中重點突出矢量。

圖形製作中有兩種：矢量圖和柵格圖。柵格圖就像你照相機拍出來的圖片，如果你放大看，就是顏色填充的方格。矢量圖是有點連線組成的。他們是不同的線條租和形狀組，根據不同的指令繪圖。如果用矢量圖，如圖，這個Z放大後還是線條光滑，色澤飽滿。相比較，左邊的柵格圖就很模糊了。

最近遇見一個比較有意思需求，需要將模型動畫像視頻一樣可以線性拖拽播放動畫進程、調節動畫播放速度及隨時暫停和播放動畫。效果如下圖

現在開始乾貨分享：

1. 初始化場景、相機、燈光、及模型載入的基本工作就不再贅述了，不太清楚的朋友看下threejs–初創項目。

2. 需要一個k好動畫的模型，這個大家可以自己完成 

3. 我們需要一個可以自由滑動的滑塊，用來記錄動畫播放的進程。還需要一個暫停和播放的按鈕來控制動畫的開啟和暫停

p class=”h_manualDrop”span裝配進度/spaninput class=”h_manualInstallVal” type=”range” min=”0″ step=”0.01″/p

4. 模型載入階段 我們需要對模型動畫進行處理

load.loader(‘./model/test.glb,function(gl){

    scene.add(gl.scene)//將模型加入到場景中

   mixer =new THREE.AnimationMixer(gl.scene);

   action = mixer.clipAction(gl.animations[0]);

    action.play();///

    $(‘.h_manualInstallVal’).attr(‘max’,glb.animations[0].duration.toFixed(1));// 給滑塊初始值

    renderer.render( scene, camera );//渲染

})；

5. 在刷新場景時同步滑塊上動畫進度

function onUpdate() {

let renderTime = clock.getDelta();

if (action) {// 實時更新滑塊進度

$(‘.h_manualInstallVal’).val(action.time);

}

if (mixer) {

mixer.update(renderTime);

}

requestAnimationFrame( onUpdate );

renderer.render( scene, camera );

controls.update();// 想讓相機控制器有效 這個就需要實時更新控制器。必須在攝像機的變換髮生任何手動改變後調用

}

6. 滑塊添加事件，反向控制模型動畫播放進度

$(‘.h_manualInstallVal’).on(‘input’,function (){

  action.time=$(this).val()*1;

  action.paused=true;

  $(‘.h_manualDrop’).attr(‘data-bool’,’act’);

})

7.  播放暫停按鈕控制動畫的播放與暫停

$(‘.h_manualDrop’).on(『click’,function (){// 動畫 播放與暫停

if($(this).attr(‘data-bool’)==’act’){

$(this).attr(‘data-bool’,”);

      action.paused=false;

  }else{

$(this).attr(‘data-bool’,’act’);

      action.paused=true;

  }

});

結語：模型的自主操控之前已經講過了，不再贅述，歡迎大家一起學習交流 需要測試模型的話 可以給我留言