根据所提供的百分比值与颜色成长方格 [英] Grow square div with color based on the percentage value provided
本文介绍了根据所提供的百分比值与颜色成长方格的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我工作的一个正方形图形动画。该广场应在X / Y轴（左上角）的零增长到轻松的百分之确定尺寸。任何人都可以向我提供任何提示来完成呢？这是我到目前为止有： http://jsfiddle.net/2n6kduL4/3/
进度从左至右发生。但是，它已经从左上角到右下角填写。
VAR帆布=的document.getElementById（'myProgress'）;
VAR myPerc = 500;
CTX = canvas.getContext（'2D'）;ctx.fillStyle =RGB（255，0，0）; //红ctx.fillRect（0，0，myPerc，100）;
ctx.save（）;
为（变量I = 0; I＆≤（myPerc * 0.5）;我++）{
ctx.fillStyle =RGB（0，255，0）; // greeen
（函数（ⅰ）{
的setTimeout（函数（）{
ctx.fillRect（0，0，+ I，100）;
}，1000 * I）
}）（一世）;
}
解决方案
您可以实现你的动画+采用彭纳的缓和功能和 requestAnimationFrame 定时回路缓解柱状图
的方法如下：的
定义你的每一个柱状图酒吧JavaScript对象：
//创建一些酒吧对象，并把它们放在一个酒吧[]数组
VAR酒吧= [];
VAR BAR1 = {X：0，Y：20，宽：1，身高：50，填写：红色};
VAR BAR2 = {X：0，Y：100，宽度：1，身高：50，填写：绿色};
VAR bar3 = {X：0，Y：180，宽度：1，身高：50，填充：'蓝'};
bars.push（BAR1，BAR2，bar3）;
然后就可以使用动画彭纳的缓和方程每个栏的结局宽度。这里有几个众多彭纳宽松的算法前$ P pssed如JavaScript函数$的。你要做的就是饲料中的电流经过的时间，开始值，总的持续时间和宽松的过程中所需的总价值的变化。该功能彭纳回您根据当前时间的电流（缓解）值。
// T：经过时间内持续，
// B：开始值，
// D：总时长
// C：从开始值总变化，
VAR渐变效果= {
线性：函数（T，B，C，D）{回报（C * T / D + B）;}，
easeInQuint：功能（T，B，C，D）{回报（C *（T / = D）* T * T * T * T + B）;}，
easeOutQuint：功能（T，B，C，D）{回报（C *（（T = T / D-1）* T * T * T * T + 1）+ B）;}，
}
这里是例如code和演示
在code创建一个可重用的动漫课堂可以使用的栏对象上面创建了动画的持续时间，缓解属性值：
\r
\r\r
\r VAR帆布=的document.getElementById（画布上）;\r
变种CTX = canvas.getContext（2D）;\r
变种CW = canvas.width;\r
变种CH = canvas.height;\r
\r
VAR动画=（函数（）{\r
//渐变效果\r
// T：通过持续的时间经过的时间，\r
// B：开始值，\r
// D：总时长\r
// C：从开始值总变化，\r
VAR渐变效果= {\r
线性：函数（T，B，C，D）{回报（C * T / D + B）;}，\r
easeInQuint：功能（T，B，C，D）{回报（C *（T / = D）* T * T * T * T + B）;}，\r
easeOutQuint：功能（T，B，C，D）{回报（C *（（T = T / D-1）* T * T * T * T + 1）+ B）;}，\r
}\r
//\r
功能动画（目标，性质，endingValue，持续时间，宽松）{\r
this.target =目标;\r
this.property =财产;\r
this.endingValue = endingValue;\r
this.duration =持续时间;\r
this.easing =缓解;\r
this.beginningValue =目标[属性]\r
this.totalChange = endingValue目标[属性]\r
this.startTime = NULL;\r
this.isAnimating = FALSE;\r
如果（渐变效果[this.easing] ==未定义）{this.easing ='线';}\r
};\r
//\r
Animation.prototype.animate =功能（时间）{\r
如果（时间＆gt; this.startTime + this.duration）{\r
this.target [this.property] = this.endingValue;\r
this.isAnimating = FALSE;\r
}其他{\r
this.target [this.property] =缓和效果[this.easing]（\r
时间this.startTime，this.beginningValue，this.totalChange，this.duration\r
）;\r
}\r
};\r
//\r
Animation.prototype.run =功能（）{\r
this.target [this.property] = this.beginningValue;\r
this.startTime = performance.now（）;\r
this.isAnimating = TRUE;\r
};\r
//\r
回报（动画）;\r
}）（）;\r
\r
//创建一些酒吧对象，并把它们放在一个酒吧[]数组\r
VAR酒吧= [];\r
VAR BAR1 = {X：0，Y：20，宽：1，身高：50，填写：红色};\r
VAR BAR2 = {X：0，Y：100，宽度：1，身高：50，填写：绿色};\r
VAR bar3 = {X：0，Y：180，宽度：1，身高：50，填充：'蓝'};\r
bars.push（BAR1，BAR2，bar3）;\r
\r
//创建一些动画，扩大各条所需\r
//宽度超过3000ms\r
变种动画= [];\r
VAR bar1AnimateWidth =新的动画（BAR1，'宽'，150,3000，easeOutQuint'）;\r
VAR bar2AnimateWidth =新的动画（BAR2，宽度，85,3000，easeOutQuint'）;\r
VAR bar3AnimateWidth =新的动画（bar3，'宽'，250,3000，easeOutQuint'）;\r
animations.push（bar1AnimateWidth，bar2AnimateWidth，bar3AnimateWidth）;\r
\r
//启动requestAnimationFrame循环\r
requestAnimationFrame（动画）;\r
\r
//初始化每个动画对象，并启动每个缓解动画运行\r
doAllAnimations（）;\r
\r
功能doAllAnimations（）{\r
对于（VAR I = 0; I＆LT; animations.length;我++）{动画[I] .RUN（）; }\r
}\r
\r
功能动画（时间）{\r
\r
//动画属性值\r
对于（VAR I = 0; I＆LT; animations.length;我++）{\r
VAR动画=动画[I]\r
如果（animation.isAnimating）{animation.animate（时间）;}\r
}\r
\r
//重绘了其最新的动画属性的所有酒吧\r
ctx.clearRect（0,0，CW，CH）;\r
对于（VAR I = 0; I＆LT; bars.length;我++）{\r
VAR栏=条[I]\r
ctx.fillStyle = bar.fill;\r
ctx.fillRect（bar.x，bar.y，bar.width，bar.height）;\r
}\r
\r
//请求另一个动画循环\r
requestAnimationFrame（动画）;\r
}\r
\r
$（'＃重播）点击（函数（）{doAllAnimations（）;}）; \r
{体背景颜色：乳白色; }\r
#canvas {边界：1px的红色实;} \r
＆LT;脚本SRC =https://ajax.googleapis.com/ajax /libs/jquery/1.9.1/jquery.min.js\"></script>\r
＆LT; H4＆GT;动画与easeOutQuint宽松＆LT; / H4＆GT;\r
＆LT;按钮的ID =重演＆GT;重新运行＆LT; /按钮＆GT;\r
＆LT; BR＆GT;\r
＆LT;帆布ID =画布WIDTH = 300 HEIGHT = 300＆GT;＆LT; /帆布＆GT; \r
I am working on a square graph animation. The squares should grow from zero on the x/y axis(top left corner) to their determined percent size with ease. Can anyone provide me any hints to accomplish this? This is what I have so far: http://jsfiddle.net/2n6kduL4/3/
The progress is happening from left to right. But it has to fill from the left top corner to the right bottom corner.
var canvas = document.getElementById('myProgress');
var myPerc = 500;
ctx = canvas.getContext('2d');
ctx.fillStyle = "rgb(255, 0, 0)"; //red
ctx.fillRect(0, 0, myPerc, 100);
ctx.save();
for (var i = 0; i < (myPerc * 0.5); i++) {
ctx.fillStyle = "rgb(0, 255, 0)"; //greeen
(function(i) {
setTimeout(function() {
ctx.fillRect(0, 0, +i, 100);
}, 1000 * i);
})(i);
}
解决方案
You can achieve your animated + eased barchart using Penner's Easing functions and the requestAnimationFrame timing loop
Here's how:
Define each of your barchart bars in javascript objects:
// create some bar objects and put them in a bars[] array
var bars=[];
var bar1={x:0,y:20,width:1,height:50,fill:'red'};
var bar2={x:0,y:100,width:1,height:50,fill:'green'};
var bar3={x:0,y:180,width:1,height:50,fill:'blue'};
bars.push(bar1,bar2,bar3);
Then you can animate each bar to its ending width using Penner's Easing equations. Here are a few of the many Penner easing algorithms expressed as javascript functions. What you do is feed in the current elapsed time, beginning value, total time duration and total value change desired during the easing. The Penner functions return to you the current (eased) value based on the current time.
// t: elapsed time inside duration,
// b: beginning value,
// d: total duration
// c: total change from beginning value,
var easings={
linear:function(t,b,c,d){return(c*t/d+b);},
easeInQuint: function(t,b,c,d){return(c*(t/=d)*t*t*t*t+b);},
easeOutQuint: function (t,b,c,d){return(c*((t=t/d-1)*t*t*t*t+1)+b);},
}
Here is example code and a Demo
The code creates a reusable "Animation Class" that can be used to ease the property values of the bar objects you created above over the animation duration:
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
var Animation=( function(){
// easings
// t: elapsed time through duration,
// b: beginning value,
// d: total duration
// c: total change from beginning value,
var easings={
linear:function(t,b,c,d){return(c*t/d+b);},
easeInQuint: function(t,b,c,d){return(c*(t/=d)*t*t*t*t+b);},
easeOutQuint: function (t,b,c,d){return(c*((t=t/d-1)*t*t*t*t+1)+b);},
}
//
function Animation(target,property,endingValue,duration,easing){
this.target=target;
this.property=property;
this.endingValue=endingValue;
this.duration=duration;
this.easing=easing;
this.beginningValue=target[property];
this.totalChange=endingValue-target[property];
this.startTime=null;
this.isAnimating=false;
if(easings[this.easing]==undefined){this.easing='linear';}
};
//
Animation.prototype.animate=function(time){
if(time>this.startTime+this.duration){
this.target[this.property]=this.endingValue;
this.isAnimating=false;
}else{
this.target[this.property]=easings[this.easing](
time-this.startTime,this.beginningValue,this.totalChange,this.duration
);
}
};
//
Animation.prototype.run=function(){
this.target[this.property]=this.beginningValue;
this.startTime=performance.now();
this.isAnimating=true;
};
//
return(Animation);
})();
// create some bar objects and put them in a bars[] array
var bars=[];
var bar1={x:0,y:20,width:1,height:50,fill:'red'};
var bar2={x:0,y:100,width:1,height:50,fill:'green'};
var bar3={x:0,y:180,width:1,height:50,fill:'blue'};
bars.push(bar1,bar2,bar3);
// create some animations that widen the each bar to the desired
// width over 3000ms
var animations=[];
var bar1AnimateWidth=new Animation(bar1,'width',150,3000,'easeOutQuint');
var bar2AnimateWidth=new Animation(bar2,'width',85,3000,'easeOutQuint');
var bar3AnimateWidth=new Animation(bar3,'width',250,3000,'easeOutQuint');
animations.push(bar1AnimateWidth,bar2AnimateWidth,bar3AnimateWidth);
// start the requestAnimationFrame loop
requestAnimationFrame(animate);
// initialize each animation object and start each eased animation running
doAllAnimations();
function doAllAnimations(){
for(var i=0;i<animations.length;i++){ animations[i].run(); }
}
function animate(time){
// animate property values
for(var i=0;i<animations.length;i++){
var animation=animations[i];
if(animation.isAnimating){animation.animate(time);}
}
// redraw all bars with their newly animated properties
ctx.clearRect(0,0,cw,ch);
for(var i=0;i<bars.length;i++){
var bar=bars[i];
ctx.fillStyle=bar.fill;
ctx.fillRect(bar.x,bar.y,bar.width,bar.height);
}
// request another animation loop
requestAnimationFrame(animate);
}
$('#rerun').click(function(){ doAllAnimations(); });
body{ background-color: ivory; }
#canvas{border:1px solid red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Animate with easeOutQuint easing</h4>
<button id=rerun>Rerun</button>
<br>
<canvas id="canvas" width=300 height=300></canvas>
这篇关于根据所提供的百分比值与颜色成长方格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
