I have some sets of raphael elements that are draggable, sometimes the elements animate for a halv a sec, but if the set/element is draged while animating the animation stops.
I want to make my elements undraggable when i'm animating so i'm sure that the animation will always complete. Is there any way? I tried using undrag() but it didn't work.
I'm not using any plugin for dragging, just created my own start,move and up methods for set.drag(start,move,up)
Thanks
I've got it to work with undrag method.
I just needed to add undrag on each element of the set instead the set itself(i'm calling drag on the set so it seems wrong) and the it worked.
function undragAll() {
$.each(screenSets, function (index, set) {
$.each(set, function (index, setEl) {
set[index].undrag();
});
});
}
Related
I currently have the following working fiddle
var moveAnim = Raphael.animation({ progress: 1 }, 5000, 'bounce').repeat(Infinity);
I animate a circle along a line.
I also want to make the circle flash at the same time but I can't seem to work out a way to do this?
I thought about adding the circle to a set and applying the additional animation to this but I can't see to get this either!
Any ideas?
This is a hack and I make no attempt to hide it, but it could be made a bit nicer.
There's a couple of problems depending on 'how' you want to animate the flash. The main problem is having 2 simultaneous animation on the same object, as Raphael doesn't do this (to my knowledge). Its easier if you want to animate an alternate attribute than the same one. If you want to animate a scale to indicate a flash, you will need to append the scale transform to the end of the path transform string ('t,s').
Example here, just uses opacity attribute.
Probably the nicest method would be to include something that figures out time running and amends an attribute manually within the animation function (paper.customAttributes.progress). However, that will probably take a bit longer.
Another alternative could be to animate another object off screen, that does all the calculations for you. It feels a bit ugly, but should work.
So earlier we create a dummy object off screen...
var dummy = paper.circle(-100,-100,10).attr({ opacity: 0 });
Within the progress func, you can then set the real circles opacity to be the same as the offscreen one.
this.attr('opacity', dummy.attr('opacity'));
And we get the dummy animation triggering later
dummy.animate(flashingAnim);
jsfiddle
As mentioned, I think there are cleaner ways, but may involve you writing a small linear animation func separately, but this may help if performance isn't an issue and you don't mind extra elements in the dom.
An alternative solution that I came up with is a looping callback. The very sound of a looping callback sounds ugly but I guess thats what an animation is?
It does appear that you can attach multiple animations to an element! Here's a an example
function animateIn() {
flashingCircle.animate({ fill: '#f00' }, 1000, animateOut);
}
function animateOut() {
flashingCircle.animate({ fill: '#fff' }, 1000, animateIn);
}
animateIn();
I have a scrollview and an image as a background in different surface with lower z-index. I want to scroll the image with half the speed of the scrollview.
Any ideas on how to implement it ?
I can't give you a COMPLETE solution, but this should take you down a decent path.
1) Famo.us has worked on multiple scrollViews. Each has a slightly different method to get the 'scrollTop' value from it.
The one created earlier only gives you the scrollTop value for the first visible element in the list. So, in this case you can get how many elements have been scrolled away and calculate the actual value yourself. OR if you have a small, and limited number of the elements in the scrollView you should wrap all the elements in a single view and pass a singleView to the scrollView. This way Famo.us has to do calculations for off-screen elements, but if the number of elements is small enough, it can make many animations/calculations much easier.
The second scrollView was call LimitedScrollView internally. I don't have much experience with it yet, but it should give you the correct values anyway.
2) ScrollView fires events on scroll. use that to update the value of a transitionable.
Pseudo Code:
scrollView.on('scroll', function(){
transitionable.set(scrollView.scrollTop)
});
3) You can now bind the transform value for the background to the transitionable.
Pseudo Code:
background.transformFrom(function(){
return Transform.translate(0, -transitionable.get()/2, 0);
});
Now, things should work correctly.
Hope that helps.
I've been looking through the SFML documentation for making clickable sprites, but so far I haven't found anything.
Do you guys think you could help me out?
There is nothing like sf::ClickableSprite in SFML so far, and probably there will never be. (Current list of classes in SFML)
However, you can obtain this behavior with the sf::Sprite object and the events. The idea is simple - as soon as you get the sf::Mouse::isButtonPressed(sf::Mouse::Left) event, check if the mouse is in the sprite. If it is, perform the action. You can perform another action (maybe undo) when button is released.
There is sf::Sprite::getGlobalBounds() function which returns you the position and the dimensions of the sprite. There's also sf::Mouse::getPosition() function, which returns the current position of the mouse. You can use sprite.getGlobalBounds().contains(mousePos) to check whether the mouse is in the sprite.
If you're using views, you'll need to add the view's position to sf::Mouse::getPosition(window), since it gets the mouse position relative to window coordinates.
(thanks to Chaosed0 for additional notes.)
I am trying to implement simple backtracking algorythm (solitaire game) and I also want to show the progress, not only the answer. So I decided to use QGraphicsView to draw gamefield's status on it. I want to update scene after I field's changd and when I want to get control back, to resume changing gamefield. What is the best way to do this?
UPD:
pseudocode
List<Step>* solve(GameField& field) {
//changing gamefield, clearing scene, adding some objects (rects with text) to scene
updateScene(); //here I want the scene to be updated right now, and
//not when it's scheduled to
}
I have the following code:
paintGL()
{
if(mouse_was_clicked)
{
... do the color picking with openGL to identify a clicked element
... !!! now I need to call again paintGL() to switch the selected element from the
old one to the new one but I can't create a recursive cycle!
}
else
{
... normal code to draw the scene and the selected element in red ...
}
}
As the lines suggest, I need a way to call once more the paint event.. is there any way to accomplish this without creating a potential livelock? Something like deferring a new paint event?
If the control flow within your paintGL() is that simple, just make sure that the contens currently being in the else block are executed in every case:
void MyWidget::paintGL()
{
if(mouse_was_clicked)
{
... do the color picking with openGL to identify a clicked element
}
... normal code to draw the scene and the selected element in red ...
}
It's a bit hard to tell exactly what you're doing here.
If you're trying to setup a display widget (a color picker) when paintGL detects a mouse button has been clicked, you've mixed up your events. You should make a separate action for handling a mouseclick, which sets up flags/variables and triggers a repaint. IE, move the mouse-event handling out of the repaint callback.
I could easily have misunderstood your problem here, however... if so I apologize.
As a general rule, though, if you find yourself needing a recursive repaint in QT, you're probably working against, rather than with, the system.