two.js之實現動畫效果示例 - 程式前沿

一、什麼是two.js？ Two.js 是面向現代Web 瀏覽器的一個二維繪圖API。

Two.js 可以用於多個場合：SVG，Canvas 和WebGL，旨在使平面形狀和動畫的建立更 ... 程式語言前端開發IOS開發Android開發雲端運算人工智慧伺服器搜尋資料庫軟體開發工具two.js之實現動畫效果示例2018.06.24前端開發Two.js,動畫HOME前端開發two.js之實現動畫效果示例Advertisement一、什麼是two.js？Two.js是面向現代Web瀏覽器的一個二維繪圖API。

Two.js可以用於多個場合：SVG，Canvas和WebGL，旨在使平面形狀和動畫的建立更方便，更簡潔。

Two.js有一個內建的動畫迴圈，可搭配其他動畫庫。

Two.js包含可伸縮向量圖形直譯器，這意味著開發人員和設計人員都可以在商業應用中，如AdobeIllustrator中建立SVG元素，並把它引入Two.js使用場景中。

二、匯入two.js三、用two.js實現動畫1）一個簡單的小dome //在整個body中繪製繪圖區 vartwo=newTwo({ fullscreen:true,//設定是否全屏 autostart:true,//是否自動啟動動畫 }).appendTo(document.body); varstar=two.makeStar(two.width/2,two.height/2,50,125); //two.update();//對映到頁面上 two.bind('update',function(frameCount){ star.rotation=0.03; }) 2）實現一個比較複雜一些的 svg{ background-color:black; } varelem=document.getElementById("draw-shapes"); varparams={width:400,height:400}; vartwo=newTwo(params).appendTo(elem); varcircle=two.makeCircle(-72,0,50);//前兩個是x軸y軸，然後是圓的半徑 varstar=two.makeStar(75,0,75,35,5); //varss=two.makeCurve(250,30,46,50,465,48,79,36,94); circle.fill="#ccd0d5";//填充顏色 circle.lineWidth=15;//邊線的寬度 circle.stroke="#FED519";//邊線的顏色 star.fill="yellow"; star.opacity=0.5;//設定透明度 circle.noStroke();//去掉邊線 vargroup=two.makeGroup(circle,star);//將兩個圖形合併到一個組中 //group.fill="#ffffff"; group.translation.set(two.width/2,two.height/2); group.rotation=Math.PI; group.scale=0.1; two.update(); two.bind('update',function(frameCount){ if(group.scale>0.99999){ //將縮放與旋轉的度數變成0 group.scale=group.rotation=0; } vart=(1-group.scale)*0.3; group.scale=t; group.rotation=t*3*Math.PI; }).play(); 其中的背景是這個函式makeCurve會改變為什麼樣的背景取決於所給的數是多大以及多少個 四、two.js官網連結https://two.js.org/以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援指令碼之家。

目錄1.您可能感興趣的文章:您可能感興趣的文章:基於Two.js實現星球環繞動畫效果的示例AdvertisementAdvertisement写评论取消回覆很抱歉，必須登入網站才能發佈留言。

近期文章JVM系列深入理解JVM垃圾回收2020.03.31聊聊畢業設計系列系統實現2020.03.31Flutter開發踩坑記錄（乾貨總結）2020.03.312020前端技術面試必備Vue：(四)Vuex狀態管理2020.03.31又來新需求了，急，Android怎麼實現時間線效果（上）？2020.03.31Chrome請求報錯net::ERR_CERT_AUTHORITY_INVALID2020.03.31centos7安裝ElasticSearch配置外網訪問2020.03.31有了這款GitHubAction，碼雲的付費服務也能免費用！2020.03.31JDK的sql設計不合理導致的驅動類初始化死鎖問題2020.03.31《HeadFirst設計模式》學習筆記|觀察者模式2020.03.31AdvertisementAdvertisement