2. 程式人生 > >two.js之實現動畫效果

two.js之實現動畫效果

阿新 • • 發佈：2017-11-06
矢量圖 bsp 面向 tex get yellow text city ctype

一、什麽是two.js？

Two.js 是面向現代 Web 瀏覽器的一個二維繪圖 API。Two.js 可以用於多個場合：SVG，Canvas 和 WebGL，旨在使平面形狀和動畫的創建更方便，更簡潔。

Two.js 有一個內置的動畫循環，可搭配其他動畫庫。Two.js 包含可伸縮矢量圖形解釋器，這意味著開發人員和設計人員都可以在商業應用中，如 Adobe Illustrator 中創建 SVG 元素，並把它引入 Two.js 使用場景中。

二、導入two.js

技術分享

三、用two.js實現動畫

1）一個簡單的小dome

<script type="text/javascript">
    //
 
在整個body中繪制繪圖區
    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）實現一個比較復雜一些的

<!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>
        <!--創建div繪圖區-->
        <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){
                    //將縮放與旋轉的度數變成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>

技術分享

其中的背景是這個函數makeCurve會改變為什麽樣的背景取決於所給的數是多大以及多少個

四、two.js官網鏈接

https://two.js.org/

two.js之實現動畫效果

相關推薦

two.js之實現動畫效果

矢量圖 bsp 面向 tex get yellow text city ctype 一、什麽是two.js？ Two.js 是面向現代 Web 瀏覽器的一個二維繪圖 API。Two.js 可以用於多個場合：SVG，Canvas 和 WebGL，旨在使平面形狀和動畫的創建更方

Android實現動畫效果之淡入淡出

QQ群：372135639 View漸隱動畫效果 /** * View漸隱動畫效果 */ public void setHideAnimation( View view, int duration) {

js之網頁倒計時效果

int utf char fur nts elements 兩個 計算 當前 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

CSS3實現動畫效果常用方法

指定 afa 運動 css過渡 none reserve 更改 事件 keyframes 早期在web中要實現動畫效果，都是依賴於JavaScript或flash來完成，但在CSS3中新增加了一個新的模塊transition，它可以通過一些簡單的css事件來觸發元素的外觀變

簡單又炫酷的two.js 二維動畫教程

utf-8 margin 有意 優點 adobe tom 宋體 原生 cnblogs 前 言 S N 　今天呢給大家介紹一個小js框架，Two.JS。其實在自己學習的過程中並沒有找到合適的教程，所以我這種學習延遲的同學是有一定難度的，然後準備給大家整理一份，

js返回頂部動畫效果

val top nim time animate ima int www clear // 返回頂部 function goTop(){ // 無動畫效果 document.body.scrollTop = 0; d

angular2 如何使用animate實現動畫效果

mail AC 創建 ati col cap htm mark scss 首先要在Component裏引入對應的組件： immport { trigger, state, style, animate, transition } from "@angular/animati

WPF編遊戲系列 之七 動畫效果（2）

sed 其中 所有 wpf olt targe 針對 font bar 原文:WPF編遊戲系列 之七 動畫效果（2）       上一篇已經對關閉窗口圖標進行了動畫效果處理，本篇將對窗口界面的顯示和關閉效果進行處理

JS之滾動條效果

mas 接下來 sem 分析 -c -s htm adding 開始 滾動條在前端頁面中是進行見到的，但是在不同的瀏覽器中，默認的滾動條樣式不同，有些瀏覽器的默認樣式也不好更改，因此，我們可以自定義滾動條，接下來就從一個實例開始進入滾動條。 簡易進度條 首先要實現的是上面

Vue.js 之 過渡動畫2

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init

教你如何在網頁上用利用H5快速實現動畫效果

meta ole adding play tor margin time 方式 scrip 在web開發中，GIF動畫效果是隨處可見，比如常見的loading加載、人物奔跑的gif圖片等等，那麽這些都是怎麽實現的呢？其實實現的原理很簡單，簡而言之，這些所謂的動畫都是一幀一幀

jquery 實現動畫效果（各種方法）

asc func 綜合 oat 代碼 jquer 一秒 遞歸 pan 1.show()和hide()和toggle()(這是show和hide的一個綜合，一個按鈕就實現顯示和隱藏) 效果： 代碼： <button type="button" class="show"

js&jQuery實現動畫移動

沒次用到都要自己手寫，相當麻煩，於是找時間把它羅列了一下。實現簡單的按鈕點選事件，然後 div移動相應的畫素。 其中包括js的快速移動、勻速移動、先快後慢移動。然後實現jQuery的定時移動 都採用了定時器，jQuery採用了animate（）方法 /*ele表

winform 實現動畫效果。

網頁中我們藉助jquery等框架可以實現很炫的動畫效果，故想在winform中也實現同樣的效果之一：滑入效果。 藉助這個類即可： public static class Animation     {         private static readonly int

原生js+canvas實現下雪效果

/* 控制下雪 */ function snowFall(snow) { /* 可配置屬性 */ snow = snow || {}; this.maxFlake = snow.maxFlake || 200; /* 最多片數 */ this

（四）微信小程式之實現輪番效果（swiper）

輪番效果在很多的網站主頁或者手機應用端都能看到，在微信小程式中使用swiper元件來實現圖片輪番，今天的小例子效果如下： 為了方便演示我將動畫切換的間隔調整為3s，現實專案中一般為5s，具體看專案需求而定。 實現圖片輪番使用swiper滑塊檢視容器元件，頁面結構檔案程式碼

res-----不同圖片實現動畫效果（幀動畫）

1、準備幾張圖片（可命名為a1-a6） 2、在drawable資料夾下新建xml，內容如下 <?xml version="1.0" encoding="utf-8"?> <animation-list xmlns:android="http://schemas.androi

css3 實現動畫效果，怎樣使他無限迴圈動下去？

<pre name="code" class="css">主要需要使用 -webkit-animation 如： -webkit-animation:gogogo 2s infinite linear ; 其中gogogo是自己定義的動畫幀，2s是整個動畫的

css怎麼讓div動起來，實現動畫效果一直在動

<!DOCTYPE html> <html> <head> <style> div { width:100px; height:100px; background:red; position:relative; anim

Fragment 實現動畫效果

利用fragment transaction進行切換，很方便提供切換的效果。 利用setTransition() 通過setTransition()我們可以設定有限幾個切換效果，程式碼如下：     protected void addFragmentToStack