I'm trying to create an animation with rotation. Now I first used a transition loop, but the rotation stops when the animation is done, and then repeats. I'm trying to achieve an animation in rotation which constantly goes on with the same speed. The effect is like using an ENTER_FRAME event in ActionScript 3 and giving the rotation some speed. I tried moving the objects x position succesfully with LimeJS:
lime.scheduleManager.schedule(function()
{
var pos = this.getPosition();
pos.x += 4;
this.setPosition(pos);
}, redsquare)
I try to achieve this with rotation aswell, but I don't know if this is possible. I tried this:
lime.scheduleManager.schedule(function()
{
var rotation = this.getRotation();
rotation.rotate += 4;
this.setRotation(rotation);
}, redsquare)
That doesn't work. How can I do this?
Try using lime.animation.RotateBy.
The documentation is here.
Related
I am referring an svg animation given in below link
https://codepen.io/thinkdesign/pen/JybJOq
I am not able to understand how the recursion works here
var offset = 0;
var animation = function() {
offset -= 100;
pattern.animate({ x: offset }, 500, mina.ease, animation);
};
here we are changing x axis on each function call , so the x axis should go beyond screen at some point. Please help me understanding how this works
Nothing is moving across the page here. The x that is being moved here is the pattern's X offset. An SVG <pattern> is a fill that consists of a "tile" that is repeated infinitely in every direction. The <pattern> has an x and y attribute that tells the browser where to start the tiling from. Animating the pattern's x offset has the effect of making it look like the tile is continuously moving across your object.
Picture a rectangular window lying on a tiled floor. If you slide that window across the floor, it looks to you like the tile pattern moves through the window.
Made a 3d cube. When a button is clicked, it rotates 50 deg left or right. I want it rotate an additional 50deg further when I click the same button. How do I achieve this? Here is my code right now:
//code to rotate cube
var rotateCube = document.getElementById('cube');
var moveLeft = document.getElementById('button-one');
var moveRight = document.getElementById('button-two');
moveLeft.onclick = function() {
rotateCube.style.webkitTransform = "rotateY(-50deg)";
}
moveRight.onclick = function() {
rotateCube.style.webkitTransform = "rotateY(50deg)";
}
in full here:
http://jsfiddle.net/camlatimer/6xp2dwe7/1/
I've searched around. There are examples like this one:
http://paulrhayes.com/experiments/cube-3d/
But I'm new to programming (2 months of fiddling with javascript in my free time) and don't understand much. I thought I could complete my objective pretty easily, but I'm stuck. I don't want to use any plugins. Just want to learn to really program things on my own. Any help would be appreciated.
LcSalazar is correct in regards to handling to rotation state of your cube, but my impression is that you're also interested in animating the rotation? If so, you'll want to check out CSS animations to handle those in-between states. This question covers dynamic values in CSS keyframed animations, which might be a bit beyond your current knowledge of CSS/JS, but spend some time with it and you'll be surprised how quickly it starts making sense.
Good luck!
The problem is with your premise:
"When a button is clicked, it rotates 50 deg left or right"
Actually, when a button is clicked, you are setting the rotation to be exactly -50deg or 50deg. It's an absolute assignment, not an increment.
In order to increment (since the rotation property is assigned by a text composed value), you'd need to store the value in a way where you can control it. For example, storing it in an external variable, and use it to increment the final value.
Something like this:
See working example
//Here's where you will store the actual value
var rotationValue = 0;
moveLeft.onclick = function() {
rotationValue -= 50;
rotateCube.style.webkitTransform = "rotateY("+ rotationValue +"deg)";
}
moveRight.onclick = function() {
rotationValue += 50;
rotateCube.style.webkitTransform = "rotateY("+ rotationValue +"deg)";
}
I am working on some image viewing tools in KineticJS. I have a rotate tool. When you move the mouse over an image, a line appears from the centre of the image to the mouse position, and then when you click and move, the line follows and the image rotates around that point, in sync with the line. This works great.
My issue is, I have the following set up:
Canvas->
Stage->
Layer->
GroupA->
GroupB->
Image
This is because I draw tabs for options on GroupA and regard it as a container for the image. GroupB is used because I flip GroupB to flip the image ( and down the track, any objects like Text and Paths that I add to the image ), so that it flips but stays in place. This all works well. I am also hoping when I offer zoom, to zoom groupb and thus zoom anything drawn on the image, but for groupA to create clipping and continue to support drag buttons, etc.
The object I am rotating, is GroupA. Here is the method I call to set up rotation:
this.init = function(control)
{
console.log("Initing rotate for : " + control.id());
RotateTool.isMouseDown = false;
RotateTool.startRot = isNaN(control.getRotationDeg()) ? 0 : control.getRotationDeg();
RotateTool.lastAngle = control.parent.rotation() / RotateTool.factor;
RotateTool.startAngle = control.parent.rotation();
this.image = control.parent;
var center = this.getCentrePoint();
RotateTool.middleX = this.image.getAbsolutePosition().x + center.x;
RotateTool.middleY = this.image.getAbsolutePosition().y + center.y;
this.image.x(this.image.x() + center.x - this.image.offsetX());
this.image.y(this.image.y() + center.y - this.image.offsetY());
this.image.offsetX(center.x);
this.image.offsetY(center.y);
}
getCentrePoint is a method that uses trig to get the size of the image, based on the rotation. As I draw a line to the centre of the image, I can tell it's working well, to start with. I've also stepped in to it and it always returns values only slightly higher than the actual width and height, they always look like they should be about what I'd expect, for the angle of the image.
Here is the code I use on mouse move to rotate the image:
this.layerMouseMove = function (evt, layer)
{
if (RotateTool.isRotating == false)
return;
if (!Util.isNull(this.image) && !Util.isNull(this.line))
{
if (Item.moving && !RotateTool.isRotating)
{
console.log("layer mousemove item moving");
RotateTool.layerMouseUp(evt, layer);
}
else
{
var pt = this.translatePoint(evt.x, evt.y);
var x = pt.x;
var y = pt.y;
var end = this.getPoint(x, y, .8);
RotateTool.line.points([this.middleX, this.middleY, end.x, end.y]);
RotateTool.line.parent.draw();
RotateTool.sign.x(x - 20);
RotateTool.sign.y(y - 20);
var angle = Util.findAngle({ x: RotateTool.startX, y: RotateTool.startY }, { x: x, y: y }, { x: RotateTool.middleX, y: RotateTool.middleY });
var newRot = (angle) + RotateTool.startAngle;
RotateTool.image.rotation(newRot);
console.log(newRot);
}
}
}
Much of this code is ephemeral, it's maintaining the line ( which is 80% of the length from the centre to my mouse, as I also show a rotate icon, over the mouse.
Sorry for the long windedness, I'm trying to make sure I am clear, and that it's obvious that I've done a lot of work before asking for help.
So, here is my issue. After I've rotated a few times, when I click again, the 'centre' point that the line draws to, is way off the bottom right of my screen, and if I set a break point, sure enough, the absolute position of my groups are no longer in sync. This seems to me like my rotation has moved the image in the manner I hoped, but moved my group off screen. When I set offsetX and offsetY, do I need to also set it on all the children ? But, it's the bottom child I can see, and the top group I set those things on, so I don't really understand how this is happening.
I do notice my image jumps a few pixels when I move the mouse over it ( which is when the init method is called ) so I feel like perhaps I am just out slightly somewhere, and it's causing this flow on effect. I've done some more testing, and my image always jumps slightly up and to the right when I move the mouse over it, and the rotate tool continues to work reliably, so long as I don't move the mouse over the image again, causing my init method to call. It seems like every time this is called, is when it breaks. So, I could just call it once, but I'd have to associate the data with the image then, for the simple reason that once I have many images, I'll need to change my data as my selected image changes. Either way, I'd prefer to understand and resolve the issue, than just hide it.
Any help appreciated.
Please have a look at this page
Try to click one of big buttons on the panel and to move your mouse on the y axis. The buttons start rotating as they should. Now, leave your mouse and click them again: why the heck do they insist into getting back in their original position?!
Here's the code snippet related to the button rotation. Please note that the code executed in the draw loop is called every 30ms.
// method
Button.prototype.Rotate = function(yDrag){
this.rotation = - (yDrag - this.rotationYClick) / 80
}
// draw loop
function drawLoop() {
if (buttons[n].roating == true && mousePressed == true)
buttons[n].Rotate(mousePosition_y)
else
buttons[n].roating = false
} // end draw loop
// fired ONLY ONCE when mouse is clicked
function mouseDown() {
buttons[n].roating = true
buttons[n].rotationYClick = mousePosition_y
}
I've intentionally avoided to post most of the code as I'm sure the problem lies in these lines.
Code explanation: when you click on a button, the position of the mouse is stored in the variable rotationYClick of the class Button. While you drag your mouse, the mouse position is constantly compared to the stored value: the distance of your current mouse position from the point which you clicked will determine how much the button rotate. Problem is, as you click it again the rotation is set back to zero. How to solve?!
Here's one of my failed tries by changing the method
// method
Button.prototype.Rotate = function(yDrag){
this.rotation += - (yDrag - this.rotationYClick) / 80
}
Thanks a lot!
Where you are setting this.rotation. Use += instead of =
The problem is that you reevaluate the rotation on each drag without taking into consideration the present rotation angle of the button.
EDIT
Ok, so its not that simple :)
Basically you'll have to keep two variables. One for the original rotation angle, and one that represents the current rotation. So, it becomes something like this:
this.rotation = this._originalRotation - ((yDrag-this.rotationYClick)/80);
and mouseDown becomes:
// fired ONLY ONCE when mouse is clicked
function mouseDown() {
buttons[n].roating = true
buttons[n].rotationYClick = mousePosition_y
buttons[n]._originalRotation = this.rotation;
}
I am trying to rotate an image using jquery that will rotate on multiple mouse clicks. Using the jquery-rotate plugin, the following code only rotates the image once (transforming to a canvas in firefox) and will no longer rotate on further clicks.
$(".drag-and-rotatable img").click(function() {
$(this).rotate(45);
});
I'm open to using other JavaScript libraries.
When you say rotate(45), you are rotating the image 45 degrees? (make sure it's not radians, I don't use the plugin) from the original rotation, so if you want to keep rotating you have to keep adding or subtracting degrees:
$(function() { // doc ready
var rotation = 0; // variable to do rotation with
$(".drag-and-rotatable img").click(function() {
rotation = (rotation + 45) % 360; // the mod 360 probably isn't needed
$(this).rotate(rotation);
});
});