您好,登錄后才能下訂單哦!
一、什么是two.js?
Two.js 是面向現(xiàn)代 Web 瀏覽器的一個(gè)二維繪圖 API。Two.js 可以用于多個(gè)場(chǎng)合:SVG,Canvas 和 WebGL,旨在使平面形狀和動(dòng)畫的創(chuàng)建更方便,更簡(jiǎn)潔。
Two.js 有一個(gè)內(nèi)置的動(dòng)畫循環(huán),可搭配其他動(dòng)畫庫(kù)。Two.js 包含可伸縮矢量圖形解釋器,這意味著開(kāi)發(fā)人員和設(shè)計(jì)人員都可以在商業(yè)應(yīng)用中,如 Adobe Illustrator 中創(chuàng)建 SVG 元素,并把它引入 Two.js 使用場(chǎng)景中。
二、導(dǎo)入two.js
三、用two.js實(shí)現(xiàn)動(dòng)畫
1)一個(gè)簡(jiǎn)單的小dome
<script type="text/javascript"> //在整個(gè)body中繪制繪圖區(qū) var two = new Two({ fullscreen:true,//設(shè)置是否全屏 autostart:true,//是否自動(dòng)啟動(dòng)動(dòng)畫 }).appendTo(document.body); var star = two.makeStar(two.width/2,two.height/2,50,125); //two.update();//映射到頁(yè)面上 two.bind('update',function(frameCount){ star.rotation +=0.03; }) </script>
2)實(shí)現(xiàn)一個(gè)比較復(fù)雜一些的
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> svg{ background-color: black; } </style> <script src="js/two.JS.js" type="text/javascript" charset="utf-8"></script> </head> <body> <!--創(chuàng)建div繪圖區(qū)--> <div id="draw-shapes"> </div> <script type="text/javascript"> var elem = document.getElementById("draw-shapes"); var params = {width:400,height:400}; var two = new Two(params).appendTo(elem); var circle = two.makeCircle(-72,0,50);//前兩個(gè)是x軸y軸,然后是圓的半徑 var star = two.makeStar(75,0,75,35,5); // var ss = 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;//設(shè)置透明度 circle.noStroke();//去掉邊線 var group = two.makeGroup(circle,star);//將兩個(gè)圖形合并到一個(gè)組中 // 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){ //將縮放與旋轉(zhuǎn)的度數(shù)變成0 group.scale = group.rotation = 0; } var t = (1- group.scale) * 0.3; group.scale +=t; group.rotation +=t *3*Math.PI; }).play(); </script> </body> </html>
其中的背景是這個(gè)函數(shù)makeCurve會(huì)改變?yōu)槭裁礃拥谋尘叭Q于所給的數(shù)是多大以及多少個(gè)
四、two.js官網(wǎng)鏈接
https://two.js.org/
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。