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();
Related
I'm making my first game with cocos2d-js. I've made a nice title png for my game but when I load it in cocos2-js it has anti-aliasing that ruins the effect. I read on the internet that using setAliasTexParameters can turn off the anti aliasing. I can't get it to work though, I've tried many different ways. I'm sure it's a basic problem with my syntax but I can't work it out and it's driving me insane. Chrome gives me the error Uncaught TypeError: Cannot read property 'setAliasTexParameters' of null.
Here's the layer:
var game = cc.Layer.extend({
init:function() {
this._super();
backgroundLayer = cc.Layer.create();
this.addChild(backgroundLayer);
var title = new cc.Sprite.create("assets/ui/title.png");
backgroundLayer.addChild(title,0);
title.texture.setAliasTexParameters();
title.setPosition(160,240);
}
});
EDIT: I have realised the sprites are being made about 30% too big whether I use setAliasTexParameters or not, so pixel perfect anti aliasing ins't possible. I can't work out why this is happening.
EDIT2: If I remove the cc.ResolutionPolicy in my main js file the sprite is rendered perfectly without antialiasing, but my canvas is half the size it should be! I think this is a resolutionPolicy problem rather than a setAliasTexParameters problem.
I haven't been able to find a resolutionpolicy from the documentation that won't resize my sprite.
I would like to add a small animation to my markers when I put them on the map.
Just in the moment when I call:
Marker marker = mMap.addMarker(...);
Something like a small bounce or similar during half second or so.
I don't find the way to get the Marker's view.
If I find the way to get the view, I guess it is easy to apply an animation using View.setAnimation() and res/animator/marker_animation.xml
Any help or suggestions?
There is this good video that shows markers animations: https://www.youtube.com/watch?v=WKfZsCKSXVQ
You can't animate the "Marker View" itself because it not accessible
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'm creating a lot of little surfaces that get added to a layout ( int this case a header footer layout), animated, then need to go away. However, I'm not sure how to remove the surfaces once added?
Kraig is right about using a RenderController when possible, but I would not suggest it for your case. RenderController works well with large layouts and not so much for small particles and such. RenderController only shows one view at a time.
I have asked about this on the IRC channel and it turns out the way I do it, feels really hacky, but is still the recommended most straight forward approach. The idea is to just redefine the render function to return null.
// surface to remove
surface.render = function(){ return null; }
That's it!
Just make sure you remove all references in your code as well!
I often do it from an object..
delete littleSurfaces['little-surface-key']
FWIW The more advanced approach is to actually define a view that controls specifically the surfaces that get rendered. You do this by defining the render function on a custom view that returns what is known as a renderSpec. A renderSpec is a list of hashes that define the surfaces that will be rendered. The example everyone points to is the Flipper class. Take a look at Flippers render function..
https://github.com/Famous/views/blob/master/Flipper.js
Good Luck!
You can add/remove surfaces using a RenderController object. You can also apply an optional transition when things are shown and hidden.
The DOM may lie to you sometimes, as Famo.us repurposes and recycles DOM Elements for efficiency.
https://famo.us/docs/api/latest/views/RenderController
I'm thinking like text fade in and slide effects. I imagine implementing this would be rather trivial and plan to do so myself, but wanted to make sure I'm not reinventing the wheel first. If it doesn't exist then I'm looking on advice on the best way to implement these.
The 2 things I'm looking to do are fade in text and have the window slide down when resizing, eg if I show a label that was previously hidden it would slide down ~20 pixels instead of just instantly growing 20 pixels larger.
The way I was thinking to implement the first one is, assuming it's possible, get the window/bg color and start it at that and transition it to the font color, if there's alpha channel support that would be even simpler to do (I'm not sure if there is since I haven't messed with colors yet). To do this I'd just choose a transition time period and process it with a for loop or something once the color increments have been determined.
Similarly to do the window transitions I would get the height of the change (not sure how to do that yet), determine the increments of change based on the transition time and in a for loop gradually adjust the size. Sorry if I didn't explain those very clear, I'm trying to get this in before I go to work and figure most of you will know what I'm trying to explain. As always thanks for the help!
For window resize transition effect, QPropertyAnimation may be the easiest to do since height is a widget property. Fading text might work the same way if the foreground color can be coerced into a property.