特效常用参数

所有核心特效都可以设置以下常用选项：

序号	选项及描述
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

打印页面