I have trying to achieve SVG element's animation while adding dynamic DOMs for its animation with jQuery.
I generate DOMs with JS, so HTML page does not have any elements for this animation.
When I add it dynamically, animation will not start in Chrome(16), however it works with FF(8)
The animation would perfect is I remove that dynamic doms which are generated with JS and put them static into HTML page.
I have created fiddle for it at : http://jsfiddle.net/cjP6K/7/
where I have put one svg dom static into HTML page, then I have cloned that element with jQuery on document ready,
In this scene, the one which was added later with JS will not Animate at all !!(this works with FF)
Please help...
Thanks,
Chetan.
There is a chrome bug in the animateMotion tag, it has been an issue for ages..
refer to the bug report here http://code.google.com/p/chromium/issues/detail?id=13585
There isn't much that can be done to get around it in chrome while still maintaining an svg dom..
Hope this helps..
Related
In my markup, I add a label on it using (x,y) co-ordinates using "markup.markups[0].getClientPosition". This works, but if I change camera mode or rotate it will lose it place, so am wondering how I can put it back to the new position as per the new markup position?
I understand I have to add event listener for "CAMERA_CHANGE_EVENT", but how I should relate the label with its corresponding svg markup, what if there are more than one markups?
Thanks in advance.
I'd suggest to use the 3d markup extension to make things easier - it supports navigation right out of the box
Follow here to get started: https://forge.autodesk.com/blog/3d-markup-icons-and-info-card
Or SVG markups work well as well: https://forge.autodesk.com/blog/create-pushpin-markup-svg
I like the success svg animation of http://t4t5.github.io/sweetalert, how can I get the code of it? click on the A success message! button you will see the nice animated svg there.
This does not use an SVG animation. It's animating regular DOM elements using CSS. Here's a search through the code that shows where the CSS animation is defined.
I have a problem with Safari and a map create with Leaflet: this is a little demo http://jsfiddle.net/DBJb7/ .
The CSS property 'hover' works except in Safari. I try to solve it with z-index but it doesn't work.
Does anyone have an idea ?
Edit : http://bost.ocks.org/mike/leaflet/ This project seems have the same problem.
You might try implementing the following code into your D3.js JavaScript instead of using CSS:
var feature = g.selectAll("path")
.data(collection.features)
.enter().append("path").attr('style','z-index:9999')
.on("mouseover", function() {
d3.select(this).css("fill", "green").css("stroke", "red");
})
.on("mouseout", function() {
d3.select(this).css("fill", "").css("stroke", "");
});
I have found that using the JavaScript to apply styles has been much more efficient and easier to maintain than trying to use CSS to do so, unless you are specifically using classes. In which case, I would use the .classed() method (https://github.com/mbostock/d3/wiki/Selections#wiki-classed) to manage the adding and removal of classes.
Hope this helps! If not, sorry. :-/
EDIT 1
I edited to include the mouseout functionality. After looking into this more deeply, the Leaflet thing just pulls in new images, not redrawing an SVG, which is what D3.js does. My only guess is that Safari is ignoring the z-index of your path element. This is apparent whenever you right-click on the path area and then select Inspect Element from the dropdown. On Chrome, it will show you the HTML for the path element, but on Safari, it shows you the HTML for the image being pulled in by the Leaflet stuff.
I would like to display an animated gif on canvas with some transformations applied. To test things, I'm currently just trying to display the animated gif on the canvas, so that it is essentially equal to displaying the gif as a regular <img> tag.
I'm using Chrome and webkitRequestAnimationFrame. On each request frame, I draw the image. When the gif frame changes, this should be reflected on the canvas. This works only partially:
Just watching the canvas does not make it update. Instead, one, still frame is begin drawn.
Reselecting the tab (i.e. selecting another and selecting the canvas tab again) does update it to a new frame, but after that it freezes again.
This is a fiddle I set up: http://jsfiddle.net/eGjak/93/.
How can I draw an animated gif on canvas with it actually animating?
Answer no longer valid
It looks like the behavior described here (writing an img tag referencing an animated gif to a canvas results in different frames of the gif being written if the img is part of the DOM or visible) has changed at least in Chrome. There may or may not be documentation of what is correct behavior for this. :)
Also, webkitRequestAnimationFrame no longer has the behavior of taking one additional argument, an element X such that when X is not visible, the requested function will not run. For performance and battery life reasons, you may want many of the functions that you pass to requestAnimationFrame to check for visibility before they do anything that will require drawing.
Before:
Check out a fixed version:
http://jsfiddle.net/eGjak/96/
If you add a console.log() to the function that paints the image, you'll see that it is being called. The problem seems to be that the image itself does not animate, probably because the browser does not bother to update an animated image that is not part of the DOM.
My solution was to make the animated gif part of the DOM and size 0 and it works just fine.
You can verify that the animation is being shown on the canvas and not in the image tag by loading up http://jsfiddle.net/eGjak/96/show/ and inspecting the elements with ctrl-shift-I on Windows or Linux / alt-cmd-I.
EDIT: Here's a bonus!
webkitRequestAnimationFrame takes one more argument than the Mozilla equivalent to allow your animation to only run when the element that is being animated is visible. Check out
http://jsfiddle.net/kmKZa/8/
and open up the console. You'll see that when you hide the canvas, the animation function stops being called. When you toggle the canvas visible again, the animation function will be called again.
Is there any way, in HTML, to include an animated GIF in an <img> tag, but automatically tell the GIF to not animate? I realize that the user can stop animation by pressing ESC or clicking Stop, but I want the GIFs not to animate at all.
I only want to do this on one specific page, and making separate non-animated versions of the (1500+) GIFs is not feasible. I simply want the GIFs to not animate.
You could use Giffer.
Just include the library in your page:
<script type="text/javascript" src="gifffer.min.js"></script>
Instead of setting src attribute on your image use data-gifffer.
<img data-gifffer="image.gif" />
At the end, call Gifffer() whenever you want. For example:
window.onload = function() {
Gifffer();
}
If you don't want the GIF to move at all you can always edit the .js file to remove the play button.
Not with plain HTML but using PHP with imagecreatefromgif might help you
I don't think calling window.stop() will be a good solution. This would need to be called for every image that is loaded to prevent it from running half way through and stopping. The best solution is to use a library such as GD to create images featuring just the first frame of the animated GIF.
Use ImageMagik, and you can readily convert all 1500 images.
You could use window.stop() in javascript, which should be the equivalent of pressing ESC/clicking stop. However, I'm pretty sure it won't work in all browsers (i.e. IE).