Script. aculo. US development series (III): coreeffect)

All animations are made up of basic animations. In effects, a type of animation is called core effects (core animation), which forms the basis of all animations.ArticleIntroduce these basic animations and use them together to form a complex animation.

1. Opacity

It is no different from the animation mentioned above, but it has a special option: from/to: Both parameters are float and between 0 and 0 ~ 1. This is true for all options from/to. Note that opacity is opacity, so the default value is 0.0.

2. Move

Three special parameters: X, Y, mode, xy: the offset of the movement. The mode is "absolute"/"relative". There is no difference between the two modes.Source codeIt is only intended to prevent a bug in operabrowser.

3. moveBy

One more call Method for move

// Move
VaR Oanimation = New Effect. Move ( " Imgmove " , {X:100, Y:100, Mode: 'relative ', afterfinish: Finish} );

// MoveBy
VaR Oanimation = New Effect. moveBy ( " Imgmoveby " , 100 , 100 , {Afterfinish: Finish} ); 4. Scale

Deformation effect. The parameters are as follows:

• Scalex: True/false: whether to stretch the X axis. The default value is true.
• Scaley: True/false: whether to stretch the Y axis. The default value is true.
• Scalecontent: True/false indicates whether to stretch the child element of an element. The default value is true.
• Scalefromcenter: True/false indicates whether to use the center as the base point. The default value is false.
• Scalemode: "box"/"Contents '" by default, box is used. This means that the element coordinates are calculated to stretch the element. In "contents" mode, only the content is stretched, to stretch the content, you just need to stretch the font and then extend the elements outside. The two are different at runtime. For more information, see the example.
• Scalefrom: 0 ~ 100 initial stretch ratio. The default value is 100.
• Scaleto: the proportion of the last state. This parameter cannot be blank.

// Two calling methods of scale
VaR Oanimation = New Effect. Scale ( " Imgtest " , 200 );
// Scale up by 200

VaR Oanimation = New Effect. Scale ( " Divscale2 " ,{
Afterfinish: finish,
Scaleto: 200 // Percentage to enlarge
/* This is the default option */
Scalex: True ,
Scaley: True ,
Scalecontent: True ,
Scalefromcenter: True ,
Scalemode: 'contents ', // 'Box' or 'contents' or {} with provided values
Scalefrom: 100

}); 5. hightlight

This effect is used to change the background color of an element. The parameters are as follows:

• Startcolor: the background color of the beginning. The attribute is similar to "# 12345f", which is the same as the CSS style.
• Endcolor: The last background color.
• Keepbackgroundimage: Specifies whether to keep the background image. The default value is false.
• Restorecolor: Specifies whether to store the initial background color. The default value is true.

VaR Oanimation = New Effect. Highlight ( " Divhighlight " ,
{
Startcolor: '# cbcbcb ',
Endcolor :'#000000',
Duration:2,
Keepbackgroundimage:True,
Restorecolor:True,
Afterfinish: Finish
} );


Function Finish (OBJ)
{
Alert (obj. Options. restorecolor );
} 6. scrollto

When this effect is applied, the page gradually scrolls to the specified element. The parameters are as follows:

• Offset: Y-axis deviation. Take a closer look.CodeIt is found that the scrollto effect only rolls the Y axis, so the deviation is only in the Y axis.

7. Parallel

This is the most important method for further development. It is used for parallel animation. The combination effect (combine effect) is nothing more than the combination of the above animation with parallel, in order to form such a cool effect.

The constructor parameters are an array of effect and options. Note that options applies to all animations. Generally, we only need to set the parameters here, also note the effect option. set sync to true.

VaR Oanimation = New Effect. Parallel (
[
New Effect. Move ( " Imgparallel " , {X: - 100 , Y: 100 , Sync: True }),
New Effect. opacity ( " Imgparallel " , {From: 0.0 ,: 0.9 , Sync: True })
],
{
Transition: effect. transitions. Linear,
Duration: 2.0
}
);

All examples in this article run http://www1.qcxy.hb.cn/qphy/Script_Aculo_Us/CoreEffects.html

The above example can already be used to develop your own composite animations. The next article will discuss more advanced topics of performance development.