Home > Developer > JavaScript
There are many JavaScript effects on the Internet. The biggest feature of these effects is "motion", that is, animation effects. In fact, the use of Javascript in Web pages has become a trend in recent years, and Flash, which has been quite cool in the web page animation field in the past few years, is also a little low-key this year. After all, as a rich clientProgramFlash is a little bulky for the tangled bandwidth, and Flash must have plug-in support. However, JavaScript, a client scripting language, can only occupy a small amount of space and can solve some simple animation problems without complicated plug-in support and download. For example: movement, deformation, and so on.
Currently, many excellent class libraries have been well developed, such as jquery, extjs, prototype, and some small animation and easing class libraries, I found that there were very few detailed information on the Internet. Includes tweenAlgorithmOnly examples are not explained in detail. Of course, there are many masters, but it is possible that masters are seldom willing to spend time explaining them.
Next I will do my best to explain the relevant motion algorithms and examples of JavaScript applications in detail, and provide as much information as possible for you to learn.
I. Motion algorithms involve some high school physics and mathematics knowledge
I am from liberal arts, and the mathematics and physics in high school are quite bad. My most brilliant math score was 9 points, and my physics score was 14 points. Is there any wooden kids shoes that are lower than mine? Wood? Well, no one answered me, so I should forget it... so I believe the following knowledge should be quite easy for you.
Motion: According to our requirements, we simply define motion as the changing position of an object over time. There are three elements: time, start position, and end position. In addition, there is a one-to-one relationship between the location and time.
In JavaScript, we can use setinterval or setTimeout to solve the time problem. We can use the style attribute of the DOM object to control the location problem.
SetP (position)Is the location,T (time)For time
1:P = random (t)
The function for converting to Javascript is:
1:P =Function(T ){2:VaRV = 2;// Speed3:ReturnT * V ;}
We know the speedV (velocity) = distance/Time, Then we set the distanceC (Change positioin), After the time isD (druation), Then
P = T * (C/D)
We can use the above formula to obtain(C/D)Moving time at a specified speedTLocationPBut please note that there is actually a premise: the initial position of the object is 0.
If we set the current position of the objectB (begining positoin), Then
P = T * (C/D) + B
Put this formula into Javascript. (I finally felt like a high school computing equation)
1:P = funciton (T, B, C, D ){2:ReturnT * (C/D) + B;3:}
Format.
1:Math. Prototype. lineartween =Function(T, B, C, D ){2:ReturnT * C/D + B;3:}
In this way, we get the simplest linear motion function.
In order to describe the problem more vividly, we introduce the coordinate system, so linear motion can be expressed here (figure 1). This is the simplest linear expression in our high school mathematics: Y = X; the slope is 1.
Figure 1
2. A simple example
Next we will introduce this formula into JavaScript, and take a simple example to look at the actual effect.
1:<!Doctype Html Public "-// W3C // dtd xhtml 1.0 transitional // en" Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2:<Html Xmlns= "Http://www.w3.org/1999/xhtml">3: <Head>4:<Title>Tweentest</Title>5:<Meta HTTP-equiv= "Content-Type" Content= "Text/html; charsets = UTF-8" />6:<Meta Name= "Generator" Content= "Ntcsoft" />7:<Meta Name= "Author" Content= "Mrzhou" />8:<Meta Name= "Keywords" Content= "" />9:<Meta Name= "Description" Content= "" />10:<Style Type= "Text/CSS">11:# Movelinear {12:Width: 50px;13:Height: 50px;14:Background: # CCC;15:Border: 1px solid;16:}17:</Style>18:19: </Head>20:21: <Body>22:<Div ID= "Movelinear"> </Div>23: </Body>24: <Script Type= "Text/JavaScript">25:26:// Set $ as a function for getting element objects for future use.27:$ =Function(ID ){Return TypeofId ="String"? Document. getelementbyid (ID): Id}28:29:/* Des: tween algorithm.30:T: The time when the animation has been executed (the actual number of executions/frames)31:B: Start position32:C: Termination location33:D: The elapsed time from the starting position to the ending Position (actual number of executions/frames )*/34:Tween = {35:Linear:Function(T, B, C, D ){36:ReturnT * C/D + B;37:}38:}39:/* Des: Specifies the animation object for element movement.40:Movetype: the method by which elements are moved. The default value is linear.41:Parameters:42:Mvtp = string Movement Mode43:Startmove: a function for moving elements.44:Parameters:45:Mvobj = ID of the element to which the string is moved46:Mvtp = string movement mode */47:Move = {48:// Element movement method: The default value is linear.49:Movetype:Function(Mvtp ){ReturnMvtp &&Typeof(Mvtp) = "string" & tween [mvtp]? Mvtp:"Linear"},50:51:// Function for Moving Elements52:// Mvobj: ID of the element to which the string is moved53:// Mvtp: String movement type54:Startmove:Function(Mvobj, mvtp, T, B, C, D ){55:56:// Determine whether the input parameter is correct. If t exists, it is still T. Otherwise, set the default value for T, and so on.57:T? T: T = 0; B? B: B = 0; C? C: c = 300; D? D: D = 50;58:// Determine whether the element to be moved has a relative or absolute positioning attribute. 1 is only used to complete the syntax format (if this attribute is not available, the element cannot be moved)59:$ (Mvobj). style. Position ="Relative"| $ (Mvobj). style. Position ="Absolute"60:? 1: $ (mvobj). style. Position ="Relative";61:62:// Repeat the function to change the element position every 30 milliseconds63:Mvtimer = setinterval (Function(){64:// Determine whether the animation execution time (number of times/number of frames) is smaller than the total time. If yes, continue to execute the change position function. Otherwise, clear the interval.65://? And: The function is an anonymous function. Add () to the end of the anonymous function to directly call this function, which is easy to write.66:// Tween [move. movetype (mvtp)] () first accesses an attribute object of Tween through the object array attribute OBJ ["X"], and then adds () to execute this function object.67:T <= d68:?Function() {$ (Mvobj). style. Left = parseint (Tween [move. movetype (mvtp)] (T, B, C, D) +"PX"; T ++ ;}()69:: Clearinterval (mvtimer );70:}, 30)71:}72:}73:74:Move. startmove ("Movelinear");75:</Script>76:</Html>Through the above animation, we found that the gray box can be smoothly moved from the left to the right, which seems to have met our requirements, however, in the above example, we will simply move a box from the 0px on the left to the 300px position on the right at a speed of 6 Px/30 ms (why is the speed of 6 Px/30 ms here explained below), now let's take a look at the animation time consumption. According to our theory, every 30 ms moves 6 PX, the animation time of 1500 PX should be 30 ms * 50 = Ms, however, if the shoes are tested carefully, we will find that the total animation time is not as accurate as we think.
Therefore, we add two timestamps in the middle of the program to calculate the total number of animations:
1:......2:$ (Mvobj). style. Position ="Relative"| $ (Mvobj). style. Position ="Absolute"3:? 1: $ (mvobj). style. Position ="Relative";4:// Start Timestamp5: Strt =NewDate ();6:// Repeat the function to change the element position every 30 milliseconds7:Mvtimer = setinterval (Function(){8:......1:......2:?Function() {$ (Mvobj). style. Left = parseint (Tween [move. movetype (mvtp)] (T, B, C, D) +"PX"; T ++ ;}()3:// End Timestamp and total animation duration4::Function() {Clearinterval (mvtimer );Alert (NewDate ()-strt );}()5:}, 30)6:......
The following result is obtained:
Moreover, if you test the animation several times and find that the results may be different each time, it is absolutely a waste of time to precisely control the animation execution time. after a deep dive, we found that the reason for the time error was quite tangled.
Before we enter the next stage, let's take a look at this problem. It is relatively difficult to solve it when the complexity of the problem increases.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
