I am in the process of converting some animated GIF animated spinners to animated SVG for better/sharper display on Hi-DPI screens.
One issue I've run into is that when a user starts navigating to another page, an animated GIF continues animating but an animated SVG freezes. So if I want to have an animation that shows the next page loading, I can't find a way to get away from using GIFs.
Is there a way to have SVG animations continue animating during page navigation?
(I am specifically using Chrome for this, because if it doesn't work in Chrome I can't use it.)
EDIT: The SVG uses SMIL to do the animation.
UPDATE
After receiving no responses on this, I can't find a way to keep SVG animations animating during navigation, so I have adopted a different approach, which is to use CSS animations.
CSS animations continue animating even after navigation starts. They are a little harder to deal with, as far as inserting into a page and integrating with other elements, but they do the trick.
Related
A site I'm working on displays a large number (>50) of complex SVG images in a scrolling dialog window. When viewing the site in Chrome, the scrolling performance of the dialog window is very poor - it is noticeably laggy and slow. However, if I replace the SVG images with PNG images, the scrolling is perfectly smooth and responsive.
Here's a demonstration of the difference: https://jsfiddle.net/NathanFriend/42knwc1s/
Why is the SVG scrolling performance so much worse than the PNG scrolling performance? After the browser renders an SVG image, I would assume it doesn't need to rerender the image until the image is manipulated in some way (like resizing). Does scrolling an element that contains SVG images cause the images to be rerendered for every frame of the scroll animation?
`
I think this is just some kind of a Chromium bug, I've found this issue on SO, because I started experiencing it as well on Mac. It works OK on Opera for instance.
I don't think anyone here will be able to explain why it's slow if it really is a bug. I've created a Chromium bug, please star it if you want the issue to be fixed soon or learn more https://bugs.chromium.org/p/chromium/issues/detail?id=681611
I have a window displaying a video stream with a twitter feed as an overlay.
When a new tweet is displayed, the current tweet animates out using a rotate animation and the next tweet is rotated into view. The animations are performed using a RotateTransition.
The app also switches between different cameras to display different streams. To give an indication of when the app switches to the next camera, I have a progressbar that fills using a Timeline object.
This works well, until I resize the window. The rotate animations start to flicker, along with the progressbars as they gradually fill.
As a test, I disabled the video stream, to see what's happening. The 'artifact' doesn't occur then and I can resize as much as I want. If I play the stream and don't resize, everything works well.
The video player is based on VLCJ, but the actual pixels are drawn on a WritableImage in an Imageview.
See the following images that illustrate the problem.
At the bottom right you can see 2 different progress bars (a ProgresBar and a ProgressIndicator).
A part of the flickering result is still visible below the second image. It somehow stays visible, probably because the area doesn't get redrawn.
Any idea what makes the flickering happen? Is there anything I can do to fix or avoid this?
I tried some VM options in IntelliJ: -Dsun.java2d.d3d=true -Dprism.forceGPU=true to somehow enable hardware acceleration, but that doesn't seem to help.
Disabling the progressbar fill animation doesn't help either.
I had a similar problem with some arcs and shapes that would flicker when its attributes / sizes were changed.
The solution to my problem was to make sure that the methods used to change the shapes were called from inside the JavaFX thread.
Platform.runLater(() -> {
arc.setStartAngle(30);
arc.setLength(45);
}
I have been working on getting this seat mapping chart for a while and have created a few iterations, and the problem I keep finding is when I get to IE8 the panning for this is way to slow and delayed.
What I have at this point to cut down on load time is created a png to replace my "strokes" since I assume ie8 wanted to re-render each time I dragged the map.
I also added controls hoping to force IE8 users this option, but still there is a delay in the pan, and if I can have users with IE8 (and ie7 if possible) still drag/pan without the controls and the respond time a little faster that would be great.
Here is my current JSFiddle
I am still a little green with JS so if you have any suggestions it would be much appreciated. (PS Chrome frame is awesome but is not a option for me)
Update
I have removed the original dragging function and replaced the code using jqueryui's draggable function. Martin had suggested to just drag the div, and not the Raphael elements. Doing so lets this thing fly in ie6-8 which is great, but then came my concern about scaling. What I was seeing before on zoom my paper element WxH would stay the same ratio, cutting off my drawing when it zoomed in. After digging through the Raphael documentation I came across paper.setSize. setSize was exactly what I needed to allow this project to move and groove in ie6-8 and pretty much conquer all browsers in its path.
So in short, using jqueryui's draggable and paper.setSize has cured my cross browser zoom n' pan blues.
From what can be seen in the Fiddle, you are triggering a new rendering of the image by calling .translate() inside of a mousemove event handler:
mapContainer.translate(currentMapPosX, currentMapPosY);
rsrGroupies.translate(currentMapPosX, currentMapPosY);
This approach is toxic for performance in all browsers, let alone IE8. When dealing with VML in IE8 you should consider that each and every DOM change inside the image will result in the image being rendered again. Doing that while panning will always be painfully slow.
I see that you are already using jQuery in your Fiddle. If you want to increase performance of your panning, you should consider doing the following:
Render the image in Raphaël exactly once for the current zoom level. Do not attempt to change transformations in your VML/SVG image at any point in time while panning.
With the mousemove implementation of panning you already have, move or scroll the HTML container that holds your VML/SVG image instead. Imagine a <div> with overflow: hidden and simply move the image inside relatively, or scroll to the appropriate position.
This will require some adjustment of your coordinate calculations, but it will improve your performance in all browsers.
We have a simple modal in our web application.
It's nothing special and is built on twitters bootstrap library.
It contains a backdrop that is a semi transparent white background with position: fixed and width and height set to 100%.
The modal itself, however, is not statically positioned but absolutely positioned, this is because the modal might be taller than the viewport and we don't want scrolling in the modal.
Here's the dilemma, when the backdrop is present the scrolling is far from smooth in Google Chrome, if I change the position of the backdrop to absolute everything is fine.
This has the obvious downside of not covering the entire page.
I tried to reproduce it with a JSFiddle but I couldn't (most likely due to the fact that we a lot more content on our site).
Nonetheless here is my attempt: http://jsfiddle.net/LdC4w/
So, any ideas?
Oh, and I can add that having a background image instead of opacity is not an option.
I have a dojo animation object of about 15 images. I'm also using dojo.fx.chain to link them all together.
Right before I create all my dojo.fadeIn's and dojo.fadeOut's I added in some basic javascript to preload each image.
My question is: Am I doing this the hard way or is there some function/attr I can set in the animation object to do this?
I do not think there is a predefined method in dojo to preload these images for your animation.
I guess you are listening image.onload and image.onerror events to preload images, it is a common method. If you feel it is too difficult and hard to control, you can try a simple clean css way that is to put an invisible div into your page and set background images with these animation images. When the page load, the images are automatically loaded.
dojo Animations are not specifically geared around images, they work on an abstract level and may operate on DOM nodes. So, there's no built-in support for IMG nodes specifically.
There is dojox.image.preload (http://api.dojotoolkit.org/jsdoc/HEAD/dojox.image.preload) which will do the work virsir suggested of loading images into an offscreen div, but it does not (currently) arrange an onLoad event hook for you to detect when they're loaded and thus play your animation.
I imagine you could use preload()'s return value and use it to hook into onLoad, but that's an exercise for the reader. Have a look at the source code, dojox/image/_base.js.