I'm using jQueryRotate to rotate my image.
Basically I want the image to start at 0 then rotate to -20 degrees then to 15 degrees then keep going back and forth between these 2 values and continue this infinitely.
So basically a little image shake, would this be possible with jQueryRotate or would you recommend another jquery plugin? Would need something with IE9 support.
Sorry forgot to post the code, but I was able to come up with a solution.
function() {
var rotation = function() {
$("#img1").rotate({
duration: 1000,
angle: 0,
animateTo: -15,
callback: function() {
$(this).rotate({
duration: 1000,
angle: -15,
animateTo: 0,
callback: function() {}
});
}
});
}
rotation();
Related
I'm using this function from Openlayers 3 cookbook:
function zoomTo() {
map.beforeRender(
ol.animation.pan({
source: map.getView().getCenter(),
duration: 150
}),
ol.animation.zoom({
resolution: map.getView().getResolution(),
duration: 500,
easing: ol.easing.easeIn
})
);
map.getView().fit(Houses1860b.getSource().getExtent(), map.getSize());
}
This function works great but, the zoom is closer to the feature than I need and I would like to know if there is another way to do a zoom to the feature, but with one or two zoom levels less than this function does.
I assume it's possible to make another new variable called "extension" and add values to Houses1860b.getSource().getExtent() for doing the extension bigger than by default... I look for posts with this info but I didn't found none, Can you help me?
I will give an example by considering, 100px padding in all directions(top, right, bottom and left). Then I will have that feature in below way.
function zoomTo() {
map.beforeRender(
ol.animation.pan({
source: map.getView().getCenter(),
duration: 150
}),
ol.animation.zoom({
resolution: map.getView().getResolution(),
duration: 500,
easing: ol.easing.easeIn
})
);
map.getView().fit(Houses1860b.getSource().getExtent(), map.getSize(), {
padding : [100, 100, 100, 100]
});
}
I have the following code which when you click the gray semi-circle there are two animations that happen, I am very close to my intended outcome, however the line path animation animates about a point but that point seems to move at the end, I would like it to rotate about it's endpoint so that i doesn't move out of the circle that endpoint is in.
It is much clearer in the jsfiddle to see what I am talking about and the issue at hand.
** You have to click the gray circle to activate the animation **
console.clear();
var loop = "M31,201.1C16.6,118.8,69.1,40.5,150.7,26c32.5-5.8,64.5-1.6,93.7,14.5c59.1,32.6,88.4,94,77.1,159.1";
var pin = "M180.4,193.3c-1.8,0-3.5-0.9-4.4-2.6c-1.3-2.4-0.5-5.5,2-6.8L309.8,111c2.4-1.3,5.5-0.5,6.8, 2c1.3,2.4,0.5,5.5-2,6.8l-131.8,72.9C182.1,193.1,181.2,193.3,180.4,193.3z";
var circle_svg = "M-224.1,227.9c-5.1,5.1-5.1,13.4,0,18.5s13.4,5.1,18.5,0s5.1-13.4,0-18.5C-210.8,222.8-219,222.8-224.1,227.9z";
var loopLength = Snap.path.getTotalLength(loop);
console.log(loopLength);
var s = Snap();
circle = s.path({
path: loop,
fill: "gray",
stroke: "#c00",
strokeWidth: 0,
strokeLinecap: "round"
});
var g = s.gradient("l(0, 0, 1, 1)#80DFFE-#0CA5EE-#07A3EE");
circleOutline = s.path({
path: Snap.path.getSubpath(loop, 0, 0),
stroke: g,
fillOpacity: 0,
strokeWidth: 0,
strokeLinecap: "round"
});
circle_middle = s.path({
path: circle_svg,
stroke: "#000000",
fill: "#ffffff",
strokeWidth: 5,
});
pin_line = s.path({
path: pin,
fill: "#000000"
});
// +"t"+[translateX,translateY]
circle_middle.attr({
transform: "t" + [400, -65]
});
pin_line.attr({
transform: 'r-170,180,180'
});
circle.click(function(e) {
Snap.animate(0, loopLength,
function(step) { //step function
circleOutline.attr({
path: Snap.path.getSubpath(loop, 0, step),
strokeWidth: 25
});
}, // end of step function
800 //duration
); //Snap.animate
pin_line.animate({
transform: 'r30,180,180',
translate: '20, 20, 85, 85'
}, 1000);
}); //click the circle
svg {
height: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>
So there was indeed an alignment issue, and I tried to fix that in Illustrator, then came back to your example, and realized how some of those transforms in the JS actually work, and was able to adjust them to finally look correct, but when I tried just adjusting the transforms using your paths, I couldn't get it right, even when applying t(ranslations) to the pin_line in addition to rotations. So it's either a combination of the paths needing to be replaced with some fine-tuning of that rotation points, or it's that I just don't fully understand how to work the snapsvg code. :) In any case, I got a fiddle working that incorporates some of my new path coordinates made in Illustrator and some changes to the JS: https://jsfiddle.net/14e107mt/4/ In addition to the paths changing, it comments out the translation of circle_middle's translation (since it's now aligned there by default), and changes the pin_line rotation coordinates to
pin_line.attr({ transform: 'r-170 176 172' });
and
pin_line.animate({ transform: 'r30 176 172' }, 1000 );
instead of 180 180.
I want to be able to define tweened animations using Paper.js. So far I have determined that Tween.js would probably be the best library to use for this. However I don't see any examples on the web, all of them seem to be for Three.js.
Does anyone have other suggestions for how I might achieve tweened animations? I am trying to animate some paths on mouseMove() mouseDown() and mouseUp() events.
Here are a few examples of how to use Tween.js with Paper.js:
A very simple example of moving a star without interaction.
A tutorial article on creating a nice jelly effect which heavily uses mouses and scrolling velocity.
A complex multipart animation on CodePen that uses mouseOver as a trigger.
Here's the relevant code snippet on the paperjs + tweenjs integration from the first example.
path.position = {
x : 100,
y : 100
}
createjs.Tween.get( path.position, { loop: true } )
.to( { x: 300 }, 1000, createjs.Ease.quadOut )
.wait( 2000 )
.to( { x: 100, y: 300 }, 1000, createjs.Ease.quadOut )
.wait( 2000 )
.to( { x: 100, y: 100 }, 1000, createjs.Ease.quadOut )
.wait( 2000 )
.call( function() {
console.log( 'done!' );
} );
var update = function() {
paper.view.draw();
}
createjs.Ticker.setFPS( 60 );
createjs.Ticker.addEventListener( 'tick', update );
Is that possible with Raphael.FreeTransform to rotate an element, without scaling it?
When I initialize my element with scale: false, rotate: true I can only rotate it without scaling and that's OK. I wan't to achieve the same but when rotate start event occurs, ie. I want to change the scale dynamically from the callback function:
ft = paper.freeTransform(rect, {}, function(ft, events) {
if (events.indexOf("rotate start") !== -1) {
ft.setOpts({scale: false});
}
});
The element is initialized with the following properties:
ft.setOpts({
keepRatio: false,
draw: 'bbox',
snap: {
rotate: 45
},
keepRatio: ['axisX', 'axisY']
});
JSFiddle
I actually figured out how to do this. Just initialize FreeTransform with the following parameters:
ft.setOpts({
drag: ['center', 'self'],
rotate: ['axisY'],
scale: ['bboxCorners', 'bboxSides'],
keepRatio: ['bboxCorners'],
snap: {
rotate: 45
},
draw: 'bbox'
});
http://alias.io/raphael/free_transform/ helped a lot in figuring this out.
I'm making a simple prototype in HTML5 canvas, and want to basically draw a slingshot. When someone clicks down and pulls back, I want the rubber band to stretch. It doesnt have to be perfect.
Any suggestions on how I can do this? I'm not too certain how to mimic the effect :)
thanks
It would be easier to do with SVG than with canvas, especially using a library like Raphaël. See this demo – that is not very different from what you want to do. If you use Raphaël then it will be much more portable than canvas, because it will work even on IE 6 (using VML).
Update:
(Fixed the Fiddle example - it had some outdated dependencies - now it's fixed)
Ok, see THIS DEMO. It should be pretty much what you explained or at least it should get you started. Here is the code:
var R = Raphael(10, 10, 400, 400);
var l = R.path("M100 200L200 200L300 200");
l.attr({
stroke: 'red',
'stroke-width': 4
});
var c = R.circle(200, 200, 10).attr({
fill: 'white',
stroke: 'red',
'stroke-width': 4
});
function move(dx, dy) {
var x = 200 + dx, y = 200 + dy;
this.attr({cx: x, cy: y});
l.attr({path: "M100 200L"+x+" "+y+"L300 200"});
}
function start() {
c.stop();
l.stop();
}
function end() {
this.animate({cx: 200, cy: 200}, 2000, "elastic");
l.animate({path: "M100 200L200 200L300 200"},
2000, "elastic");
}
c.drag(move, start, end);
a lot of these kind of behaviours have been implemented and written about in the Flash community. Krazy dad has some nice articles + code on elasticity.
http://www.krazydad.com/bestiary/bestiary_springyTitles.html