连续随机调整图像大小的动画效果

Animate image randomly size continously

本文关键字：动画 随机 调整 图像 连续      更新时间：2023-09-26

回答了关于随机移动的最后一个主题。但我的一个问题仍然没有回答。关于如何创建这样的随机图像大小：http://ie.microsoft.com/testdrive/Performance/FishIETank/

那么我需要什么？数学随机和为？请建议:)

这是我的工作：http://jsfiddle.net/t9tvnvot/1/

function track(circle, horizontal,vertical,randomly) {
(....)
randomly[0] = Math.random * (circleX + Math.cos(length) * radius); //when i put this, the animation go crazy move
randomly[1] = Math.random * (circleX + Math.sin(length) * radius); //
}

请帮助和教我:)

我认为这很简单....

尝试将 Math.random

更改为 Math.random（），它应该可以工作...

function track(circle, horizontal,vertical,randomly) {
(....)
randomly[0] = Math.random() * (circleX + Math.cos(length) * radius); 
randomly[1] = Math.random() * (circleX + Math.sin(length) * radius);
}

这是小提琴编辑的代码（这段代码每次都会为蝴蝶生成一个新位置，可以离得很远）：

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var circleX = 200;
var circleY = 200; 
var radius = 150;
var length = 0;
var setX = 0;
var setY = 0;
var speed = 0.1;
function track(circle, horizontal,vertical) {
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillStyle = "black";
context.fillRect(0, 0, canvas.width, canvas.height);
context.strokeStyle = "red";
context.strokeRect(5, 5, 490, 490);
//circle track move
circle[0] = Math.random() * (circleX + Math.cos(length) * radius); 
circle[1] = Math.random() * (circleY + Math.sin(length) * radius);

length += speed;
context.beginPath();
var img = new Image();
img.src = "http://es.fordesigner.com/imguploads/Image/cjbc/zcool/png20080526/1211766513.png";
context.drawImage(img, circle[0], circle[1], circle[2], circle[3]);
context.fill();
}
setInterval(function () {
track
([setX, setY, 50, 50], [setX, setY, 50, 50], [setX,setY, 50, 50]);}, 300);

另请参阅我增加了间隔功能的时间，因此它看起来确实很混乱......

这是另一个例子，但这个代码蝴蝶只出现在前一个位置的激烈程度，所以它似乎没有消失：

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var length = 0;
var x = 250;
var y = 250;
var setX = 0;
var setY = 0;
var speed = 0.1;
function track(circle, horizontal, vertical) {
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillStyle = "black";
context.fillRect(0, 0, canvas.width, canvas.height);
context.strokeStyle = "red";
context.strokeRect(5, 5, 490, 490);
//movement
if (x >= 0) {
    if (x <= 450) {
        if (y >= 0) {
            if (y <= 450) {
                if (Math.floor(Math.random() * 4) == 0) {
                    x = x + Math.random() + 15;
                }
                if (Math.floor(Math.random() * 4) == 2) {
                    y = y + Math.random() + 15;
                }
                if (Math.floor(Math.random() * 4) == 1) {
                    x = x - Math.random() - 15;
                }
                if (Math.floor(Math.random() * 4) == 3) {
                    y = y - Math.random() - 15;
                }
                if (x < 0) {
                    x = 0;
                }
                if (y < 0) {
                    y = 0;
                }
                if (x > 450) {
                    x = 450;
                }
                if (y > 450) {
                    y = 450;
                }
                circle[0] = x;
                circle[1] = y;
                length += speed;
                context.beginPath();
                var img = new Image();
                img.src = "http://es.fordesigner.com/imguploads/Image/cjbc/zcool/png20080526/1211766513.png";
                context.drawImage(img, circle[0], circle[1], circle[2], circle[3]);
                context.fill();
            }
        }
    }
}
}
setInterval(function () {
    track([setX, setY, 50, 50], [setX, setY, 500, 500], [setX, setY, 50, 50]);
}, 30);

根据您的评论，您希望蝴蝶也改变大小，这是新代码：

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var length = 0;
var x = 250;
var y = 250;
var z = 50;
var setX = 0;
var setY = 0;
var speed = 0.1;
function track(circle, horizontal, vertical) {
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillStyle = "black";
context.fillRect(0, 0, canvas.width, canvas.height);
context.strokeStyle = "red";
context.strokeRect(5, 5, 490, 490);
//movement
if (x >= 0) {
if (x <= 450) {
    if (y >= 0) {
        if (y <= 450) {
            if (Math.floor(Math.random() * 4) == 0) {
                x = x + Math.random() + 15;
                z = z-15;
            }
            if (Math.floor(Math.random() * 4) == 2) {
                y = y + Math.random() + 15;
                z = z-15;
            }
            if (Math.floor(Math.random() * 4) == 1) {
                x = x - Math.random() - 15;
                z = z+15;
            }
            if (Math.floor(Math.random() * 4) == 3) {
                y = y - Math.random() - 15;
                z = z+10;
            }
            if (x < 0) {
                x = 0;
            }
            if (y < 0) {
                y = 0;
            }
            if (x > 450) {
                x = 450;
            }
            if (y > 450) {
                y = 450;
            }
            if (z<20){
                z=20;
            }
            if (z>100){
                z=100;
            }
            circle[0] = x;
            circle[1] = y;
            circle[3] = z;
            circle[2] = z;
            length += speed;
            context.beginPath();
            var img = new Image();
            img.src = "http://es.fordesigner.com/imguploads/Image/cjbc/zcool/png20080526/1211766513.png";
            context.drawImage(img, circle[0], circle[1], circle[2], circle[3]);
            context.fill();
        }
    }
}
}
}
setInterval(function () {
    track([setX, setY, 50, 50], [setX, setY, 500, 500], [setX, setY, 50, 50]);
}, 60);

我刚刚将带有上限 （100） 和下限 （20） 的 math.random 添加到圆圈 [3] 和圆圈 [2] 中。

希望对你有帮助...

相关文章：