Develop Reference

How can an animation keyframe or time offset be calculated from a CSS transform matrix? [duplicate]

i am working on a html5 interface wich uses drag and drop. While i am dragging an element, the target gets a css-class, which makes it bidirectionally rotate due to a -webkit-animation.
#-webkit-keyframes pulse {
0% { -webkit-transform: rotate(0deg); }
25% { -webkit-transform:rotate(-10deg); }
75% { -webkit-transform: rotate(10deg); }
100% { -webkit-transform: rotate(0deg); }
}
.drag
{
-webkit-animation-name: pulse;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
}
When I drop the target, I want it to adopt the current state of rotation.
My first thought was to check the css property with jquery and the .css('-webkit-transform') method. But this method just returns 'none'.
So my question: Is there a way to get the current degree value of an element which is rotated via animation?
Thanks so far
Hendrik

I recently had to write a function that does exactly what you want! Feel free to use it:
// Parameter element should be a DOM Element object.
// Returns the rotation of the element in degrees.
function getRotationDegrees(element) {
// get the computed style object for the element
var style = window.getComputedStyle(element);
// this string will be in the form 'matrix(a, b, c, d, tx, ty)'
var transformString = style['-webkit-transform']
|| style['-moz-transform']
|| style['transform'] ;
if (!transformString || transformString == 'none')
return 0;
var splits = transformString.split(',');
// parse the string to get a and b
var parenLoc = splits[0].indexOf('(');
var a = parseFloat(splits[0].substr(parenLoc+1));
var b = parseFloat(splits[1]);
// doing atan2 on b, a will give you the angle in radians
var rad = Math.atan2(b, a);
var deg = 180 * rad / Math.PI;
// instead of having values from -180 to 180, get 0 to 360
if (deg < 0) deg += 360;
return deg;
}
Hope this helps!
EDIT I updated the code to work with matrix3d strings, but it still only gives the 2d rotation degrees (ie. rotation around the Z axis).

window.getComputedStyle(element,null)['-webkit-transform'] will return a string representing current transformation matrix.
You can calculate its rotation degree from that string by first parsing it, then applying a few maths on it.

Animating circle stroke SVG - Not a full circle

Hi guys I am having trouble animating a stroke on an SVG where I only want it to be a 3/4 circle as the math is more complex!
Basically I want to pass a percentage in a function (0-100) and have the line animate to the correct place. So 33% would show one quarter of the stoke in green and 100% would show 3/4 of the stoke in green.
I have a pen here and you can change the offset in the JS animate to get different results.
$(".percentage").animate({"stroke-dashoffset":"78"}, 3000);
so "78" would be 100% and "314" would be 0% but I am lost at how I can map this!
CodePen Demo
Any help is appreciated!

var length= 314-78;
fuction toPercentage (number){
return Math.round(((314-number)/length)*100);
}

This was how I did it...
https://codepen.io/anon/pen/kkWRPg
function percentage($percent) {
var offsets = 314.1593 - ($percent * 2.3562);
return offsets;
}
var offset = percentage(75);
$(".percentage").animate({"stroke-dashoffset":offset}, 3000);

0% : radius*2*3.14 (318)
100% : 0 (full circle) (0)
75% : radius*2*3.14*(1-75%) (78)
So you need radius*2*3.14*(1-P*75%) for your result
for example, you need 318*0.5*0.75 for 50%
Here is the (hope it's easy to understand) function for you
function percentage($percent) {
var arc = 0.75;
var radius = 50;
var min = radius*2*3.14/*PI*/;
var max = min*(1-arc);
var multiplier = $percent/100;
var position = min+(max-min)*multiplier;
return position;
}
var offset = percentage(100);
$(".percentage").animate({"stroke-dashoffset":offset}, 3000);

Donut Chart - map domain to range of colors (transition)

I am trying to make a 'donut' chart and I am currently struggling with D3 scales and colors. If you open my current chart: https://jsfiddle.net/dtr7hrg2/, you will notice that the values 0 and 5.26 share exactly the same color. I guess that is because those two values fall within the same range. My domain is [0, 100]. What I want to achieve is to map this domain into a range [0, 100] which corresponds to a linear transition between following colors ["#000000", "#5F192A", "#B12848", "#EC335C"] where 0.0 falls into #000 and 100.0 falls into #B12848.
Could somebody give me a hint what I am doing wrong? Any help will be appreciated!

If you want a linear range of colors between #000000 and #B12848 you can create an interpolation function and scale its input to be between 0.0 and 1.0:
var chart = d3.select("#chart");
var color = d3.interpolate('#000000', '#B12848');
for (var i = 0; i <= 100; i++) {
chart.append('span').attr('class', 'colorBlock').attr('style', function (d) {
return 'background-color: ' + color(i / 100.0);
});
}
Here's a working fiddle
But, as Tim B points out the colors between 0 and 5 are barely discernible.

Its not the exact same color, what you did is correct
console.log(heat_map_color(5)) // rgb(14, 4, 6)
console.log(heat_map_color(0)) // rgb(0, 0, 0)
Those colors are so close you can't see the difference.

Chart.js Radar Labels Coordinates

is there any way to get the coordinates for the labels in the radar chart?
I'm trying to put images instead of text in the labels area.

You can calculate it using the scale property. Here is something that draws a blue circle at those points after the animation completes.
onAnimationComplete: function () {
for (var i = 0; i < this.scale.valuesCount; i++) {
// get the poitn position
var pointLabelPosition = this.scale.getPointPosition(i, this.scale.calculateCenterOffset(this.scale.max) + 5);
// draw a circle at that point
this.chart.ctx.beginPath();
this.chart.ctx.arc(pointLabelPosition.x, pointLabelPosition.y, 5, 0, 2 * Math.PI, false);
this.chart.ctx.fillStyle = '#77e';
this.chart.ctx.fill();
this.chart.ctx.stroke();
}
}
Fiddle - http://jsfiddle.net/1jgmbyb7/

Remove the tick bar on flot charts

Is it possible to remove the tick bars on the x and y axis on a flot chart?
picture of what I currently have
I want to remove the gray bar between the two series labels

Have you tried to configure your axes like:
xaxis: {
tickLength: 0
}
yaxis: {
tickLength: 0
}
Reference here.
Update in response to your last comment
Since there is no such option one possible workaround could be to color the tickbar the same as your chart background and the ticks like you have it right now.
xaxis: {
color: /* same as your background color */
tickColor: /* different color, like the grayish one you have for the ticks */
}
yaxis: {
color: /* same as your background color */
tickColor: /* different color, like the grayish one you have for the ticks */
}
Hope it helps

I ended up changing the flot source code to allow this to occur.
Here's what I did.
1) added 'tickBar' to the x/yaxis options. (if true, tickBar is shown.. default: true)
2) change the drawGrid function to use this option
drawGrid()
...
//draw the ticks
axes = allAxes();
bw = options.grid.borderWidth;
xBar = (options.xaxis.tickBar !== undefined)? options.xaxis.tickBar:true; //new
yBar = (options.yaxis.tickBar !== undefined)? options.yaxis.tickBar:true; //new
...
if(!axis.innermost){
ctx.strokeStyle = axis.options.color;
ctx.beginPath();
xoff = yoff = 0;
if(axis.direction == "x"){
if(xBar) //new
xoff = plotWidth + 1; // new
} else {
if(yBar) //new
yoff = plotHeight + 1; //new
}
When tickBar is set to false, the offset remains 0 so the line is drawn with a 0 value for width/height so it is not seen.