特效常用引數

所有核心特效都可以設定以下常用選項：

序號	選項及描述
1	duration 特效持續時間（秒），以浮點數表示。預設為 1.0。
2	fps 目標每秒幀數。預設為 25。不能高於 100。
3	transition 設定一個函式來修改動畫的當前點，該點介於 0 和 1 之間。提供以下過渡： Effect.Transitions.sinoidal（預設） Effect.Transitions.linear Effect.Transitions.reverse Effect.Transitions.wobble Effect.Transitions.flicker
4	from 設定過渡的起點，介於 0.0 和 1.0 之間的浮點數。預設為 0.0。
5	to 設定過渡的終點，介於 0.0 和 1.0 之間的浮點數。預設為 1.0。
6	sync 設定特效是否應自動渲染新幀（預設情況下是自動渲染的）。如果為 true，則可以透過呼叫特效的 render() 例項方法手動渲染幀。這由 Effect.Parallel() 使用。 .
7	queue 設定排隊選項。當與字串一起使用時，它可以是front 或end，以便在全域性特效佇列的開頭或結尾排隊特效，或者是一個佇列引數物件，該物件可以具有 {position:front/end, scope: scope, limit:1}。
8	delay 設定特效實際開始前要等待的秒數。預設為 0.0。
9	direction 設定過渡的方向。值可以是 'top-left'、'top-right'、'bottom-left'、'bottom-right' 或 'center'（預設）。僅適用於 Grow 和 Shrink 特效。

以下是一個應用上述一個或多個引數的示例。所有引數都放在 {} 中，並以逗號 (,) 分隔。

線上演示

<html>
   <head>
      <title>script.aculo.us examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects" ></script>
   </head>
	
   <body>
      <p>Try by giving different parameters</p>

      <div onclick = "new Effect.Opacity(this,
         {
            duration: 2.0,
            transition: Effect.Transitions.linear,
            from: 1.0,
            to: 0.5
         });" >
         Click here to see the result:
      </div>	
   </body>
</html>

這將產生以下結果：

回撥方法

在特效執行期間，您可以將上述任何引數應用於各個事件中的任何元素。這是透過為該元素編寫 JavaScript 回撥方法來實現的。

要使用回撥方法，您需要另外四個引數，如下所示：

序號	回撥及描述
1	beforeStart 在開始主要的特效渲染迴圈之前呼叫。
2	beforeUpdate 在特效渲染迴圈的每次迭代中呼叫，在重繪發生之前。
3	afterUpdate 在特效渲染迴圈的每次迭代中呼叫，在重繪發生之後。
4	afterFinish 在特效的最後一次重繪完成之後呼叫。

在特效物件中，有一些有用的變數，您可以在回撥函式中訪問和使用它們。

序號	變數及描述
1	effect.element 應用特效的元素。
2	effect.options 儲存您提供給特效的選項。
3	effect.currentFrame 最後渲染的幀數。
4	effect.startOn 特效啟動的時間（毫秒）。
5	effect.finishOn 啟動特效後，特效將完成的時間（毫秒）。
6	effect.effects[] 在 Effect.Parallel 特效中，有一個 effects[] 陣列，其中包含並行特效組成的各個特效。

示例

以下示例顯示如何使用回撥

線上演示

<html>
   <head>
      <title>script.aculo.us examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects"></script>
		
      <script type = "text/javascript">
         function OnFinish(obj){
            alert("Finishing - I'm element :" + obj.element.id);
         }
			
         function OnStart(obj){
            alert("Starting - I'm element :" + obj.element.id);
         }
			
         function myEffect(myObject){
            new Effect.Highlight(myObject, 
               {
                  startcolor:'#ffffff',
                  endcolor:'#ffffcc',
                  duration: 0.5,
                  afterFinish: OnFinish,
                  beforeStart: OnStart
               }
            );
         }
      </script>
   </head>
   
   <body>
      <p>Click following line to see the result:</p>

      <div onclick = "myEffect(this)" id = "bestdiv">
         Click me to see the result!
      </div>		
   </body>
</html>

這將產生以下結果：

注意 - 此處startcolor 和 endcolor 是特效特定的引數。我們將在Effect.Highlight 中討論這些引數。

scriptaculous_effects.htm

列印頁面