Tôi muốn tạo hiệu ứng động (chuyển tiếp) từ 1 màu này sang màu khác trong javascript thô.Hoạt ảnh màu Javascript
Tôi không muốn sử dụng bất kỳ khung công tác (jquery, mootools) hoặc css3 nào. javascript thô đơn giản.
Tôi thực sự gặp khó khăn khi thực hiện việc này, ai đó có thể giúp tôi không? :)
Một cách có thể là sử dụng setTimeout để gọi một số chức năng thay đổi dần màu (tôi giả định màu nền) bởi một số lượng nhỏ mỗi khi được gọi. Tại mỗi lần lặp lại, chỉ cần kiểm tra xem bạn đã đạt đến màu mục tiêu của mình chưa và nếu không, hãy tăng hoặc giảm giá trị RGB của bạn nếu cần.
có lẽ một cái gì đó như thế này:
lerp = function(a, b, u) {
return (1 - u) * a + u * b;
};
fade = function(element, property, start, end, duration) {
var interval = 10;
var steps = duration/interval;
var step_u = 1.0/steps;
var u = 0.0;
var theInterval = setInterval(function() {
if (u >= 1.0) {
clearInterval(theInterval);
}
var r = Math.round(lerp(start.r, end.r, u));
var g = Math.round(lerp(start.g, end.g, u));
var b = Math.round(lerp(start.b, end.b, u));
var colorname = 'rgb(' + r + ',' + g + ',' + b + ')';
el.style.setProperty(property, colorname);
u += step_u;
}, interval);
};
Bạn có thể chơi xung quanh một try it out as a jsfiddle hoặc kiểm tra các ví dụ làm việc đầy đủ dưới đây. Bạn có thể muốn cải thiện điều này bằng cách sử dụng màu HSL/HSV, mang đến cho bạn một sự chuyển tiếp đẹp hơn, nhưng tôi sẽ để điều đó tùy thuộc vào bạn.
<html>
<head>
<title>Fade</title>
<style type="text/css">
#box {
width: 100px;
height: 100px;
background-color: rgb(255,0,0);
}
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript" charset="utf-8">
// linear interpolation between two values a and b
// u controls amount of a/b and is in range [0.0,1.0]
lerp = function(a,b,u) {
return (1-u) * a + u * b;
};
fade = function(element, property, start, end, duration) {
var interval = 10;
var steps = duration/interval;
var step_u = 1.0/steps;
var u = 0.0;
var theInterval = setInterval(function(){
if (u >= 1.0){ clearInterval(theInterval) }
var r = parseInt(lerp(start.r, end.r, u));
var g = parseInt(lerp(start.g, end.g, u));
var b = parseInt(lerp(start.b, end.b, u));
var colorname = 'rgb('+r+','+g+','+b+')';
el.style.setProperty(property, colorname);
u += step_u;
}, interval);
};
// in action
el = document.getElementById('box'); // your element
property = 'background-color'; // fading property
startColor = {r:255, g: 0, b: 0}; // red
endColor = {r: 0, g:128, b:128}; // dark turquoise
fade(el,'background-color',startColor,endColor,1000);
// fade back after 2 secs
setTimeout(function(){
fade(el,'background-color',endColor,startColor,1000);
},2000);
</script>
</body>
</html>
Đây cũng là giải pháp của tôi:
<html><head>
<script type="text/javascript">
<!--
function animate(id,color0,color1,duration){
//public attributes
this.elem = document.getElementById(id);
//private attributes
var r0= parseInt(color0.substring(0,2),16);
var g0= parseInt(color0.substring(2,4),16);
var b0= parseInt(color0.substring(4,6),16);
var r1= parseInt(color1.substring(0,2),16);
var g1= parseInt(color1.substring(2,4),16);
var b1= parseInt(color1.substring(4,6),16);
var wait = 100; //100ms
var steps = duration/wait;
var rstep = (r1 - r0)/(steps);
var gstep = (g1 - g0)/(steps);
var bstep = (b1 - b0)/(steps);
var self = this;
//public functions
this.step = function() {
steps--;
if (steps>0) {
r0 = Math.floor(r0 + rstep);
g0 = Math.floor(g0 + gstep);
b0 = Math.floor(b0 + bstep);
elem.style.backgroundColor = 'rgb('+r0+','+g0+','+b0+')';
//alert(steps + ' ; ' + elem.style.backgroundColor);
window.setTimeout(function(){self.step();}, wait);
} else {
elem.style.backgroundColor = '#'+color1;
}
}
step();
//alert(this.r0);
}
//-->
</script>
</head><body>
<div id="anim" style="width:100px; height:100px; background-color:#ff0000"></div>
<input type="button" onclick="animate('anim','1122ff','ff2211',1000)" value="test" />
</body>
</html>
html at pastebin, làm thế nào để gọi hàm timeout - xem ví dụ 1, 2
nếu vải sẽ là ok bạn có thể thử làm việc đó như này;)
var context = document.getElementsByTagName('canvas')[0].getContext('2d');
var hue = 0;
function bgcolor() {
hue = hue + Math.random() * 3 ;
context.fillStyle = 'hsl(' + hue + ', 100%, 50%)';
context.fillRect(0, 0, context.canvas.width, context.canvas.height);
}
setInterval(bgcolor, 20);
Có;) `s không hoàn hảo và chỉ là một cái cớ nhưng hãy thử. Đây là bút hoàn chỉnh trên codepen.
Và bạn đã thử những gì? – antyrat
Tại sao bạn gắn thẻ câu hỏi jQuery nếu bạn không muốn sử dụng nó? – JJJ
có thể trùng lặp của [Có cách nào tốt để thực hiện đi xe đạp màu trong javascript không?] (Http://stackoverflow.com/questions/480671/is-there-a-good-way-to-do-color-cycling-in -javascript) – JJJ