Hi @bvkdigital
The code for my Mario product rotator might be a little confusing because it was part of a larger app, so it's set up a little differently. It could do other stuff, like mouse wheel zooming.
360 is the magic number because while this is not a 3d object, that's exactly what we're trying to simulate. Something that looks and functions a little like this...
So we need to figure out 2 things. How to convert the dragging motion into a rotational value, and what frame should be showing at that angle.
deltaX and deltaY are new properties for Draggable. They report the amount of change since the last drag. So if x is at 75, and on the next drag x is at 100, deltaX would be 25. If you added that 25 to the rotation value, it's essentially the same as adding 25 degrees to it. So a 1:1 ratio.
The delta value could also be considered the velocity at that moment in time. I'm multiplying the delta value by a speed value just as a way to let you control how fast it will rotate. The number I choose is completely arbitrary. You can use whatever value you want.
productRotation += this.deltaX * speed; // use whatever value you want for speed
The productRotation value is really just a running total of the (deltaX * speed) values, so we need to convert it into an angle. That value could be very high, and even negative, and the remainder operator (%) will give us a number in the range of +/-360.
-55555 % 360 // => -115
361 % 360 // => 1
270 % 360 // => 270
And dividing that value by 360 will give us a ratio, which we can multiply and by our frame count to give us an index value.
var count = numFrames - 1; // subtract 1 because arrays start at 0
var ratio = (productRotation % 360) / 360
var index = Math.round(ratio * count);
There's a couple problems with that. The ratio might be negative, giving you a negative frame index. You could compensate for this in the ratio calculation by adding the remainder value to 360.
var ratio = (360 + (productRotation % 360)) / 360;
I did something a little a different for no particular reason, but it works out the same. I'm adding the index to the count in another step if it's less than 1, otherwise I subtract 1 from the index.
var index = Math.round((productRotation % 360) / 360 * count);
index = index < 1 ? count + index : index - 1;
Now the reason for subtracting 1 might be a little confusing. The frame for an angle of 0 and 360 should be the same, so the last sprite sheet frame should be for an angle that is less then 360, but our ratio was calculated using 360, giving us an extra frame index.
Does that help?
For anybody else trying to do this, my description is much longer than the actual code.
var speed = 0.35;
var numFrames = frames.length;
var productRotation = 0;
Draggable.create(proxy, {
throwProps: true,
trigger: proxyTrigger,
onDrag: updateImage,
onThrowUpdate: updateImage,
cursor: "ew-resize",
maxDuration: 0.65,
});
function updateImage() {
productRotation += this.deltaX * speed;
var count = numFrames - 1;
var index = Math.round((productRotation % 360) / 360 * count);
index = index < 1 ? count + index : index - 1;
singleProduct360Anim.gotoAndStop(index); // Pixi animated sprite
}