im trying to tween something like this:
Two consecutive animations parallel to another animation
I tried to achieve this result in that way, but the last animation does not play, the object immediately returns to its original size, as it should, but without animation. Can anyone suggest how to fix this?
var tween = get_tree().create_tween()
tween.set_parallel()
tween.tween_property($Sprite, "global_position", Vector2(1,1), 1)
tween.tween_property($Sprite, "scale", Vector2(1.5,1.5), 0.5)
tween.tween_property($Sprite, "scale", Vector2(1,1), 0.5).set_delay(0.5)
tween.play()
Thanks in advance for your help
tried to type tween.chain().tween_property($Sprite, "scale", Vector2(1,1), 0.5) but it doesn't seem to work
The issue here is that your tweens all operate from their initial state. This is a bit confusing because the documentation refers to this as their "current" state - but it means current relative to the state when the tween was created. So, with the scaling tweens:
The first one scales from Vector2(1,1) to Vector2(1.5, 1.5)
The second one scales from Vector2(1,1) to Vector2(1,1)
This is because the scale when the tween is started is Vector2(1,1) - it doesn't scale from the size that it has been modified to but from the size it was initially. I hope that makes sense.
To fix this, you need to tell it what size to scale from using the .from() function. See below:
var tween = get_tree().create_tween()
tween.set_parallel()
tween.tween_property($Sprite, "global_position", Vector2(1,1), 1)
tween.tween_property($Sprite, "scale", Vector2(1.5,1.5), 0.5)
tween.tween_property($Sprite, "scale", Vector2(1,1), 0.5).set_delay(0.5).from(Vector2(1.5, 1.5))
tween.play()
Related
I want to start a animation on an element while a previous animation is still active. However, calling animate() on the element queues the new animation at the end of the current animation.
For example, consider an animation where an element is being moved to a new position. Now, I also want to make it fade out when it reaches a certain position. The following queues the “once” animation at the end of the move, rather than at 80%.
rect.animate(1000).move(100, 100)
.once(0.8, function(pos, eased) {
rect.animate(200).opacity(0);
});
How do I make the element start fading out when it reaches 80% of the move? The API seems to be designed for chaining animations rather simultaneous overlapping animations.
What you are trying to do is a bit more complicated. Unforrtunately its not possible to "hack" into the current animation and add a new animation on the fly.
However what you can do is adding a new property which should be animated:
var fx = rect.animate(1000).move(100, 100)
.once(0.8, function(pos, eased) {
fx.opacity(0);
});
As you will notice that has its own problems because the oopacity immediately jumps to 80%. So this is not an approach which works for you.
Next try: Use the during method:
var morh = SVG.morph(
var fx = rect.animate(1000).move(100, 100)
.once(0.8, function(pos, eased) {
fx.during(function(pos, morphFn, easedPos) {
pos = (pos - 0.8) / 0.2
this.target().opacity(pos)
}
});
We just calculate the opacity ourselves
I am new to D3 and this is my first question to stackoverflow.
I am trying to change the color of the water in this example that contains transitions:
http://bl.ocks.org/mbostock/4183330
I am able to change the color in this example, which is static: http://bl.ocks.org/mbostock/3757125
I found this thread: How can I color ocean with topojson in d3 when I have coordinate info for land? However, this changes the area outside of the globe as well.
This section of the code appears to be the styling, but I can't figure what to add to change the water color.
c.fillStyle = "#bbb", c.beginPath(), path(land), c.fill();
c.fillStyle = "#f00", c.beginPath(), path(countries[i]), c.fill();
c.strokeStyle = "#fff", c.lineWidth = .5, c.beginPath(), path(borders), c.stroke();
c.strokeStyle = "#000", c.lineWidth = 2, c.beginPath(), path(globe), c.stroke();
Also, seeing the line of code below, I searched online for a reference list of possible topojson features and/or objects that might indicate water, and maybe I could figure out how to style that, but couldn't find one:
land = topojson.feature(world, world.objects.land),
I'm wondering if maybe this has something to do with canvas (which I don't really grasp).
Hopefully, I'm overlooking something obvious and noob-like.
Thanks much!
Ha! Of course:
Modify this line:
c.strokeStyle = "#ccc", c.lineWidth = .5 * ratio, c.beginPath(), path(globe), c.stroke();
To this:
c.fillStyle = "#000", c.beginPath(), path(globe), c.fill();
I feel silly, but I guess sometimes it takes writing it all out for the brain cells to click. Thanks!
I have found a tutorial on parallax scrolling in spritekit using objective-C though I have been trying to port it to swift without much success, very little in fact.
Parallax Scrolling
Does anyone have any other tutorials or methods of doing parallax scrolling in swift.
This is a SUPER simple way of starting a parallax background. WITH SKACTIONS! I am hoping it helps you understand the basics before moving to a harder but more effective way of coding this.
So I'll start with the code that get a background moving and then you try duplicating the code for the foreground or objects you want to put in your scene.
//declare ground picture. If Your putting this image over the top of another image (use a png file).
var groundImage = SKTexture(imageNamed: "background.jpg")
//make your SKActions that will move the image across the screen. this one goes from right to left.
var moveBackground = SKAction.moveByX(-groundImage.size().width, y: 0, duration: NSTimeInterval(0.01 * groundImage.size().width))
//This resets the image to begin again on the right side.
var resetBackGround = SKAction.moveByX(groundImage.size().width, y: 0, duration: 0.0)
//this moves the image run forever and put the action in the correct sequence.
var moveBackgoundForever = SKAction.repeatActionForever(SKAction.sequence([moveBackground, resetBackGround]))
//then run a for loop to make the images line up end to end.
for var i:CGFloat = 0; i<2 + self.frame.size.width / (groundImage.size().width); ++i {
var sprite = SKSpriteNode(texture: groundImage)
sprite.position = CGPointMake(i * sprite.size.width, sprite.size.height / 2)
sprite.runAction(moveBackgoundForever)
self.addChild(sprite)
}
}
//once this is done repeat for a forground or other items but them run at a different speed.
/*make sure your pictures line up visually end to end. Just duplicating this code will NOT work as you will see but it is a starting point. hint. if your using items like simple obstructions then using actions to spawns a function that creates that obstruction maybe a good way to go too. If there are more then two separate parallax objects then using an array for those objects would help performance. There are many ways to handle this so my point is simple: If you can't port it from ObjectiveC then rethink it in Swift. Good luck!
I am testing SVG performance using RaphaelJS library.
My code works, can be found here: JSFiddle
When you type in textbox "1" and press "add", a rectangle will be generated on screen and 4 animations will loop on it- moving right, down, left, up (also rotating, scaling and changing colour).
Performance seems to be ok. But add another element on stage and the performance gets knocked down to minimum in 3-4 seconds. Checked in Chrome timeline, the thing that is getting stacked up is "Animation Frame Fired - > Install Timer".
Perhaps I am doing loop incorrectly? Altough next animation starts when the previous ends, through callback function. Or is it Raphael itself? Should I try doing this with SVG and SMIL? (Raphael uses VML)
Any ideas?
------------------------------------UPDATE--------------------------------------
With RaphaelJS I did bad animation loop hooks, see answer below.
But another problem that does occur - add 1 element 10 times and you can see how animations get distorted, not finishing their full cycle, or add 10 elements 1 time and after few seconds you can see delayed animations on some of the elements.
I made SMIL version JSFiddle (no Raphael here), animations do not lag, delay, but they get syncronized. Can anyone explain why? And how to make those animations NOT sync, but unique?
I think the problem is you are recursively calling animations on a set.
So at the end of each animation, each element in the set calls an animation for the set again, so it spirals and grinds to a halt. You can get around this, by using 'this' instead of the set 'rectangles'.
//define 4 animations
var move_up = Raphael.animation({fill: "green", transform: "t0,0r360s1,1"}, 400, function(){ this.attr({"transform" : "t0,0"}); this.animate(move_right); });
var move_left = Raphael.animation({fill: "yellow", transform: "t0,100r270s0.5,0.5"}, 400, function(){ this.animate(move_up); });
var move_down = Raphael.animation({fill: "red", transform: "t100,100r180s1,1"}, 400, function(){ this.animate(move_left); });
var move_right = Raphael.animation({fill: "blue", transform: "t100,0r90s1.5,1.5"}, 400, function(){this.animate(move_down); });
jsfiddle
I'm working with CreateJS and wondered if anyone here has examples of controlling tweens using the Ticker object. I'm trying to get a sprite to follow a path defined by waypoints but i don't want to control each tween (in between waypoints) by time. I want to have smooth movement between each waypoint controlled by the Ticker object. I tried this code which doesn't seem to work at all.
var index = 0;
function move(){
index++;
if (index < path.length) {
createjs.Tween.get(person)
.to({x:gridSize * path[index][0] - pathOffset,y:gridSize * path[index][1] - pathOffset})
.call(move);
}
}
move();
createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener("tick", function(event){
createjs.Tween.tick(1);
stage.update();
});
This code seems to only jump between waypoints and not tween at all. Any ideas what i may be doing wrong or any code/tutorials which might help?
You need to add a duration(in milliseconds) to your tween, otherwise it would default to 0, this will cause the "jump", e.g.: 500 for half a second
instead of: .to({x:..., y:...})
use: .to({x:..., y:...},500)
And a second thing: You don't NEED to call createjs.Tween.tick(1); this is usually called automatically by the Tween-class.
Here is some help and some small examples: http://www.createjs.com/Docs/TweenJS/classes/Tween.html
Advanced Examples:
https://github.com/CreateJS/TweenJS/tree/master/examples