I have a trigger that changes the background of a div to an animated gif
I would like the javascript to force the image to animate again every time it is set as the background, however it currently only loops once and then displays the last frame after that.
Any ideas?
I tried adding ?v=1 but it seems that that causes a delay as the image loads again. I would prefer to have the image saved in cache but trigger the animation to restart
Related
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 want to show a preloader on my website before the content loads,However when i choose a animated preloader image with transparent background the edges look very jagged. How to I modify the image or is there a way to have a transparent background to animated gifs?
I am using the preloaders from preloader.net
The first and probably easiest option you have is to use spin.js. “It dynamically creates spinning activity indicators that can be used as resolution-independent replacement for AJAX loading GIFs.”
If a script is not an option or you want to have a different spinner you have to create a .gif with no anti-aliasing that is bigger than the spinner you want to use and scale it down with html.
Original spinner without edges (without anti-aliasing, therefore it has a pixelated edge):
But if this spinner gets scaled down, it looks nice:
Be sure to use
img {
-ms-interpolation-mode:bicubic;
}
to make it also look pretty in older IEs.
You can use a site that helps you generate your spinner. A great option is :
loading.io
I have a page that displays people's pictures. I have an animated gif over each picture so that when people click on it, it plays a short animation with transparency so that it looks like the person is getting slapped in the face. Here is my line of code:
<img class="slap_animation" src="/images/slap-in-the-face-still.gif" alt="" onclick='this.src="/images/slap-in-the-face.gif"' />
It works perfectly but I want to do more with it. I want to make it so that when people click on it, the animation plays and on the last frame, it performs a symfony action to add +1 to the "slapcount" field. What is the easiest way to do this? The animation is just about 2 seconds long.
You can make a timer that every 2 seconds will add +1 to your "slapcount". When the animation is running enable the timer and when it is not disable it.
I'm having issues with all the animations on the page lagging when I choose to display this picture. I have tried displaying it with fadeIn, visibility, animate:opacity, display:block, and no matter which way I reveal it still causes the browser to choke. There has to be a way around this. (I've also tried preloading the image and it makes no difference!)
Is it just the size of the image?
http://jsfiddle.net/ZJpmT/2/
I suspect it is the image size. Doing a quick test showed that a fadeIn with a duration of 5 seconds, could be shown, but using a duration of 1 second wouldn't show any fade effect at all, but just show the the image at once.
Animating an image which is 1MB in size isn't what you want to do. If you really need this image to be that large, try to add a background to each frame, which matches the pages background and save it as JPG. That could reduce the size a bit, but it's not guaranteed that it will stop the browser from choking.
Hi I was using the sample found here for fading in a background image. Everything is working fine its just that before the fade in animation starts the image shows briefly then the animation starts.
No Background => Full Image => Image Disappears => Animation Starts =>
Full Image
Note I did add the exact same code as him but I still get this result. I did notice that his sample was written for WP7 7.0 which I'm guessing is the reason it's not loading exactly like the example he provided.
Has anyone found a workaround for this?
Make your background initially hidden in xaml or by code in page constructor. Animation starts after page loaded, so background is shown from application start to Loaded event
I bet you have opacity for image set to 1, and when it's loaded then you start showing it - resulting in bizarre flickering. Set opacity to 0 in xaml and then run your Storyboard (that animates opacity from 0 to 1).
Well even though it takes about a second and a half extra to load, I finally got it to stop blinking. Basically I would save the file to isolated storage, and then load the file from isolated storage instead of loading the image directly to the background after it finished downloading.
I got the idea based on the fact that the sample of loading the background using a local image worked perfectly.
Like I said it takes a little longer to download because of the saving and loading from isolated storage, but it works well.