iOS5 like flipping notifiation - notifications

I want to use the same effect Apple uses in iOS5 for showing new notifications (this flip-in effect). But I don't know how to start or what to google for. Could somebody please give me a hint?
Thanks!

Create two CALayers. One aligned normally along the x and y axis, the other rotated around the x axis so that it "lies flat", i.e. its surface points down along the y axis.
Then rotate both layers by 90 degrees along the x axis. At the end of the rotation, the first layer will now "lie flat", pointing upward along the y axis and the second layer will be aligned normally along the x and y axes.

I know you asked more than a year ago, but if it's useful to you, I would checkout the new and awesome Animate.css css3 transitions! I would take the FlipInX effect, which looks exactly like in iOS5!

Related

Y axis depth sorting in SDL2

I've been using SDL for my game but rendering order as always been a problem. When you draw something in SDL, it gets drawn over what was drawn before it. Which means, if I draw a character at 10 in the Y coordinate, and I draw a character at 5 in the Y coordinate, the one at 5 appears above the one at 10, even though it should be the other way around.
To demonstrate the problem.
This is what it should be like. The one with lower Y axis value should appear behind no matter which one I draw first.
In 3D, things don't need to be rendered in a specific order, things are drawn behind other things according to the Z buffer. I want SDL to behave the same way, but on the Y axis. How?

Core Plot Charts Axis Position

I'm using core plot 1.0. Currently I'm making the X axis draw say 20 points above the bottom of the screen (so the labels can show up) by defining the Y range a little bit below 0.
Now I was asked that the origin point should be 0.0 and there should not be anything below 0 in both axes, so I'm now looking at the core plot documentation and scratching my head with the following question:
What property do I need to set to move the axes at the position I'd like to and also keep on showing the point labels and axis titles?
Thanks a lot!
I've found it so I leave it here for if somebody else needs help with this.
It is kind of tricky, you need to adjust the xRange and yRange on the plot space so it's big enough to draw the labels, the ticks and the titles and then adjust the visibleRange property on each axis. At this point you get the amount of axis you want and still displaying the information you need.
If someone knows a better way please share :)

Three.js camera rotation is weird

I've just started with Three.js. Like really just now.
After playing with it for an hour or so and building a tool that helps me understand how the different elements work together (Camera, Light, Objects), I found something strange.
The tool: http://hotblocks.nl/tests/three/cubes.html
This is the current default set up:
the Camera is positioned 210 upwards and
500 backwards and
246 to the right
the Camera is rotated slightly to the left
the light is directly above and shines in all directions
As you can see, the objects are at the very bottom of the viewport. So I want to turn the Camera downward, so I can see more of them.
Try that: turn camera.rotation.x down.
That works, but the angle of rotation is wrong! Instead of the Camera rotating, it's the World rotating around its Z axis.
That's not right, is it?
The Y axis is also wrong. It rotates the World around its Y axis.
Rotating the Camera around its Z axis, works perfectly: the Camera rotates, not the World.
Am I doing it wrong? Or understanding it wrong?
PS Since the Camera rotation is only around its Y axis, the objects' vertical edges should be vertical in the result as well. In the default set up, they are. Rotating the camera around its X axis, shouldn't change that, but it does. Only rotating around its Z axis should change that (and it does). Am I wrong?
PPS I know about Camera.lookAt( THREE.Vector3 target ), but that changes the rotation of the camera, including its Z axis, and that shouldn't be necessary, logically.
Answer received on Github: https://github.com/mrdoob/three.js/issues/1163

Proper rotation with changing x/y coordinates

I'm trying to make a little archer game, and the problem I'm having has to do with 2 pixels in particular, I'll call them _arm and _arrow. When a real archer is pulling back an arrow, he doesn't immediately pull the arrow back as far as his strength allows him, the arrow takes a little bit of time to be pulled back.
The _arm's angle is equal to the vector from a point to where the user touched on the screen. The rotation is perfect, so the _arm is good. The _arrow needs to be on the same line as _arrow, they are 1 pixel wide each so it looks as though the _arrow is exactly on top of the _arm.
I tried to decrement from the x/y coordinates based on a variable that changes with time, and I set the _arrow's location equal to the _arm's location, and tried to make it look like the _arrow was being pulled back. however, if you rotated, the x/y would mess up because it is not proportional on the x and y axis, so basically _arrow will either be slightly above the arm or slightly below it depending on the angle of the vector, based on touch.
How could I used the x/y position of _arm and the vector of touch to make the arrow appear as though it was being pulled back by a small amount, yet keep the arrow on top of the _arm sprite so that it's position would be similar to the arm, but slightly off yet still on top of the _arm pixel at all times. If you need anymore info, just leave a comment.
I'm not sure I've fully understood, but I'll have a go at answering anyway:
To make the arrow move and rotate to the same place as the consider adding the arrow as a child of the arm. You can still render it behind if you like by making its z is less than one: [arm addChild:arrow z:-1]
To then make the arrow move away from the arm as the bow is drawn, you then just set the position of the arrow with respect to the arm.
The problem I do see with this solution however is that this grouping of the sprites may be a little unusual after the arrow leaves the bow. Here you probably don't want the arrow to be a child of the arm as the coordinate systems are no longer related.
Even though they're sure what I "suggested would have solved [the] problem" here is the
Poster's solution
I had to get the x and y coords of the arm based of angle, then I got the sin/cos of a number that was based of the same angle as the arm and subtraced from that.

How to move a Core Plot graph

I have a Core-Plot Graph within a Mac Application. But the inside table is appearing shifted down and to the left of the containing "frame/border" so that neither of the axis' are showing. I cannot figure out how to change this does anyone know what parameters I need to change to fix this?
Update: Sorry I did not realize I could upload an image, I have done so know and will try your suggestions in the mean-time.
Not sure what you mean by "inside table". It would be easier to offer suggestions if you could post a screenshot.
Without seeing what's wrong, here are some common areas to look at:
If you haven't already done so, look at the example apps included with Core Plot for ideas. The Plot Gallery app has many sample plots and the others are useful, too.
You may need to add padding (paddingLeft, paddingBottom, etc.) on the graph and/or plot area frame. Padding the graph pushes everything in away from the edges of the graph. Padding the plot area frame pushes the plot area in so the axes and titles can hang outside the plot area (the area where the plots are drawn).
If you want to keep an axes pinned to a specific place, e.g., the edge of the graph, set up a floating axis. Otherwise make sure the orthogonal coordinate is set (it defaults to 0). For example, the orthogonal coordinate for the x-axis is the y-value where the x-axis crosses the y-axis.