HTML5 Front-end Video Tutorial: Sports and Game Development

In the process of web page development, we must consider how to interact with users in a friendly and interesting way.

For example: the navigation bar sliding animation effects, click the add to shopping cart button through parabola to join the right side of the shopping cart animation effects, of course, there are some web game development: wechat masturbation, brick and so on. So if we want to achieve these fun and interesting animations, we need to be proficient in the basic animation [movement], so this part of the study, we will study the movement, and through a lot of examples to help you complete this stage of learning.

Js motion, in essence, is about making DOM elements on the Web move. You want the DOM to move and change its position properties, such as height and width, left margin, top margin, transparency, etc. The principle of animation is to string objects in different states into a continuous pattern, just like a book. You draw a few small figures, and when you turn over the book, you can see the small figures moving. The same goes for JS animations. The DOM in different states can be animated using timer control.

So let’s first look at how do we achieve motion

Methods:

1. Use absolute positioning for moving objects

2. Move the object by changing its left, right, top, and bottom attributes. For example, to move to the right or left, you can use offsetLeft to control left and right movement.

Steps:

1, before the start of movement, first remove the existing timer (because: continuously click the button, the object will move faster and faster, resulting in motion chaos)

2. Start the timer to calculate the speed

3, separate the movement from the stop (if/else), judge the stop condition, execute the movement

In javascritP, there are two special functions for timers:

1. Timer =setTimeout(function name,time); 2. Loop timer: timer=setInterval(function name,time)

Function () is a function that executes an event when the timer fires. It can be a function or several functions, or a javascript statement, but it needs to be used. Separated; Delaytime is the time of the interval, in milliseconds.

The countdown timer is to trigger the event after a specified time, and the cycle timer is to repeatedly trigger the event when the interval time comes, the difference lies in: the former only once, and the latter is non-stop.

Countdown timer is commonly used in page only need trigger a situation, such as clicking a button to jump to the corresponding page in a certain time after site, can also be used to judge whether a visitor on your site of the “old”, if not, you can in 5 seconds or ten seconds after the jump to the corresponding site, Then tell him to come back later and press a button at a certain location to get in quickly.

Loop timers are typically used for site effects that need to be duplicated, such as a javascript scrollbar or status bar. They can also be used to represent the background of a page as an image of snow. These events need to be run at intervals.

Sometimes we want to remove the added timer, so we can use clearTimeout(Timename) to turn off the countdown timer and clearInterval(timename) to turn off the loop timer.

1. Motion: to move at a constant speed (to make something move)

Use of timers to DIV with absolute positioning offsetLeft

➤ Problem: stop when a certain location is reached solve: make a judgment, when the conditions are met, turn off the timer (save timer timer) speed slow (generally do not move the time, but change the digital-speed) with variable speed

➤ div can’t stop when offsetLeft is equal to 300. ➤ div can’t stop when offsetLeft is equal to 300

➤ Click the button, execute the function, start the timer (execute the current function at least once)

➤ CearlnterVal () ensures that only one timer works at a time.

Example 1(Share menu/mouse in and out, mouse out and in) ▼

Example 2 (fade-in effect/mouse move in fade-out, mouse move out fade-in) ▼

Example 3 Stop conditions for uniform motion (close enough distance

2, variable speed movement

The speed is determined by the distance. Speed =(target value – current value)/ scaling coefficient. If there is no scaling coefficient, the speed is too high, and the destination is reached instantly. There is no process

➤ The problem: it doesn’t really get to 300 because 0.9 pixels is the smallest unit the screen can display and does not round math.ceil () up and math.floor () down

➤ Math.floor () : speed=speed>0? Math.ceil ( speed ): Math.floor ( speed )

Example code:

3. Multi-object motion

Multiple divs, mouse into the widened motion frame to pass the parameter OBj, know which object to move to use the buffer must be rounded

➤ Problem: div didn’t move back // clear the previous timer reason: Only one timer solution: add timer on the object so that each object has a timer. Timer as object property

Multiple divs fade-in and fade-out first turn off the timer on the object. Lesson: Multiple object motion frames do not share everything

➤ The problem: not because of timers, but because alpha solves: attached to objects as properties/not as variables

➤ Problem: offset bug plus border width

Reason: offsetWith is not really width, it takes the box model size

Solution: hide the width and throw it between lines,parselnt (odiv.style.width)

GetStyle (obj, name) currentStyle, getComputedStyle (border) offset

Example: Multi-object motion frame ▼

4. Arbitrary value motion

The units of movement of any value are transparency and px. Any value of px unit ▼

5. Chain exercises

The extra parameter, only when passed in to call the mouse to widen, after the end of the pop up ABC first horizontal expansion. Then move the mouse out, first change back to opaque, shorter, narrower