tween.js user guide

tween.js用戶指南

1.What is a tween? How do they work? Why do you want to use them?

一、什么是tween?它如何工作？為何你需要使用它？

tween允許你以緩和的方式改變一個對象屬性的值。你只要告訴它要改變什么屬性，停止改變時屬性的終值該是什么，以及這一變化要經歷多少時間，然后tweening的引擎就會從變化開始到變化結束關注該屬性當前值。例如，假設你有一個有x和y坐標的位置對象：

var position = { x:100, y:0 }

如果你想把x值從100變到200，你只要：

// 首先為這一position對象創建一個tween
var tween =newTWEEN.Tween(position);

//
告訴tween我們想把x屬性在1000毫秒內改變
tween.to({ x:200 }, 1000);

事實上這并不會做任何事情，這個tween雖然被創建了，但未被激活，你需要啟動它：

tween.start();

最后，為了盡可能地讓運動平緩，你應該在動畫的同一個主循環內使用TWEEN.update。通常這看起來像：

animate();

functionanimate() {
requestAnimationFrame(animate);
// [...]
TWEEN.update();
// [...]
}

這會讓引擎關注每一幀激活的position;在一秒后（也就是1000毫秒，tween變量建立時傳入的參數），position.x會變成200。

如果你想看到position的數值變化的話，你可以使用onUpdate函數把x打印到控制臺：

tween.onUpdate(function() {
console.log(this.x);
});

這個函數會在每一次tween更新時被調用；它發生多少次取決于許多因素——比如你的計算機的運行速度和工作狀態等…

現在我們只是把屬性值打印到控制臺，但如果你把Tween用于其它場景，比如用來改變一個three.js對象的位置：

var tween =newTWEEN.Tween(cube.position)

.to({ x:100, y:100, z:100 }, 10000)

.start();

animate();

functionanimate() {
requestAnimationFrame(animate);
TWEEN.update();

threeRenderer.render(scene, camera);
}

這種情況下，因為three.js的渲染器會在渲染前讀取對象的位置，因此你就沒必要清楚的調用一個onUpdate函數啦！！
可能你已經在上面的代碼里發現了不一樣的內容：鏈式調用！！因為每個tween的方法返回了tween實例本身，因此你可以把下述代碼：

var tween =newTWEEN.Tween(position);
tween.to({ x:200 }, 1000);
tween.start();

寫成

var tween =newTWEEN.Tween(position)
.to({ x:200 }, 1000)
.start();

你會在提供的例子中看到許多鏈式調用tween方法的地方，因此有必要先去熟悉它。看看04-simplest這個例子吧！

2.Animating with
tween.js

二、使用tween.js來生成動畫！！

tween.js是不會自動工作的，因此必須要調用update方法。推薦的作法是把它放進動畫函數的主循環內，最好是使用requestAnimationFrame來獲得最好的圖形渲染效果。看起來像這樣：

animate();

functionanimate() {
requestAnimationFrame(animate);
// [...]
TWEEN.update();
// [...]
}

如果update沒有傳入參數，它會使用當前時間來計算從上次運行到現在過了多久，也就是會立即調用。

而如果你給update傳入了參數，例如：

TWEEN.update(100);

這意味著 "update with
time = 100 milliseconds"。你可以使用這個來確保你代碼中所有基于時間的函數總是使用相同的時間值。比如你有一個player并且想同步地運行tween的話，你的animate代碼可能會看起來像：

var currentTime =
player.currentTime;
TWEEN.update(currentTime);

可以查看github中的test.js來了解如何給TWEEN.update()傳入不同的值來模仿經過的時間。

3.Controlling a
tween

三、控制一個tween的動畫

strat and stop

我們已經知道Tween.start是啟動一個tween，除此之外還有許多其他用來控制一個tween的方法。可能其中最重要的一個就是與start相對的方法：stop。如果想要取消一個tween，可以直接讓一個tween調用stop方法：

tween.stop();

停止一個未被啟動的、或是已經停止的tween是無效的，也不會拋出錯誤。

start方法也可以接收一個參數。如果傳入了參數，那么tween不會啟動，直到傳入的時間才啟動。否則，它就會盡可能快地啟動(也就是第一次調用TWEEN.update的時候）

update

每一個tween實例也是有update方法的——而這實際上是通過TWEEN.update來調用的。一般不會直接使用這個方法，但如果你想做出瘋狂的hack的話，這是很有用的。

chain

如果你把多個不同的tween排列起來的話（也就是一個tween結束之后另一個tween立即開始），事情將會變的很有趣。我們把這叫做chaning
tweens，而這是通過chain方法來串起來的。因此，如果想讓tweenB接在tweenA之后開始的話，你可以：

tweenA.chain(tweenB);

或者，如果你想使用一個無限的chain,可以：

tweenA.chain(tweenB);
tweenB.chain(tweenA);

github中給出的00_Hello
world例子正是使用了無限的chain.

在另外一些情況下，你可能會想緊接著一個tween之后同時進行兩個tween的動畫：

tweenA.chain(tweenB,tweenC);

repeat

如果你想不停地使用一個tween的話，你可以讓它chain它自己，但更好的方式是使用repeat方法。它接收一個參數，表示重復的次數：

tween.repeat(10); // repeats 10 times and stops
tween.repeat(Infinity); // repeats forever

查看repeat例子

yoyo

這個函數只會在使用repeat時有用。它會讓tween的行為像個yoyo（悠悠球），也就是說，在下一次動畫開始時，它的屬性是慢慢從終值拉回到初始值的，而不是簡單的從頭開始tweens隊列。

delay

更復雜的動畫管理可能要在一個tween啟動前延遲一定的時間。這樣可以使用delay方法：

tween.delay(1000);
tween.start();

4.Controlling
all tweens

四、控制所有tween的動畫

下列的方法是在TWEEN全局對象中的，而且你通常不會用到其中的大部分方法，除了update.

這些方法通常都該是內部的，但把它暴露出來是為了給你機會去嘗試一些有趣的效果。

TWEEN.update(time)

前面已經說過的，這個方法用來啟動所有tween的動畫。如果未指定time，它將使用當前時間。

TWEEN.getAlland
TWEEN.removeAll

分別用來獲得所有正在運行的tween的數組以及移除它們。

TWEEN.add(item) and TWEEN.remove(tween）

分別用來在當前活動的tween隊列中增加一個tween或是移除指定的tween.

5.Changing the
easing function (AKA make it bouncy)

五、改變緩動方式

Tween.js會在起始于終止值間的插值表現為線性變化，也就是說變化量會與經過的時間成正比。這會使效果很容易預料，但也會過分無趣。不用擔心！這一行為能被輕松的改變，只要你使用了easing方法，比如：

tween.easing(TWEEN.Easing.Quadratic.In);

它的效果是，tween的速度是慢慢增加的，而不是線性的，并且在圖示上會表現為二次函數形式。

緩動函數速查

Available easing
functions:TWEEN.Easing可用的Easing函數

tween.js提供了幾個緩動函數，它們按照效果被分為以下幾組：Linear, Quadratic, Cubic,
Quartic, Quintic, Sinusoidal, Exponential, Circular, Elastic, Back 和 Bounce，同時它們有三種緩動類型：In,Out,InOut。

考慮到除非你非常熟悉這幾個詞的概念，不然你可能不太理解，github上又給出了一個Graphs的例子查看效果。它把所有的緩動曲線放在一個頁面里，因此你能一眼就看出它們的區別來。

這些緩動函數的起源：these functions
are derived from the original set of equations that Robert Penner graciously
made available as free software a few years ago, but have been optimised to
play nicely with JavaScript.

使用自定義緩動函數

你不僅能使用現有的函數，也能自己寫個你覺得更適用的，只要它符合一定的約定：

·它需要接受一個參數

o
<![endif]>k:表示緩動過程，或者說這個tween已經經歷了多久。允許值為[0,1]。

·它必須返回一個基于輸入參數的值。

緩動函數會在tween每次update時調用。然后得到的結果會被用于初始值和它與終止值的差值（deltas)，大概類似于下面的模擬代碼：

easedElapsed
= easing(k);
for each property:
newPropertyValue =
initialPropertyValue + propertyDelta * easedElapsed;

deltas會在start()之后開始計算。

所以假設你想使用自定義的緩動函數來緩動屬性值，并且是用Math.floor來輸出結果，也就是只有整數部分才會被輸出，這時就會表現有點些像臺階函數：

functiontenStepEasing(k)
{
returnMath.floor(k *10) /10;
}

然后你能在一個tween的easing方法中調用它，正如我們之前見過的：

tween.easing(tenStepEasing);

查看graphs for custom easing function例子

6.Callbacks

六、回調函數

tween另一個強大的特性是可以在每次tween的生命周期的某一時刻里使用自定義的回調函數。

比如，假定你想去給一個對象指定動畫，但它的屬性卻不能直接讀寫，那么你就要使用一個setter了。你可以使用一個onUpdate回調函數來讀取更新了的屬性值并且手動調用setters:

var trickyObjTween =newTWEEN.Tween({
propertyA: trickyObj.getPropertyA(),
propertyB: trickyObj.getPropertyB()
})
.to({ propertyA:100, propertyB:200 })
.onUpdate(function() {

this.setA( this.propertyA );

this.setB( this.propertyB );
});

或者想像你要在tween開始時放個聲音，這樣你就能用一個onStart回調函數：

var tween =newTWEEN.Tween(obj)
.to({ x:100 })
.onStart(function() {

sound.play();
});

每個回調函數的作用域都是在這個被tweened的對象內——這個例子里，是obj

onStart

在tween開始之前，也就是在deltas計算之前。一個tween只會執行一次，也就是說即使被repeat()重復了也不會多次執行。

這一般是用來同步執行其他的事件，或者是觸發一些你想要tween發生時要做的動作。

被tweened的對象是作為第一個參數，它也能通過this來獲得引用。

onStop

當一個tween被stop()方法停止時執行的回調函數，而不是等它自己動畫自然結束時，或者在任意一個chained了的tween被stopped時。

被tweened的對象是作為第一個參數，它也能通過this來獲得引用。

onUpdate

tween每次更新時執行，在屬性值被更新之后。

被tweened的對象能通過this來引用，而傳入的第一個參數則是這個tween的進程，一個0~1的值。在將來版本可能會做出更改，因此你不能相信這一值。

onComplete

當一個tween正常結束時執行的回調函數。

被tweened的對象是作為第一個參數，它也能通過this來獲得引用。

7.Advanced
tweening

七、進階的緩間動畫

使用當前屬性值的相關值

當使用to方法時，你也能使用與當前值相關的值，Tween.js會讀取當前的屬性值然后根據相關值計算終值。但需要使用引號不然就會被改成絕對值了。

讓我們看看如何使用：

//
This will make the `x` property be 100, always
var absoluteTween =newTWEEN.Tween(absoluteObj).to({ x:100 });

//
Suppose absoluteObj.x is 0 now
absoluteTween.start(); // Makes x go to 100

//
Suppose absoluteObj.x is -100 now
absoluteTween.start(); // Makes x go to 100

//
In contrast...

//
This will make the `x` property be 100 units more,
// relative to the actual value when it starts
var relativeTween =newTWEEN.Tween(relativeObj).to({ x:"+100"
});

//
Suppose relativeObj.x is 0 now
relativeTween.start(); // Makes x go to 0 +100 = 100

//
Suppose relativeObj.x is -100 now
relativeTween.start(); // Makes x go to -100 +100 = 0

看看github上這個例子

to的參數為一個數組時

除了把tween動畫的目標屬性設置為一個絕對或相對值，你也可以為tween動畫設置一系列的目標值。要實現這一目的，你只要在to()函數中為屬性指定一個值數組就可以了。例如：

var tween =newTWEEN.Tween(relativeObj).to({
x: [0, -100, 100] });

它會讓x從初始值到0，-100和100.

插入值的計算方式是：

·首先tween的進程（tween
progess)像正常一樣進行

·進程(從0到1)被用作插值函數的輸入

·基于這一進程和數組中的值，來生成一個插值。

例如，當這一tween剛開始時（process為0），插值函數會返回數組中的第一個值。當tween進行到一半時，插值函數會返回一個接近數組中間的值的值，然后當tween結束時（process為0），插值函數會返回數組中最后的值。

看看github上的這個例子

8.Getting the
best performance

八、獲得最佳表現

當使用Tween.js時，你可以使用一定的方式來提高你代碼的性能（或者說當你在web中使用動畫時，通常來說都是有效的）。

使用高性能的CSS

當你想給頁面中的一個元素的位置做動畫時，最簡單的方案是對top和left屬性做動畫，就像這樣：

var element =document.getElementById('myElement');
var tween =newTWEEN.Tween({
top:0, left:0 })
.to({ top:100, left:100 }, 1000)
.onUpdate(function() {

element.style.top=this.top+'px';

element.style.left=this.left+'px';
});

但這卻是非常低效的！！！！因為更改這些屬性會在每次tween更新時讓瀏覽器重新計算布局，而是是很大的消費。相反，如果使用transform的話，這并不會讓瀏覽器重新計算布局而且還允許硬件加速，像這樣：

var element =document.getElementById('myElement');
var tween =newTWEEN.Tween({
top:0, left:0 })
.to({ top:100, left:100 }, 1000)
.onUpdate(function() {

element.style.transform
='translate('+this.left+'px, '+this.top+'px);';
});

但是！如果你的動畫只是那么簡單的話，那你還不如只用簡單的CSS動畫或者是transitions，那樣子瀏覽器還能盡可能的做出優化。Tween.js最有用的地方是當你的動畫涉及到復雜的管理，比如你要同步執行多個tween,或者是當一個tween結束后執行其他的tween，或者是循環執行一定次數等…

對GC機制友好些！！

如果你使用onUpdate回調，你要小心放進你要的內容。因為這個函數會每秒調用多次，所以如果你在每次tween更新時做出比較耗費資源的操作的話，你可能會阻塞主線程而導致jank，或者——如果你的操作涉及到內容分配，那么你會調用GC太多次，這也可能會導致jank。因此，一定不要做出這兩類的操作。保證你的onUpdate回調函數是輕量級的，并確保你在開發時進行memory profiler。

9.Crazy tweening

九、更瘋狂的tweening!!

這可能是你不怎么會用到的。

你可以在tween.js之外使用緩間方程，畢竟，它們只是函數。所以你可以用它們來計算緩和曲線之類的作為輸入數據。比如在這個頁面里，它們被用來生成視頻數據。

原文鏈接

文中所有的demo都是來自github中的examples的。

轉載請注明出處：http://www.cnblogs.com/benymor/p/6373152.html

如有任何建議或疑問，歡迎留言討論。

@font-face { font-family: 宋體 }
@font-face { font-family: "Cambria Math" }
@font-face { font-family: Calibri }
@font-face { font-family: 微軟雅黑 }
@font-face { font-family: 方正喵嗚體 }
@font-face { font-family: Consolas }
@font-face { font-family: "@微軟雅黑" }
@font-face { font-family: "@宋體" }
@font-face { font-family: "@方正喵嗚體" }
p.MsoNormal, li.MsoNormal, div.MsoNormal { mso-style-unhide: no; mso-style-qformat: yes; mso-style-parent: ""; margin: 12pt 0 0.0001pt; line-height: 13pt; mso-line-height-rule: exactly; mso-pagination: widow-orphan; font-size: 10.5pt; mso-bidi-font-size: 11.0pt; font-family: "Calibri", sans-serif; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-fareast-font-family: 宋體; mso-fareast-theme-font: minor-fareast; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin; mso-bidi-font-family: "Times New Roman"; mso-bidi-theme-font: minor-bidi; mso-font-kerning: 1.0pt }
p.MsoHeader, li.MsoHeader, div.MsoHeader { mso-style-priority: 99; mso-style-link: "頁眉 Char"; margin: 12pt 0 0.0001pt; text-align: center; line-height: 12pt; mso-pagination: widow-orphan; tab-stops: center 207.65pt right 415.3pt; layout-grid-mode: char; border: none; mso-border-bottom-alt: solid windowtext .75pt; padding: 0; mso-padding-alt: 0cm 0cm 1.0pt 0cm; font-size: 9pt; font-family: "Calibri", sans-serif; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-fareast-font-family: 宋體; mso-fareast-theme-font: minor-fareast; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin; mso-bidi-font-family: "Times New Roman"; mso-bidi-theme-font: minor-bidi; mso-font-kerning: 1.0pt }
p.MsoFooter, li.MsoFooter, div.MsoFooter { mso-style-priority: 99; mso-style-link: "頁腳 Char"; margin: 12pt 0 0.0001pt; line-height: 12pt; mso-pagination: widow-orphan; tab-stops: center 207.65pt right 415.3pt; layout-grid-mode: char; font-size: 9pt; font-family: "Calibri", sans-serif; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-fareast-font-family: 宋體; mso-fareast-theme-font: minor-fareast; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin; mso-bidi-font-family: "Times New Roman"; mso-bidi-theme-font: minor-bidi; mso-font-kerning: 1.0pt }
a:link, span.MsoHyperlink { mso-style-noshow: yes; mso-style-priority: 99; color: rgba(0, 0, 255, 1); text-decoration: underline; text-underline: single }
a:visited, span.MsoHyperlinkFollowed { mso-style-noshow: yes; mso-style-priority: 99; color: rgba(149, 79, 114, 1); mso-themecolor: followedhyperlink; text-decoration: underline; text-underline: single }
p { mso-style-noshow: yes; mso-style-priority: 99; mso-margin-top-alt: auto; margin-right: 0; mso-margin-bottom-alt: auto; margin-left: 0; mso-pagination: widow-orphan; font-size: 12pt; font-family: 宋體; mso-bidi-font-family: 宋體 }
span.Char { mso-style-name: "頁眉 Char"; mso-style-priority: 99; mso-style-unhide: no; mso-style-locked: yes; mso-style-link: 頁眉; mso-ansi-font-size: 9.0pt; mso-bidi-font-size: 9.0pt; font-family: "Calibri", sans-serif; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin; mso-font-kerning: 1.0pt }
span.Char0 { mso-style-name: "頁腳 Char"; mso-style-priority: 99; mso-style-unhide: no; mso-style-locked: yes; mso-style-link: 頁腳; mso-ansi-font-size: 9.0pt; mso-bidi-font-size: 9.0pt; font-family: "Calibri", sans-serif; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin; mso-font-kerning: 1.0pt }
.MsoChpDefault { mso-style-type: export-only; mso-default-props: yes; font-size: 10pt; mso-ansi-font-size: 10.0pt; mso-bidi-font-size: 10.0pt; font-family: "Calibri", sans-serif; mso-ascii-font-family: Calibri; mso-hansi-font-family: Calibri; mso-bidi-font-family: "Times New Roman"; mso-bidi-theme-font: minor-bidi; mso-font-kerning: 0pt }
@page { mso-page-border-surround-header: no mso-page-border-surround-footer: no mso-footnote-separator: url("https.files/header.htm") fs mso-footnote-continuation-separator: url("https.files/header.htm") fcs mso-endnote-separator: url("https.files/header.htm") es mso-endnote-continuation-separator: url("https.files/header.htm") ecs }
@page WordSection1 { size: 595.3pt 841.9pt margin-top: 72pt margin-right: 90pt margin-bottom: 72pt margin-left: 90pt mso-header-margin: 42.55pt mso-footer-margin: 49.6pt mso-paper-source: 0 layout-grid: 15.6pt }
div.WordSection1 { page: WordSection1 }
@list l0
{mso-list-id:973292286;
mso-list-template-ids:-2041423552;}
@list l0:level1
{mso-level-number-format:bullet;
mso-level-text:F0B7;
mso-level-tab-stop:36.0pt;
mso-level-number-position:left;
text-indent:-18.0pt;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l0:level2
{mso-level-number-format:bullet;
mso-level-text:o;
mso-level-tab-stop:72.0pt;
mso-level-number-position:left;
text-indent:-18.0pt;
mso-ansi-font-size:10.0pt;
font-family:"Courier New";
mso-bidi-font-family:"Times New Roman";}
@list l0:level3
{mso-level-number-format:bullet;
mso-level-text:F0B7;
mso-level-tab-stop:108.0pt;
mso-level-number-position:left;
text-indent:-18.0pt;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l0:level4
{mso-level-number-format:bullet;
mso-level-text:F0B7;
mso-level-tab-stop:144.0pt;
mso-level-number-position:left;
text-indent:-18.0pt;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l0:level5
{mso-level-number-format:bullet;
mso-level-text:F0B7;
mso-level-tab-stop:180.0pt;
mso-level-number-position:left;
text-indent:-18.0pt;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l0:level6
{mso-level-number-format:bullet;
mso-level-text:F0B7;
mso-level-tab-stop:216.0pt;
mso-level-number-position:left;
text-indent:-18.0pt;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l0:level7
{mso-level-number-format:bullet;
mso-level-text:F0B7;
mso-level-tab-stop:252.0pt;
mso-level-number-position:left;
text-indent:-18.0pt;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l0:level8
{mso-level-number-format:bullet;
mso-level-text:F0B7;
mso-level-tab-stop:288.0pt;
mso-level-number-position:left;
text-indent:-18.0pt;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l0:level9
{mso-level-number-format:bullet;
mso-level-text:F0B7;
mso-level-tab-stop:324.0pt;
mso-level-number-position:left;
text-indent:-18.0pt;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l1
{mso-list-id:1083062520;
mso-list-template-ids:1635394124;}
@list l1:level1
{mso-level-number-format:bullet;
mso-level-text:F0B7;
mso-level-tab-stop:36.0pt;
mso-level-number-position:left;
text-indent:-18.0pt;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l1:level2
{mso-level-number-format:bullet;
mso-level-text:F0B7;
mso-level-tab-stop:72.0pt;
mso-level-number-position:left;
text-indent:-18.0pt;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l1:level3
{mso-level-number-format:bullet;
mso-level-text:F0B7;
mso-level-tab-stop:108.0pt;
mso-level-number-position:left;
text-indent:-18.0pt;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l1:level4
{mso-level-number-format:bullet;
mso-level-text:F0B7;
mso-level-tab-stop:144.0pt;
mso-level-number-position:left;
text-indent:-18.0pt;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l1:level5
{mso-level-number-format:bullet;
mso-level-text:F0B7;
mso-level-tab-stop:180.0pt;
mso-level-number-position:left;
text-indent:-18.0pt;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l1:level6
{mso-level-number-format:bullet;
mso-level-text:F0B7;
mso-level-tab-stop:216.0pt;
mso-level-number-position:left;
text-indent:-18.0pt;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l1:level7
{mso-level-number-format:bullet;
mso-level-text:F0B7;
mso-level-tab-stop:252.0pt;
mso-level-number-position:left;
text-indent:-18.0pt;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l1:level8
{mso-level-number-format:bullet;
mso-level-text:F0B7;
mso-level-tab-stop:288.0pt;
mso-level-number-position:left;
text-indent:-18.0pt;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l1:level9
{mso-level-number-format:bullet;
mso-level-text:F0B7;
mso-level-tab-stop:324.0pt;
mso-level-number-position:left;
text-indent:-18.0pt;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l2
{mso-list-id:1316375290;
mso-list-template-ids:1143009350;}
@list l2:level1
{mso-level-number-format:bullet;
mso-level-text:F0B7;
mso-level-tab-stop:36.0pt;
mso-level-number-position:left;
text-indent:-18.0pt;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l2:level2
{mso-level-number-format:bullet;
mso-level-text:o;
mso-level-tab-stop:72.0pt;
mso-level-number-position:left;
text-indent:-18.0pt;
mso-ansi-font-size:10.0pt;
font-family:"Courier New";
mso-bidi-font-family:"Times New Roman";}
@list l2:level3
{mso-level-number-format:bullet;
mso-level-text:F0B7;
mso-level-tab-stop:108.0pt;
mso-level-number-position:left;
text-indent:-18.0pt;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l2:level4
{mso-level-number-format:bullet;
mso-level-text:F0B7;
mso-level-tab-stop:144.0pt;
mso-level-number-position:left;
text-indent:-18.0pt;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l2:level5
{mso-level-number-format:bullet;
mso-level-text:F0B7;
mso-level-tab-stop:180.0pt;
mso-level-number-position:left;
text-indent:-18.0pt;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l2:level6
{mso-level-number-format:bullet;
mso-level-text:F0B7;
mso-level-tab-stop:216.0pt;
mso-level-number-position:left;
text-indent:-18.0pt;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l2:level7
{mso-level-number-format:bullet;
mso-level-text:F0B7;
mso-level-tab-stop:252.0pt;
mso-level-number-position:left;
text-indent:-18.0pt;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l2:level8
{mso-level-number-format:bullet;
mso-level-text:F0B7;
mso-level-tab-stop:288.0pt;
mso-level-number-position:left;
text-indent:-18.0pt;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l2:level9
{mso-level-number-format:bullet;
mso-level-text:F0B7;
mso-level-tab-stop:324.0pt;
mso-level-number-position:left;
text-indent:-18.0pt;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
ol { margin-bottom: 0 }
ul { margin-bottom: 0 }

總結

以上是生活随笔為你收集整理的tween用户使用指南的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。