for example, if you want to move from 0 to 100 1px at this speed, you can move x coordinates + 1 per frame. What if you want to move obliquely from 0 ~ 0 to 100 ~ ~ 20 at this speed?
for example, if you want to move from 0 to 100 1px at this speed, you can move x coordinates + 1 per frame. What if you want to move obliquely from 0 ~ 0 to 100 ~ ~ 20 at this speed?
x
css3 implementation:
div {
animation: myfirst 5s;}
@ keyframes myfirst
{
0% {left:0px; top:0px;}
100% {left:100px; top:20px;}}
jquery implementation:
$("- sharpbox"). Animate ({left: "100px", top: "20px"});
then do it yourself:
function animate(sX,sY,eX,eY,time,call){
this.currentX = sX,this.currentY = sY;
this.speedX = (eX - sX)/(time*100),this.speedY = (eY - sY)/(time*100);
this.start = function(){
let vm =this;
setTimeout(function(){
if(vm.currentX < eX){
vm.currentX += vm.speedX;
vm.currentY += vm.speedY;
call(vm.currentX,vm.currentY);
vm.start();
}
},10)
}
}
var callBack = function(x,y){
console.log('x =>',x,'y =>',y)
}
var animate1 = new animate(0,0,200,100,5,callBack)
animate1.start()
:dom 
was previously done with raf, which can calculate the distance of x-axis and y-axis movement per frame, and px under 5 * root sign (1 to 16) px, root sign (1 to 16). Then add this to the absolute position of the moving element.
Previous: Yii prompt message to the user
Next: Scratch secondary development, material library is empty
encounters a javascript algorithm problem, which requires that find out all prime factors of a number algorithm I designed: function primeFactors(n){ var factors = []; var divisor = 3; if (n % 2==0) factors.push(2); while(n>5){ ...
Let the bullets be fired according to the direction of the mouse click, just like those who are good at fishing ...
find out how many zeros there are between 1 and 1 million ...
encounters an algorithm; similar to var a = [1 br > how to deal with it into a two-digit array [[1], [2], [4Power4], [5Power5]] < beacon > I wrote it myself: uh. how to deal with it into a two-digit array [[1], [2], [4parry 4], [5pjre 5]]. Loop twice, n...
has a select drop-down box with five option elements with value values from 1 to 5 <select> <option value="1">1< option> <option value="2">2< option> <option value="3">3< ...
given a non-empty array of integers, each element appears twice except for an element that appears only once. Find the element that only appears once. example 1: : [2,2,1] : 1 example 2: : [4,1,2,1,2] : 4 the answer with the highest running effici...
let arrs=[102,233,45,350,130,220,195,240] I want arrs to split into two groups, but I want the sum of the two groups to be as close as possible. The smaller the difference, the better. My own idea is to re-sort, from small to large, and then judge the s...
I want to output all possible routes, but in the end, I only output one route. I haven t figured out Orz for a long time. the following is the source code: ma mbmb.fill(0); 0 1 (x0,y0) position=[] direction=[[-1,0],[0,-1],[1,0],[0,1...
use JavaScript to build a segment tree, and recursion is used in the construction process. This should make the call stack overflow. I wonder if there is any other way to solve this problem. < H1 > Code < H1 > ...
data A: [ { "id":340, "name":"", "sub":[ { "id":341, "name":"" }, { &q...
for example: [1, 2, 3, 4, 5] after sorting: 1, 3, 5, 2, 4 Note: does not create a new array , that is, it is changed on the basis of the original array. ...
php algorithm-- catching water droplets A novice PHP programmer, who has been on the job for half a year and is still hovering in endless additions, deletions, modifications and data optimization, has recently been brought into the algorithm pit by th...
directory tree initialization initially returns only a two-tier structure. [ { name: , path: , id: 1, childs: 2, children: [ { name: 01 , path: 01 , id: 2, ...
there are now such data objects arr = [ {] start: 1, end: 12 }, { start: 2, end: 5 }, { start: 6, end: 10 }, . ] how to determine whether the start and end of each object are continuous for example, the above situation is incorrect, because 1-12 c...
What is the data structure corresponding to Object in js? What is its logical structure and physical structure? ...
topic description as shown in the question, if you know the GPS coordinates of five points, how to find the sixth point and minimize the sum of the distances from the other five points, and find out his GPS coordinates would like to ask if you have ...