Tip: after the article is written, the directory can be generated automatically. Please refer to the help document on the right for how to generate it
preface
Tip: Here you can add the general contents to be recorded in this article:
For example, with the continuous development of artificial intelligence, machine learning technology is becoming more and more important. Many people have started learning machine learning. This paper introduces the basic content of machine learning.
Tip: the following is the main content of this article. The following cases can be used for reference
1, Animation implementation principle
The core is that setInterval() repeatedly moves the position of the box
Use steps
1. Gets the current position of the box
2. Move the box + 1 distance from its current position
3. Repeat this operation with a timer
Note that this element needs to add positioning before you can use element style. left
<style>
div{
position:absolute;
left:0;
height:100px;
height:100px;
background-color:pink;
}
</style>
<body>
<div></div>
<script>
//offsetLeft gets the current position and assigns the obtained position to style left
var div=document.querySelector('div');
var timer=setInterval(function(){
if(div.offsetLeft>=400){
//Stopping animation is essentially stopping the timer
clearInterval(timer);
}
div.style.left=div.offsetLeft+1+'px';
},30)
</script>
</body>
2, Simple encapsulation of animation functions
1. Note that the function needs to pass in two parameters, the animated object and the moving distance
The code is as follows (example):
var div=documet.querySelector('div');
function animate(obj,function){
var timer=setInterval(function(){
if(obj.offsetLeft>target){
clearInterval(timer);
}
div.style.left=obj.offsetLeft+1+'px';
},30)
//Function call
animate(div,30);
}
2. Mark different timers for different elements
The code is as follows (example): if multiple elements use animation functions and var declares timers every time, we can use different timers for different elements (we use our own timers)
Core principle: JS is a dynamic language, which can easily add attributes to the current element
// var obj={}
//obj.name='andy'; obj.timer=
function aninate(obj,target){
//When you keep clicking on the button, this element will be faster and faster because too many timers are turned on
//The solution is that there is only one timer. First clear the original timer and only keep the current timer
clearInterval(obj.timer);
obj.timer=setInterval(function(){
if(obj.offsetLeft>target){
clearInterval('timer');
}
obj.style.left=obj.offsetLeft+1+'px';
},30)
}
var document.querySelector('div');
//Call function
animate(div,30);
3. Principle of jog animation
:
Slow motion animation is to change the movement speed of elements. The most common is to stop the speed slowly
Idea:
1. Each time the moving distance slowly decreases, the speed will slowly fall down
2. Core algorithm: (target value - current position) / 10 as the distance step of each movement
3. Stop condition: stop the timer when the current box position is equal to the target position
4. Realization of basic code of jog animation
function animate(obj,target){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
//The step value is written to the timer
var step=(target-obj.ofsetLeft)/10;
//Stop the animation when the box position is equal to the target position
if(obj.offsetLeft==target){
//Clear animation
clearInterval(obj.timer)
}
//Each time you add 1, this step should be a slowly decreasing value, that is (target value - current position) / 10
//Each calculation changes the step value, so it should be written in the timer
obj.style.left=obj.offsetLeft+step+'px';
},30)
}
div=doucment.querySelector('div');
animate(div,30);
//The uniform animation is the current position of the box + a fixed value of 10
//Jog animation box current position + changed value
5. Jog the movement between multiple target values of animation
function animate(obj,target){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
//The step length is written into the timer
//Change the step size to an integer, and do not have the problem of decimal, that is, round to the large (positive value)
//Negative values are taken smaller
//var step=Math.ceil((target-obj.offsetLeft)/10);
var step=(target-offsetLeft)/10;
step=step>0?Math.ceil(step):Math.floor(step);
if(target==obj.offsetLeft){
//Stop Timer
clearInterval(obj.timer);
}
obj.style.left=obj.offset+step+'px';
},30)
}
var div=document.querySelecor(''div);
animate(div,30);
6. Add callback function to animation function
Callback function principle: a function can be used as a parameter to transfer this parameter to another function. After the function is executed, the function passed in is executed. This process is called callback
The callback function writes to the end of the timer
function animate(obj,target,callback){
//It is equivalent to callback() when callback=function() {} is called
clearInterval(obj.timer);
obj.timer=setInterval(function(){
if(target==offsetLeft){
//The callback function is written to the end of the timer
if(callback()){
//Call function
callback();
}
clearInterval(obj.timer);
}
var step=(target-offsetLeft)/10;
step=step>0?Math.ceil(step):Math.floor(step);
obj.style.left=obj.offsetLeft+step+'px';
},30)
}
var div=document.querySelector('div');
animate(div,30,function(){});
summary
The animation functions are encapsulated in a separate JS file
This animation function is often used in the future. It can be encapsulated in a JS file separately. You can refer to this JS file when using it
Create a new file separately
function animate(obj,target,callback){
//It is equivalent to callback() when callback=function() {} is called
clearInterval(obj.timer);
obj.timer=setInterval(function(){
if(target==offsetLeft){
//The callback function is written to the end of the timer
if(callback()){
//Call function
callback();
}
clearInterval(obj.timer);
}
var step=(target-offsetLeft)/10;
step=step>0?Math.ceil(step):Math.floor(step);
obj.style.left=obj.offsetLeft+step+'px';
},30)
}
var div=document.querySelector('div');
animate(div,30,function(){});