Following Famo.us University Animation part. The following code didn't halt the translation, instead runs straight to the end. I expected it halted where it is clicked. Am I right?
surface.on('click', function() {
stateModifier.halt();
surface.setContent('halted');
});
Thanks
The answer is: It will halt the transform, but will complete at the transforms final position
That is why you see the jump from where it is clicked.
Rather than halt the Transform just set the transform to the current Transform position.
Example jsBin
surface.on('click', function() {
//stateModifier.halt();
stateModifier.setTransform(stateModifier.getTransform());
surface.setContent('Halted');
});
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 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();
});
});
}
The app is set up for only landscape.
In Project->target->Summary->Supported Interface Orientations, I enabled the 2 landscape icons (both left and right).
And in AppDelegate.m, the below code is written:
- (BOOL)shouldAutorotateToInterfaceOrientation: (UIInterfaceOrientation)interfaceOrientation
{
return UIInterfaceOrientationIsLandscape(interfaceOrientation);
}
When the app is running on the device, the view showed at the beginning after the default cocos2d icon, all the positions are wrong which were all moved to the right-down side. When I rotate the screen, everything goes right, all in right position.
What's wrong?
I also tried the method below:
I disable all the icons in In Project->target->Summary->Supported Interface Orientations.
The code in AppDelegate still in use.
Then the view at the very beginning is ok but the screen can be rotated to protrait.
....
Any one can help?
Also put these two for iOS6 orientation, in AppDelegate.
-(NSUInteger)supportedInterfaceOrientations {
return UIInterfaceOrientationMaskLandscape;
}
- (NSUInteger)application:(UIApplication*)application supportedInterfaceOrientationsForWindow:(UIWindow*)window
{
return UIInterfaceOrientationMaskLandscape;
}
Look at this question and answer once.
I have drawn a box. The first animation makes the box move horizontally and the second one moves the box vertically. But when the second animation is executed the box first comes back to its original position and then animates vertically. What I want is that the box shouldn't come back to its original position and where the first animation ends, the second animation must execute exactly from that position. How can I achieve this? What am I doing wrong?
JS Fiddle Code
window.onload = function (){
var paper = Raphael(0,0,800,400);
var hi = paper.rect(10,10,100,30);
var move1 = Raphael.animation({
transform:'t100,0'
},1000);
var move2 = Raphael.animation({
transform:'t0,100'
},1000);
hi.animate(move1);
hi.animate(move2.delay(1000));
}
Hey here's the updated working fiddle
The reason being as you may know small t transforms relative to the current position of the rectangle. By current position it means the x and y attributes of the element, the rectangle in our case.
But the first line in Element.transform says
translation doesn’t change x or y of the rectangle
Which means after you perform 't100,0' the x & y attributes of the rectangle is still the initial 10,10 Hence the second animation is executed with respect to 10, 10
Finally, for the result you are expecting, you need to be able to change x & y attributes which can be done as shown in the fiddle....Hope this helps !
I'd like to draw a line chart with gRaphael, like the one in the lower right corner: http://g.raphaeljs.com/linechart.html
Now I'd like to change the color of the axis, but I could not find any example how to do that. Here are some examples of how to manipulate the chart, but not how to change the axis color.
Does anyone of you know how to do that?
Thanks in advance,
enne
In part from here, the following Javascript will change the fill color for your axes:
$.each(chart.axis[0].text.items, function(i, label) {
label.attr({'fill': '#D6D6D6'});
});
$.each(chart.axis[1].text.items, function(i, label) {
label.attr({'fill': '#D6D6D6'});
});
Enjoy!
After a long time of research I couldn't find a possibility to change the axis-colour. I decided to generate my own diagram with rapahel, which is easier than I thought.
Fortunately, the documentation of raphael is good enough to create a diagram in an adequate period of time.