Reverse animation/transition on event

So I'm having a bit of issue getting an animation of mine to behave the way I want. My intent is to have an animation start on a button press (or any given event), play till its end, and then reverse once the button is released (which could happen in the middle of the animation, in which case the node should animate back to it's start position).
I originally tried doing this with just the RotateTransition class (since that's the type of animation I'm doing), but couldn't get the behavior described above, so I started messing around with a Timeline.
This is what I have so far, and works great for releasing before the animation completes, but I can't get the node to animate back to it's original position after it's completed. I can't seem figure out the right combination of setting the CycleCount, AutoReverseProperty, pausing/playing or whether or not I need multiple KeyFrames to express the different parts of the animation.
SVGPath someNode = new SVGPath(); // The node I'm animating
Timeline rotateTimeline= new Timeline();
rotateTimeline.getKeyFrames().add(new KeyFrame(Duration.millis(1000), new KeyValue(someNode.rotateProperty(), -50));
// Events that start/stop the animation -- please ignore the keyCode conditionals as I might have them wrong...just typing them up on the fly as an example
this.setOnKeyPressed(keyEvent -> {
    if(keyEvent.getCode() == KeyCode.ENTER) {
        rotateTimeline.play();
        someNode.getStyleClass().add("pressed"); // Is there a way to toggle style classes instead of having to add/remove them?
this.setOnKeyReleased(keyEvent -> {
    if(keyEvent.getCode() == KeyCode.ENTER) {
        rotateTimeline.setRate(-1);
        someNode.getStyleClass().remove("pressed");
        // This is where I tried all sorts of things, like setting autoreverse to be true, then playing the
// timeline again, having two keyframes and pausing after the first is met and resuming here, and nothing seems to be working for me...
And not to bundle too many questions into a single thread, but is there any way to edit my forum name? I went to my profile prefs, and the text box to update my forum handle is grayed out... (e.g. http://i.imgur.com/5agcHja.png)

I would initialize the forward and reverse rotations as independent rotations. Start the forward rotation on the key down, and stop it on the key up. Listen to the status of the forward rotation and start the reverse rotation when the forward one stops. (This will reverse the forward rotation either if the key is released or if the rotation reaches its end.)
This uses a mouse for simplicity but the idea is the same:
import javafx.animation.RotateTransition;
import javafx.animation.Animation;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
import javafx.util.Duration;
public class ReversableRotationTest extends Application {
@Override
  public void start(Stage primaryStage) {
  final Rectangle rect = new Rectangle(50, 150, 250, 150);
  rect.setFill(Color.CORNFLOWERBLUE);
  final Pane root = new Pane();
  final RotateTransition forwardRotation = new RotateTransition(Duration.seconds(1), rect);
  forwardRotation.setFromAngle(0);
  forwardRotation.setToAngle(-50);
        final RotateTransition reverseRotation = new RotateTransition();
        reverseRotation.setNode(rect);
        reverseRotation.setToAngle(0);
        // make the duration of the reverse rotation the same as the progress of the forward rotation:
        reverseRotation.durationProperty().bind(forwardRotation.currentTimeProperty());
        // start forward rotation when mouse is pressed
        root.setOnMousePressed(mouseEvent -> forwardRotation.playFromStart() );
        // stop forward rotation when mouse released
  root.setOnMouseReleased(mouseEvent -> forwardRotation.stop() );
  // start reverse rotation when forward stops
  forwardRotation.statusProperty().addListener((obs, oldValue, newValue) -> {
      if (newValue == Animation.Status.STOPPED)
                reverseRotation.playFromStart();
  root.getChildren().addAll(rect);
  Scene scene = new Scene(root, 400, 400);
  primaryStage.setScene(scene);
  primaryStage.show();
  public static void main(String[] args) {
  launch(args);

Similar Messages

  • IPhone 4 animation/transition lag

    When I unlock my iPhone or sometimes when I open or close apps, animation sometimes lags.
    I've started noticing it more and more and I'm a little worried.
    I know it's not a big deal, and it's just a visual animation of opening and closing apps, but I wonder if it's happening to you guys to, and why does it happen?

    And i thought it only happened to me. I've tried a couple of my friend's iPhone 4 and 3/10 of my friends experienced this animation/transition lag. I am fully aware of your problem and i'm experiencing it as well. Doing a hard reboot did solve the problem for a couple of minutes but the problem still persists. I'm currently running the latest iOS on my iPhone. I already called apple and they said that it is a software problem. I hope that this problem will get fixed soon.
    Edit: When opening an app, particularly the app store, there is a slight "Blackout", usually lasting for miliseconds, before opening up the app. My iPhone is only 3 months old and it's experiencing problems..
    Message was edited by: cyclone34

  • Disable animations/transitions globally in Firefox

    Just thought I'd share the solution I've finally found to this problem.
    Basically I was looking for a way to disable all fancy animations/transitions that happen whenever you hover over a button, tab etc. in Firefox. I'm using a theme that uses these transitions heavily and it just slows down the general browsing experience.
    One annoying transition that I've been wanting to get rid of is when you try to move a tab around (changing the order of tabs). The transitions make this quite cumbersome due to the lag the transitions bring with them. I do this quite frequently due to using Tree Style Tab, having a vertical tree of tabs. I found several threads describing this issue, one of which was archived: https://support.mozilla.org/en-US/questions/802516
    Anyways, the solution I've found to be working is to use Stylish (FF addon), and to create a User style with the following code:
    <pre><nowiki>/* Disable transition effects globally - Helps prevent lag & hight CPU usage */
    transition: none !important;
    }</nowiki></pre>
    If you only want to disable the tab move transition, you could probably track down the css file in the theme and the code in there that is responsible for that particular transition.
    This works for me on Firefox 29.
    Hope this info comes handy to someone out there.
    Cheers,
    Eddie
    Edit: seems like the code breaks when submitting this question. There is supposed to be a star instead of the bullet point in the code above like so: [star]{

    ''sireddie wrote:''
    <pre><nowiki>* { transition: none !important; }</nowiki></pre>
    That's not a good idea. It breaks certain panel menus. Use the following style instead.
    * http://userstyles.org/styles/99666/disable-arrow-panel-animations-v3
    ''sireddie wrote:''
    If you only want to disable the tab move transition
    You should be able to get rid of that by setting ''browser.tabs.animate'' to '''false''' in about:config.
    * http://kb.mozillazine.org/About:config
    ''sireddie wrote:''
    There is supposed to be a star instead of the bullet point in the code above
    A moderator has corrected your post.
    * https://support.mozilla.org/kb/markup-chart

  • Help Finding an Animated Transition

    Does anyone know where I can find an animated transition or a photo album opening and transitioning in to a picture. I've seen one where the first page of the book zooms in to a photo, but I cannot remember where I saw it. I've got a deadline and the client really wants something like this. Thanks

    This one is wedding specific, but 12 Inch Design has one:
    http://www.12inchdesign.com/cgi-bin/12inchdesign.cgi/scan/MM=805f07467c7f277e660 2b3731d3c11e4:75:89:15?mvsession_id=94j73FJo&mv_pc=154&mv_more_ip=1&mv_nextpage=resultscategory
    3 down on the far left

  • Reversing animation with actionscript 3

    I'm making a website with basic timeline navigation.  Which is typically how I prefer to work because I'm from an animation background and more visually oriented then code oriented.  I'm wondering if it's possible to play in reverse along the timeline so that if animation plays when you navigate to one section it will then play in reverse when I click the back button.  Is this at all possible...or a simple method that would achieve the same effect?

    you can call mcF to play any timeline from any frame to any other frame by passing the movieclip, start frame and end frame.
    for example, to play the root timeline from frame 33 to frame 1 (ie, in reverse), use:
    mcF(MovieClip(root),33,1);
    // change nothing below
    function mcF(mc:MovieClip,startFrame:int,endFrame:int):void{
    mc.startFrame = startFrame;
    mc.endFrame = endFrame;
    mc.addEventListener(Event.ENTER_FRAME,playF);
    function playF(e:Event):void{
    var mc:MovieClip = MovieClip(e.currentTarget);
    if(mc.startFrame<mc.endFrame){
    mc.nextFrame();
    } else if(mc.startFrame>mc.endFrame){
    mc.prevFrame();
    if(mc.currentFrame==mc.endFrame){
    mc.removeEventListener(Event.ENTER_FRAME,playF);

  • Help with Reverse Animation On Button

    The buttons are animated with a movie clip inside each button
    and the movie clip plays on rollover, however I need this same
    movie clip inside the buttons to play reversed, when the cursor is
    moved away from the button.
    I know how to do this with an instance but I already made
    each button and fooled around a thousand times with the animation
    and I do not wish to start over again!
    I have only experimented with this type of action script
    before and I must say I am a little lost =(
    Can anyone help me as to how I would go about doing this ?
    Any coding would help.
    I know there is a simple way of doing it with action script,
    but I have no more time to fool around and I need your assistance
    =P
    If you could supply the code it would help me out.
    (I can modify it to work with my page and my buttons)
    Just need something to work off of.
    Maybe a code I can put on the button, or whatever you can
    come up with.
    For future reference,
    thanks

    Without knowing the details of what you have created, or the
    code you have attempted to use, the best I can offer at the moment
    is to say you need to have the reverse playing code of the
    movieclip get triggered by the mouse out event and not stop
    stepping back down the timeline until the _currentframe value
    reaches 1. If another mouse over should occur, then it's your
    decision as to whether it picks up from where it has stepped back
    to or starts from frame 1.
    Starting over again is often the better approach, since what
    you may have created may not be able to facilitate directing things
    to play in reverse.

  • Need help with forward/reverse animation depending on playhead position

    I'm trying to create a side-scrolling image gallery, with a series of thumbnails at the top that will take you to their corresponding full size images. I've been able to make them link to the correct frames, and able to animate the scrolling going in one direction, but the scrolling in reverse is presenting a challenge. It might be an easy fix, it might not.
    Basically, in my non-AS3 literate mind, the way I imagine it would work is I'll have animations in my timeline corresponding to forward and reverse, and depending on what frame the playhead is on when a user clicks the thumbnail, it will play a certain portion of one animation or the other. So how would I accomplish this? A series of 'if' and 'then' commands?
    I don't know the syntax (yet). If anyone has been down this road before and can give me some guidance, I'd sure appreciate it.
    Thanks!

    Based on the code you show, it would appear that your image changing involves timeline-based animations, unless you have stop();s in all the frames you gotoAndPlay.  I can only guess that's how you have it... one images transitions into another as you move along the timeline.
    Actionscript is the coded approach, but beyond moving around to different frames.  The ultimate coded version of this occupies one frame of one layer and is all code (possibly just one line of code, importing the real code from a Class file), with all content being loaded dynamically from a server.
    Here's something I offered for another posting from today that took another approach that involved having all the content in the file and a bit of timeline transition--I've edited it slightly.  Maybe you can get an idea from it.
    ... you could create each slide as a movieclip which transitions in and out, with a stop on the first frame and on the frame where it is in full view.  Using a variable or two to keep track of things, such as the current slide and the next slide, you could have your buttons call a function that identifies/assigns the next slide, and commands the current slide transition out.  At the end of that transition (last frame), you assign the next slide to be the current slide and tell that slide to transition in.  Here's a working example that you can look at...
    http://www.nedwebs.com/Flash/AS3_slideshow.fla

  • Animations and handling events

    Hi,
    I want to display an animation on a JPanel. But when I draw on JPanel using a threads run method, the JPanel stops responding to other events such as mouse clicks on JButtons.
    Can u plz tell me what is wrong.
    Thanks a lot,
    Chamal.

    Hi,
    Thanks a lot for your reply.
    I am not that familiar with threads and GUI. What is UI thread. How can I avoid using it.
    Best Regards,
    Chamal.

  • Inserted Animation Transition Issue

    I'm starting a project for a large client who want a specific
    look and feel to the project:
    Logo at top of each slide.
    Persistent border on left with step by step instructions and
    Show Me / Try Me buttons.
    I found some good information about creating a parent project
    that has the final project size, then create all simulations and
    demos in a different project and publish as a SWF. Insert SWFs into
    parent project as an animation.
    Okay, this looks pretty good, but here's the problem: the
    animation fades in and out. I created the animation with no
    transitions, changed the project preferences to to NOT fade in and
    out on first/last slide, and to display for the duration of the
    slide. Any idea how to fix this so the animation just displays. Is
    this a good strategy?

    Hello,
    I am new to Adobe Captivate and had the same issues within a quite basic project. The before and after the recorded animation there was a white screen.  I followed the steps recommended in this discussion, but they did not help. What I then did is that I expanded the time of the animation and additionally I switched of the compression for publishing. Now it works fine for the published project. If I preview within the project, the screen is still there.
    As I am a (very) beginner, I have to admit, that I do not exactely knew why it works now, but it works.
    Best, Caroline

  • I updated to the new iWork Keynote... Animation/transition "Perspective" is no longer available... I wonder why?

    Any reason why Apple deleted "Perspective" in their transition/animation... that was my favorite of them all.

    The transitions are still there; they're just not enabled.
    Since the removal of the option to restore old transitions in the Keynote menu, they remain inaccessible.
    To prove they're still there - select the new Keynote app, right click, then select 'Show package contents'.
    Navigate to 'Contents' -> 'Resources'; all the old Transitions are there under 'KNTransition' including my old favourite 'Color Planes' that has now disappeared too.
    Someone just need to work out how to reactivate them...
    Or Apple just needs to turn them on again.

  • Reversing Animation

    I'm in a little bit of a pickle. I broke my ankle and can't
    get to my office where my actionscript book is.
    I need to put a simple button into an animation that makes
    the animation loop in reverse. Is there a function or method that I
    can code in to accomplish this?
    Everything is in place in my project, I just need to know how
    to make my animation reverse when I press a "reverse"
    button.

    Thanks kglad! I really appreciate your help. I'm sorry if I'm
    being a nuisance, but is the "mc" the name of the file I'm working
    with. I created the animation from scratch. I've tried to put in
    the name of the file in those areas, and have only received errors.
    I'm not quite sure what to put into the "mc" code. I know its
    supposed to be the name of the clip i'm working with, but I'm not
    sure what the name of the movie clip is.

  • Reverse animation issue

    Hi,
    I would really appreciate if you could help me because I need it to complete my Capstone Project!!
    I want to accomplish the following: when you click a rectangle images come to the screen with animation and when animation stops the images stay there. Now when you click another rectangle the images that were load before are animating reverse so they go out of the screen and new images comes in.
    In a sense I am not sure how to make the following: when a rectangle is pressed it plays reverse the animation of the one that was loaded, and after that it plays his animation.
    I created 6 symbols that have their own animation but I am not sure what to do next.
    An example: http://www.youtube.com/watch?v=tTWD9olzYKw#t=2360
    Thank you in advance,
    Frank

    Can someone modify this code so that whatever button you play, then it works. Now for example if you press button 2 it plays animation 2, but if you press button 4 it reverses the animation of 3 and not of 2 which was previously played. The button that you click should play the animation of the previously played...
    sym.setVariable("current", 1);
    sym.$('btn1').click(function(){
    current = sym.getVariable("current");
    if (current==1){
    sym.getSymbol('Symbol_1').play();
    sym.setVariable("current", 2);
    if (current==2){
    sym.getSymbol('Symbol_1').play();
    sym.setVariable("current", 3);
    if (current==3){
    sym.getSymbol('Symbol_1').play();
    sym.setVariable("current", 4);
    if (current==4){
    sym.getSymbol('Symbol_1').play();
    sym.setVariable("current", 1);
    sym.$('btn2').click(function(){
    var current = sym.getVariable("current");
    if (current==2){
    sym.getSymbol('Symbol_1').playReverse();
    sym.getSymbol('Symbol_2').play();
    sym.setVariable("current", 3);
    if (current==1){
    sym.getSymbol('Symbol_1').playReverse();
    sym.getSymbol('Symbol_2').play();
    sym.setVariable("current", 2);
    if (current==3){
    sym.getSymbol('Symbol_1').playReverse();
    sym.getSymbol('Symbol_2').play();
    sym.setVariable("current", 4);
    if (current==4){
    sym.getSymbol('Symbol_1').playReverse();
    sym.getSymbol('Symbol_2').play();
    sym.setVariable("current", 1);
    sym.$('btn3').click(function(){
    var current = sym.getVariable("current");
    if (current==3){
    sym.getSymbol('Symbol_2').playReverse();
    sym.getSymbol('Symbol_3').play();
    sym.setVariable("current", 4);
    if (current==2){
    sym.getSymbol('Symbol_2').playReverse();
    sym.getSymbol('Symbol_3').play();
    sym.setVariable("current", 3);
    if (current==4){
    sym.getSymbol('Symbol_2').playReverse();
    sym.getSymbol('Symbol_3').play();
    sym.setVariable("current", 1);
    if (current==1){
    sym.getSymbol('Symbol_2').playReverse();
    sym.getSymbol('Symbol_3').play();
    sym.setVariable("current", 2);
    sym.$('btn4').click(function(){
    var current = sym.getVariable("current");
    if (current==4){
    sym.getSymbol('Symbol_3').playReverse();
    sym.getSymbol('Symbol_4').play();
    sym.setVariable("current", 1);
    if (current==3){
    sym.getSymbol('Symbol_3').playReverse();
    sym.getSymbol('Symbol_4').play();
    sym.setVariable("current", 4);
    if (current==2){
    sym.getSymbol('Symbol_3').playReverse();
    sym.getSymbol('Symbol_4').play();
    sym.setVariable("current", 3);
    if (current==1){
    sym.getSymbol('Symbol_3').playReverse();
    sym.getSymbol('Symbol_4').play();
    sym.setVariable("current", 2);
    I apprecieate your time,
    Frank

  • Transition Manager event complete

    I am trying to get my head around AS3 and the transition
    manager class.
    How can I add and event listener to goto "frame" when the
    transition is complete? I know this is probably a newbie question,
    but I am really new at this. Any help is appreciated.
    What would I add to get the timeline to go to the next (or
    specified) frame?
    Furthermore, what would I add if I wanted a new transition to
    be triggered (in the same frame) once the prior transition was
    complete? If there is a tut for this, kindly direct me.
    Here is what I have now:

    Hello Greg,
    You can simply attach an event listener to that new tween you
    just created like so:
    beginTM.addEventListener("allTransitionsOutDone",
    _tmComplete);
    function _tmComplete(e:Event)
    // Place your code here
    this.gotoAndPlay(10); // Goto Frame 10
    Also you can add event for the IN transition like so:
    beginTM.addEventListener("allTransitionsInDone",
    _tmComplete);

  • Flash Animation Transition

    I have this file that i bought. it is a transitioning
    circles:
    click
    here for preview
    and I want to do a second transition that will go from the
    opposite corner side. Here are the frames and action scripts:
    Frame 1:
    layer 1 = // specify the number of rows and columns needed
    for the movie
    var grid_rows = 50; // (15 rows x 20 pixels = 300 pixels)
    var grid_cols = 50; // (15 cols x 20 pixels = 300 pixels)
    layer 2 =// declare depth var
    var next_depth = 0;
    // declare var to determine which diagonal loop is on (next
    frame)
    var next_diagonal = 0;
    // add unit masks to the grid
    for (var j = 0; j < this.grid_rows; j++) {
    for (var i = 0; i < this.grid_cols; i++) {
    // determine name of this unit
    var unit_name = "unit_" + i + "_" + j + "_mc";
    // create the unit
    this.grid_mc.attachMovie ("unit_mc", unit_name,
    this.next_depth++);
    this.grid_mc[unit_name]._x = i * 20;
    this.grid_mc[unit_name]._y = j * 20;
    Frame 2
    layer 2 = // start playing the unit clip for each diagonal
    for (var i = 0; i <= this.next_diagonal; i++) {
    // determine x and y coordinates
    x_coord = 0 + i;
    y_coord = this.next_diagonal - i;
    // play the unit movie
    if (x_coord < this.grid_rows && y_coord <
    this.grid_cols)
    this.grid_mc["unit_" + x_coord + "_" + y_coord +
    "_mc"].play();
    Frame 3:
    layer 2 = // increment the next diagonal
    this.next_diagonal++;
    // determine whether to carry on or stop
    if (this.next_diagonal < (this.grid_rows +
    this.grid_cols))
    this.gotoAndPlay (this._currentFrame - 1);
    else
    stop();
    can someone please help me, i am kinda confused. any help
    please

    Henj365,
    put your intro into index.html (or whatever the default
    document is on your server).

  • CAN NOT waiting for the UI animation/transitions

    The worst user experience.
    Users can not do anything when the animation is running.
    How to turn off or make it faster without jlbrking?
    Really useless and annoying feature it is.

    The worst user experience.
    Users can not do anything when the animation is running.
    How to turn off or make it faster without jlbrking?
    Really useless and annoying feature it is.

Maybe you are looking for