0
votes

I'm attempting to replicate the "worm" that is sometimes displayed on political debates to represent the audiences opinion on how well a candidate answered a question. It's basically a line that animates along the x axis to represent time, up and down the y axis to represent opinion.

I see that I can do this animation by

  1. Creating a UIBezierPath and use its moveToPoint/addLineToPoint methods with a predefined set of coordinates.
  2. Create a CAShapeLayer and set its path property to the above UIBezierPath.
  3. Create a CABasicAnimation and add it to the CAShapeLayer.

This is all fine but I need for the line to be affected in real time by user input (tapping a button to move the line up or down), meaning that in step one above I cannot have a set of pre-defined coordinates. The line should move horizontally unless it receives input from the user to make it also move vertically.

So my question is how would I go about this? Can I still somehow use the method I described in the bullet points above with some modification or do I have to use a different means?

Many thanks for any advice!

[edit]

I just had a thought, this may work but be a little inefficient and I'm not sure if the created path would be very short i.e. not the full path from the starting point instead just the currently drawn part of the path?! What if I did the following:

  • create two variables, lastPoint and currentPoint;
  • repetitively call a draw method that does the following
    1. [path moveToPoint: lastPoint];
    2. [path addLineToPoint: currentPoint];
    3. lastPoint = currentPoint;
    4. currentPoint = [self calculateNewPointFromUserInput];
    5. repeat;
1

1 Answers

0
votes

Two points will be very short for you, you can take an array of user's touch events and then draw last 10-15 points from the array. I think this will serve your purpose.