微軟《HTML+TIME基礎動畫網頁製作技術教學文章》

2009031920:47

HTML+TIME Technical Articles微軟《HTML+TIME基礎動畫網頁製作技術教學文章》
Basics of HTML+TIME Animation《HTML+TIME基礎動畫網頁製作教學》

Mark Hopkins
Microsoft Corporation《微軟公司》

December 2000《2000年12月》

宗旨:

這篇文章介紹給您HTML+TIME基礎動畫網頁製作方式，讓您能輕鬆地創造出繽紛絢麗扣人心弦的動畫網頁。

介紹

利用HTML+TIME基礎動畫網頁製作增加動畫到網頁是屬於一種網頁製作编輯語言《語法》，就好像使用Microsoft® Visual Basic® Scripting Edition (VBScript) and Microsoft® JScript®. However編輯語言《語法》來編輯製作網頁般。然而，除非您已經非常熟悉像Visual Basic、C++或者Java的網頁編輯語言《語法》，您大概會有一段艱辛的HTML+TIME基礎動畫網頁製作學習過程。

Microsoft® Internet Explorer 5.5利用HTML+TIME的time2動作編輯模式來執行W3C SMIL 2.0動畫模版。 這篇文章介紹給您HTML+TIME基礎動畫網頁製作方式，讓您能輕鬆地創造出繽紛絢麗扣人心弦的動畫網頁。

前言

這篇文章假設您已經會使用DHTML編輯語言，與 HTML+TIME time2動作編輯模式。這篇文章並不詳細地為您介紹如何地進入編輯語言模式。也不詳細地為您介紹解釋甚麼是namespace和time2動作編輯標記。這些項目在HTML+TIME概要與美化您的HTML+TIME網頁中已有詳細的介紹教學。

宣示動畫

簡單的動畫元件，是使用HTML+TIME的編輯優點。使用HTML元件是輕鬆製作動畫網頁的特點。最大的好處是您不必再使用編寫複雜的Microsoft® Visual Basic® Scripting Edition (VBScript) and Microsoft® JScript®. However編輯語言《語法》。如果您希望做更加精緻的網頁， HTML+TIME也有許多的scriptable編碼可以使用。

這副廣告橫幅是的某些的一個简单例子您能做與HTML+TIME動畫事。在這個樣品的代碼將被用于展示在這篇文章上和屬性报道的某些元素。

當然，動畫比此可以複雜。这您能做與HTML+TIME動畫的某些名單基本的事。

逐漸或者立刻，改变元素的肤色。
　
移動沿一個具體道路的一個元素或做它躍遷到地點。
　
隨著時間的推移改變動畫的步幅。
　
跑動畫今後和在背面。

当您开始結合這些活動时，您能創造一些老練動畫序列。查看一下什麼的更多例子的HTML+TIME動畫頁您能做與動畫。

給賦予生命的物產

瞭解HTML+TIME動畫的鑰匙是意识到您隨著時間的推移實際上改變物產的價值。例如，改變DIV的高度從70個映像點到在一半中的200個映像點每秒鐘做DIV神色，如它「增长」。這個確切的技術用于它的廣告橫幅做看起来橫幅向下擴展。

重要的事先来

為了給物產賦予生命，您必须明白地首先設置那物產。例如，如果您想要給在DIV元素的高度物產賦予生命，您需要設置它。您能為此使用轴向樣式屬性。


<DIV STYLE="height:70;" …> 
  Animated DIV!
</DIV>

另一個方式設置物產将用被設置的CSS高度物產創造樣式類和应用它於元素。


<STYLE>
  .clsAnimatedDIV { height:70; …}
</STYLE>
…
<DIV class="clsAnimatedDIV" …>  </DIV>

明白地設置您想要賦予生命所有物產的價值是非常重要的，否则您的動畫代碼不會运作。

除設置頂面和左物產之外，当給元素的位置賦予生命时，您必须設置位置物產对绝對或親戚。

這個要求的原因是，默認情況下，在網頁的元素是HTML數據流程的一部分，并且沒有所有他們的物產的明確價值。想像它將採取坚持每物產的分開的價值在一個特定網頁的每個元素的表現命中和記憶天花板。

動畫元素

有被用于的四個元素給在網頁的其他元素賦予生命。

t ：賦予生命

t ：賦予生命的元素是被用于的一個普通元素給HTML元素賦予生命多数物產。給物產賦予生命意味隨著時間的推移改變它的價值。例如，您能改變DIV的頂面物產的價值从10到100 5秒做它滑下來頁。


<DIV ID="myDiv" …>Some text in the DIV.</DIV>
<t:animate targetElement="myDiv" attributeName="top" from="10" to="100"
 begin="2" dur="5" …/>

使用targetElement屬性指定給，在這種情況下， myDiv賦予生命的哪個元素。設置這個屬性對您希望賦予生命元素的ID。使用attributeName屬性指定哪給物產賦予生命您在您指定與targetElement屬性的元素希望，在這種情況下，上面。 attributeName和targetElement屬性适用于所有四動畫元素。

在廣告橫幅樣品， t ：賦予生命的元素被用于重量尺寸廣告橫幅和反覆移動Internet Explorer商標。為adBanner和ieLogo元素的聲明看見樣品代碼。


<!-- These three tags animate the ad banner and its contents. -->
<t:animate id="openBanner" targetElement="adBanner" attributeName="height"
 begin="startButton.click" to="200" dur="0.5" fill="hold"/>

<t:animate id="animateLogo" targetElement="ieLogo" attributeName="left"
 begin="openBanner.end + 0.25" to="195" dur="1" autoReverse="true" 
 repeatCount="3"/>

<t:animate id="closeBanner" targetElement="adBanner" attributeName="height"
 begin="animateLogo.end + 0.25" to="70" dur="0.5" fill="hold"/>

t ：animateColor

t ：animateColor元素被用于改变對象的肤色。它使用價值具體對顏色物產。使用被預定義的顏色名字或十六進制RGB價值，指定顏色價值。關於顏色價值的更多信息，看指定動畫價值。

在廣告橫幅樣品，而文本颜色在相反方向，擺動背景顏色擺動在白色和海軍之間。樣品以前設置了背景顏色對白色和顏色海軍在申請這些之前顏色動畫。


<!-- These tags animate the background and text colors. -->
<t:animateColor targetElement="adBanner" attributeName="backgroundColor" 
to="navy" dur="4" autoReverse="true" repeatCount="indefinite" begin="0"
 end="startButton.click"/>

<t:animateColor targetElement="adBanner" attributeName="color" to="white" 
dur="4" autoReverse="true" repeatCount="indefinite" begin="0"
end="startButton.click"/>

使用calcMode屬性設置一個生氣蓬勃的元素的插值法方式。 calcMode的缺省值是線性的，造成一個元素順利地賦予生命從開始重視對结尾價值。在廣告橫幅例子中，因為calcMode被設置對缺省值的線性，顏色从海軍順利地擺動到白色。 calcMode的其他價值包括分離(躍遷)，踱步(掌握节奏)和多槽軸(样条曲线)。 calcMode屬性适用于t ：賦予生命和t ：animateMotion元素，除t之外：animateColor。 t的缺省值：animateMotion踱步。

t ：animateMotion

使用t ：給位置的animateMotion元素(頂面和左)元素賦予生命。這個元素明確地是為給頂面賦予生命，并且左物產，那么那裡是沒有需要使用attributeName屬性。反而，指定從，對或者價值屬性在頂面或左對。廣告橫幅樣品可以寫與t ：而不是t的animateMotion元素：賦予生命的元素。


<t:animateMotion id="animateLogo" targetElement="ieLogo"
 begin="openBanner.end + 0.25" to="195,0" dur="1" autoReverse="true"
 repeatCount="3"/>

当曾经t时：除頂面和左物產之外， animateMotion，您必须設置位置物產对您想要賦予生命的元素的绝對或親戚。

使用路径属性指定道路為了元素能跟隨。路径属性使用可升級的向量图形(SVG)道路句法的一個子集。以下例子使用路径属性「彈起」橫跨頁的图形文件。


<HTML XMLNS:t ="urn:schemas-microsoft-com:time">
<HEAD>
<?IMPORT namespace="t" implementation="#default#time2">
</HEAD>

<BODY>
  <t:img id="ieLogo" src="elogohalf.gif" style="position:absolute; 
   left:10; top:150; cursor:hand;"/>

  <t:animateMotion targetElement="ieLogo" 
   path="m 0 0 c 25 -150 75 -150 100 25" dur="2" repeatCount="3"
   accumulate="sum" fill="freeze"/>

</BODY>
</HTML>

★【語法測試區】B1★。

t ：設置

使用t ：設置元素設置物產直接地到具體價值。例如，您能設置頂面物產到200。


<t:set targetElement="myDiv" attributeName="top" to="200" …/>

這类似使用calcMode價值的分離，但是只变成唯一價值。

範例

即然您為廣告橫幅看見了大多数活躍代碼，这整個樣品。


<HTML XMLNS:t ="urn:schemas-microsoft-com:time">
<HEAD>
<?IMPORT namespace="t" implementation="#default#time2">

<STYLE>
  .time        { behavior: url(#default#time2); }
  .clsAdBanner    { border:thin solid black;
                height:70;
              width:300;
              text-align:center;
              font-family:Arial;
              font-size:10pt;
              font-weight:bold;
              color:navy;
              background-color:white;
            }
</STYLE>
</HEAD>

<BODY>
<DIV id="adBanner" class="clsAdBanner">
  <SPAN id="startButton" class="time" style="cursor:hand" 
   end="openBanner.end" timeAction="display">
   Add some excitement to your Web pages without writing a bunch of 
   script!<BR><BR>Click here to find out how...
  </SPAN>

  <DIV id="adContent" class="time" begin="openBanner.end + 0.25"
   end="closeBanner.begin" timeAction="display">
      Microsoft&reg; Internet Explorer 5.5 with<BR>
      HTML+TIME 2.0 makes animation easier<BR>
      than ever. No scripting required!

    <t:img id="ieLogo" style="position:absolute; left:15; top:90;"
	 src="elogo.gif"/>
  </DIV>

  <DIV class="time" begin="closeBanner.end" timeAction="display">
    <A HREF="http://www.microsoft.com/windows/ie/default.htm">
      Click here to get it!<BR>
      <t:IMG id="downloadLogo" src="msielogo.gif"/>
    </A>
  </DIV>
</DIV>

<DIV class="time" begin="closeBanner.end" timeAction="display">
  <BR><BR>
  <A HREF="animation.doc">Back to Animation Article</A>
</DIV>

<!-- The following tags do the animation. -->
<!-- These three tags animate the ad banner and its contents. -->
<t:animate id="openBanner" targetElement="adBanner" attributeName="height"
 begin="startButton.click" to="200" dur="0.5" fill="hold"/>

<t:animate id="animateLogo" targetElement="ieLogo" attributeName="left"
 begin="openBanner.end + 0.25" to="195" dur="1" autoReverse="true"
 repeatCount="3"/>

<t:animate id="closeBanner" targetElement="adBanner" attributeName="height"
 begin="animateLogo.end + 0.25" to="70" dur="0.5" fill="hold"/>

<!-- These tags animate the background and text colors. -->
<t:animateColor targetElement="adBanner" attributeName="backgroundColor"
 to="navy" dur="4" autoReverse="true" repeatCount="indefinite" begin="0"
 end="startButton.click"/>

<t:animateColor targetElement="adBanner" attributeName="color" to="white"
 dur="4" autoReverse="true" repeatCount="indefinite" begin="0"
 end="startButton.click"/>

</BODY>
</HTML>

★【範例網頁】AAAA1360★。

★【語法測試區】B1★。

指定動畫價值

使用價值屬性指定動畫價值名單。為t ：animateMotion，在分號分離的頂面或左對指定價值。


values= " 0,0; 200,0; 200,200; 0,200; 100,100; 0,0 "

為在t的高度或寬度：給標記賦予生命，指定價值在映像點。


values= " 100; 200; 300; 400 "

指定顏色價值在t ：使用被預定義的顏色名字或十六進制RGB記法的animateColor標記。


values="yellow;black;red;green;cyan"
values="#FF0000;#F88F08"

動畫重視速記

使用速記屬性從，除價值屬性之外，您能指定各自的價值，對和。

使用從，對和

使用從和對像一個值列表的屬性與二價值。


from= " 100 " to= " 400 "

使用歸因於指定價值怎麼改變由一個被测量的数量。在以下例子中，物產將由300每次改變。它將开始在100，增加到400， 700日1000年，等等。


from= " 100 " by= " 300 "

keyTimes和keySplines屬性

一起总是使用keyTimes和keySplines屬性。您必须也設置calcMode屬性連擊。使用這些屬性指定踱步沿样条曲线的一個生氣蓬勃的元素。 keyTimes和keySplines屬性类似加速并且減速屬性，除了他們提供更加美好的控制。

keyTimes

使用keyTimes屬性指定时间值名單控制動畫的步幅。價值是时间值一張分號被分離的名單，代表比例垂距到動畫元素的簡單的期間里。在名單的每連續时间值必须是大於或等於在先的时间值。有效期價值是在0和1之間的浮点数，包含。

keySplines

使用keySplines屬性指定Bezier控制点与keyTimes相关。每個控制点是描述一次段的一套四浮點價值Bezier控制点。 keySplines屬性描述keyTimes價值之间的时间。结果， keySplines價值比keyTimes总是有一個集合。

这使用keyTimes和keySplines定義的例子DIV元素怎麼橫跨頁移動。 DIV看上去減速，当它到達它的目的地，像來到交通信號燈的汽車。


<HTML XMLNS:t ="urn:schemas-microsoft-com:time">
<HEAD>
<?IMPORT namespace="t" implementation="#default#time2">
<STYLE>
  .time    { behavior: url(#default#time2); }
</STYLE>
</HEAD>

<BODY ID="oBody">
<DIV ID="oDiv" style="position:absolute; top:50; left:20; background-color:yellowgreen;">
  Animated DIV with pace<BR>
  that changes over time.

  <t:animateMotion begin="1" dur="3" calcMode="spline"
   keySplines="0 .75 .5 1"  keyTimes="0;1" values="20,0;300,0"
   fill="hold"/>

</DIV>

</BODY>
</HTML>

★【範例網頁】AAAA1361★。

★【語法測試區】B1★。

蓮居吾師	寂靜常樂	隨風	chen680801
橘子麻	琳達布之道	雲兒朵朵	☆。Lily ♥ 玲。☆
映帆	真素素	八仙果	伊伊
曼青	金鈴	holatequiero	小苑

微軟《HTML+TIME基礎動畫網頁製作技術教學文章》

宗旨:

這篇文章介紹給您HTML+TIME基礎動畫網頁製作方式，讓您能輕鬆地創造出繽紛絢麗扣人心弦的動畫網頁。

介紹

前言

宣示動畫

給賦予生命的物產

重要的事先来

動畫元素

t ：賦予生命

t ：animateColor

t ：animateMotion

t ：設置

範例

指定動畫價值

動畫重視速記

keyTimes和keySplines屬性

keyTimes

keySplines

更多資訊

線上試聽精選~01篇

可以排除病痛的幾種水果!

喵喵文章框架篇~26

喵喵單色系文章框架篇~25

喵喵單色系文章框架篇~24

喵喵文章框架篇~22

喵喵文章框架篇~23

線上試聽精選~01篇

可以排除病痛的幾種水果!