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,
thanksWithout 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 -
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. -
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. -
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,
FrankCan 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); -
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
pleaseHenj365,
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
-
hi, I am trying to update my ipad to the latest version of IOS but first I want to backup my information into itunes but I am getting a message that said that I am not connected. can you please help me? Thanks. Marcela <Email Edited by Host>
-
Email script output to logfile
Hello people , I am fairly new to this language and has gotten good help from you guys. I have written a script (with some help) to email several files in a folder. This works great. But since this script is to be used on a bad internet connection I
-
CMYK Values in InDesign different to Corel?
This is probably a stupid question, but.. I had to recreate a document in ID which had been created in Corel Draw, and the CMYK colour values don't seem to translate correctly. For example, a colour in CD has 0,60,60,40 and 153,0,0 RGB. If I create
-
Oracle JDBC 2.0 Connector configuration
I'm trying to configure a JDBC 2.0 connector (with XA support) through the Visual Administrator's JDBC Connector tab. I've configured a driver called "ORACLE" which includes the classes12.zip file from Oracle. I've configured a DataSource called ORAC
-
No Applicable Data Found during query execution !
Hi friends, I know this question has been posted on sdn so many number of times and i have gone through all of those thread. i checked all the things menssioned in the previous thread and did accordingly, but not able to resolve this issue. Here is t