iOS Calculation control points for bezier path curve animation given two points

Question

I'm trying to animate the movement of a view using CGPathAddCurveToPoint and generating a bezier path but I'm having trouble figuring out the control points between the origin and the destionation. Any of you knows how can I can calculate dynamically the control points given the origin and destionation of the UIView?

For example (iPad), I'm trying to animate a bird (UIView) flying in from point (455,482) to (31,100). I would like to be a curve movement of bird flying instead of lineal movement. I'll really appreciate your help.

thank you for answers but still wonder how can I calculate the control points.

Answer 1

Can you clarify a little about the effect you're looking for? The choice of control points is not only a function of the starting and end coordinates, but also is function of the effect you're trying to achieve. In the past, animating the motion of an imageview where I wanted the illusion of "picking up and dropping" the view, I've done slight perpendicular offset on the control points both in the same direction, which yields a slightly more dynamic motion than a purely linear motion, but it depends entirely upon what you're trying to do. I've also done this with animating the enlarging and then returning to normal of the transform scale at the same time, to further enrich the illusion of picking up and dropping the animated view.

In your revised answer, you say that you want to show the flight of a bird. Now, that's a fascinating problem. Is the view of the bird from the side, e.g. taking off from one branch to another, in which case, your control points probably would both point straight up a little to show the bird taking off and landing. Or if you're trying to simulate the flapping motion, you might also have interim upward control points, one for each flap. Or is it looking at the bird from below or above, in which case a slight "s" shaped flight pattern might be enough, so you would only need have one control pointing 45 degrees from the take off location pointing along the flight path, and the other control point at the end, pointing 45 degrees back towards the start point, but pointing in the other direction. It all depends upon the effect you're looking for given the app's theoretical the relationship between the bird and the viewer in 3d space.

You might need to show a screen snapshot of the scene and the image for the bird (is it from the side, or from above or below). You might also want to draw an example of the flight pattern you're envisaging, and perhaps we can make other, more concrete, suggestions.

Other resources:

By the way, there are some interesting demonstrations of animation that might be helpful. For example this race car animation by Mike Nachbaur was helpful when I did my first animation, showing me how to draw bezier paths, how to rotate the image along the path, too, etc. I know it's not the flight of a bird, but it's still illustrative. I'm sure there are other great examples online, too. Anyway, these sorts of tutorials might help you bridge the gap between your vision of your app and what the bezier paths might look like.

Answer 2

//Draw points
UIBezierPath *aPath = [UIBezierPath bezierPath];
[aPath setLineWidth: LINE_SIZE];
for (int i=0; i<[results count]; i++) {
    CGPoint endPt = [[results objectAtIndex: i] CGPointValue];
    if (i == 0) {
        [aPath moveToPoint:endPt];
    } else {
        //Previous (start) point
        CGPoint startPt =[[results objectAtIndex: i-1] CGPointValue];

        //Default control points
        CGPoint cPt1, cPt2;
        if(ABS(startPt.x - endPt.x) > ABS(startPt.y - endPt.y)) {
            cPt1 = (CGPoint){(startPt.x + endPt.x) / 2, startPt.y};
            cPt2 = (CGPoint){cPt1.x, endPt.y};
        } else {
            cPt1 = (CGPoint){startPt.x, (startPt.y + endPt.y) / 2};
            cPt2 = (CGPoint){endPt.x, cPt1.y};
        }

        //Add curve to end point
        [aPath addCurveToPoint: endPt controlPoint1: cPt1 controlPoint2: cPt2];
    }
}
[aPath stroke];