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.
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 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
what is the recommended approach to playing animation sequences that include as the end-stone a repeating animation. For example, here are a few scenarios:
Sprite appears on screen, play intro animation, then repeat forever an "idle" animation
Sprite with "idle" animation performs some action thus I need to play some other specific animation at the end of which the sprite should start idling again.
CCSequence does not let me do this, as the "idle" animation is wrapped into a CCRepeatForever.
If I simply chose to run whatever animation I like above the idling animation I get frame flickering (looks like both animations are played at the same time) — sucks.
All animations are inside CCAnimationCache ... any advice will be highly appreciated.
I don't know if there is a recommended approach. What I would do is running the second animation (the repeating one) with a delay or by chaining it to the first through the animation completion handler.
An easy way to do the chaining is adding at the end of your first animation a CCCallFunc action, like here, that will call trigger the second animation:
CCActionInterval* action = [CCSequence actions:
[CCProgressFromTo actionWithDuration:duration_ from:100.f to:0.f],
[CCCallFunc actionWithTarget:self selector:#selector(startSecondAction)],
nil ];
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.
i am using stacked widget and i want to have the following effect :
when i press a pushbutton , the button should move to the center and gradually fade out at the same time. while the button is fading the next page of the stacked widget should gradually fade in or any kind of animation would do. tried many thing but i got unsatisfactory results. the animation should work work on windows and linux.
I don't think that you can get fading effects directly from QStackedWidget.
However, you can easily achieve the effect you need by using QPropertyAnimation and QStateMachine. You can find how to do it in Animation/States example (should be in /qt/examples/animation/states/ subdirectory of your Qt installation).