two.js之實現(xiàn)動畫效果示例
更新時間：2017年11月06日 09:31:07 作者：君無藥
本篇文章主要介紹了two.js之實現(xiàn)動畫效果示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
一、什么是two.js？
Two.js 是面向現(xiàn)代 Web 瀏覽器的一個二維繪圖 API。Two.js 可以用于多個場合：SVG，Canvas 和 WebGL，旨在使平面形狀和動畫的創(chuàng)建更方便，更簡潔。
Two.js 有一個內置的動畫循環(huán)，可搭配其他動畫庫。Two.js 包含可伸縮矢量圖形解釋器，這意味著開發(fā)人員和設計人員都可以在商業(yè)應用中，如 Adobe Illustrator 中創(chuàng)建 SVG 元素，并把它引入 Two.js 使用場景中。
二、導入two.js
三、用two.js實現(xiàn)動畫
1）一個簡單的小dome
<script type="text/javascript">
//在整個body中繪制繪圖區(qū)
var two = new Two({
fullscreen:true,//設置是否全屏
autostart:true,//是否自動啟動動畫
}).appendTo(document.body);
var star = two.makeStar(two.width/2,two.height/2,50,125);
//two.update();//映射到頁面上
two.bind('update',function(frameCount){
star.rotation +=0.03;
})
</script>
2）實現(xiàn)一個比較復雜一些的
<!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);//前兩個是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;//設置透明度
circle.noStroke();//去掉邊線
var group = 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){
//將縮放與旋轉的度數(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>
其中的背景是這個函數(shù)makeCurve會改變?yōu)槭裁礃拥谋尘叭Q于所給的數(shù)是多大以及多少個
四、two.js官網(wǎng)鏈接
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
微信小程序實現(xiàn)form表單本地儲存數(shù)據(jù)
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)form表單本地儲存數(shù)據(jù)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-06-06
這篇文章主要介紹了ES6 javascript中Class類繼承用法,結合實例形式較為詳細的分析了ES6繼承的基本用法、相關屬性、方法與使用技巧,需要的朋友可以參考下2017-10-10
這篇文章主要為大家詳細介紹了微信小程序日歷效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
隔行換色非表格版不過原理可以參考下面的代碼，寫的很不錯2008-05-05
這篇文章主要介紹Javascript實現(xiàn)二級下拉菜單的具體過程,需要的朋友可以參考下2014-06-06
之前發(fā)布了javascript操作cookie一個大全里面有很多知識，大家可以在本站搜索，另外今天遇到js操作cookie又增加2款方法一個是簡單版本、一個是封裝版本，特意分享給大家2012-10-10
這篇文章主要介紹了ES6擴展運算符用法,結合實例形式分析了ES6擴展運算符的功能、使用方法與相關注意事項,需要的朋友可以參考下2017-10-10
bootstrap-paginator服務器端分頁使用方法詳解
這篇文章主要為大家詳細介紹了bootstrap-paginator服務器端分頁的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
async/await實現(xiàn)Promise.acll()簡介
Promise.all() 方法接收一個 promise 的 iterable 類型的輸入，并且只返回一個Promise實例，并且輸入的所有 promise 的 resolve 回調的結果是一個數(shù)組，這篇文章主要介紹了async/await實現(xiàn)Promise.acll()簡介,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了javascript 獲取元素樣式必殺技,需要的朋友可以參考下2014-05-05