1

I want to make an animation with a moving line, similar to a dog waging his tail.

I'm not sure how to begin. I've used Core Animation's CAShapeLayer for progress bars before but don't know if it would work for this. I also used PaintCode in the past to help for custom paths, for example to create a custom UIBezierPath for an object to animate on. But also not sure if PaintCode would help with this.

Any ideas?

JEL
  • 1,540
  • 4
  • 23
  • 51
  • The octopus is an ImageView? – Twitter khuong291 Apr 22 '16 at 15:53
  • @khuong291 Yes, right now it is an `imageView`. I could make it 2 `imageView`'s, for example, have the body on its own, and the tail as a separate `imageView`. Also, using PaintCode, this could be drawn using Core Graphics. Not sure what is needed though to make this animation. Any suggestions to make this work? – JEL Apr 22 '16 at 15:55
  • you could design the images in photoshop and use the image view to animate those images in sequence. – Teja Nandamuri Apr 22 '16 at 16:00
  • If you are uising paint code use variables to pass the values to move the tail. – Teja Nandamuri Apr 22 '16 at 16:01
  • 1
    I recomend you to use gif image. Just upload this gif image. – Twitter khuong291 Apr 22 '16 at 16:03
  • @TejaNandamuri I don't know how to do this in PaintCode : ( I just mentioned PaintCode in case someone knew how. – JEL Apr 22 '16 at 16:13
  • @khuong291 I know I could use a gif, but I really want to get better at making animations with code. Do you have any thoughts on how to do this? – JEL Apr 22 '16 at 16:14
  • 1
    I don't know, because working with code for this case is so complicate :D – Twitter khuong291 Apr 22 '16 at 16:18
  • By using gif you doesnt see any performance difference. Using code I say it's very complicate as you have to take care of several control points of a bezier path. U could try this in paintcode by using variables and connecting these variables to the bezier path control points, and by changing these variables, you can mkae the bezier path move. – Teja Nandamuri Apr 22 '16 at 16:20
  • @khuong291 Ok I see, thank you! – JEL Apr 22 '16 at 16:23
  • @TejaNandamuri I understand your point, but the reason I want to create this is for a learning experience. My goal is to get better at coding animations. I will try out PaintCode and see how it works based on what you said. – JEL Apr 22 '16 at 16:25

1 Answers1

0

This wouldn't be that hard. Yes, using a CAShapeLayer animation would be the way to go.

I would make the non-changing part of the image into a bitmap, and then draw your shape layer animation on top.

The trick with shape layer animation is that the shape you use needs to have the same number of control points for all the parts of your animation.

In the case of your tail animation you should be able to map it out as a set of quadratic bezier curves. You could probably draw the tail as a single thick path with a rounded end cap. (kCGLineCapRound). You'd make the starting curve a quadratic bezier curve with the starting point down at the beginning of the straight part of the tail, the next control point slightly to the right and below the curved tip, the next control point above and to the left of the first control point but still below and to the right of the tip, and the last control point at the tip.

The ending curve would have the first control point at the same place on the base of the tail, the second control point at about the top of the curve and to the left, the next control point above the curve and about 2/3 of the way between the base point and the tip, and the last point at the tip of the tail.

You might want to play with the path tool in Adobe Photoshop (or GIMP) and use it to create the starting and ending tail curve shapes using a single quadratic Bezier curve, then write down the control point positions that you use and enter them into your code.

You'd create a CABasicAnimation of the CAShapeLayer where you set the fromValue to the starting CGPath and the toValue to the ending CGPath. Just make sure that the starting and ending paths have the same number of control point.

I have a project called RandomBlobs (link) on Github that shows how to animate a curve using CGPaths and CABasicAnimations, but it is written in Objective-C, and instead of using quadratic bezier curves, it creates another kind of a curve called a Catmull-Rom spline. quadratic bezier curves are actually much simpler to set up than Catcall-Rom splines however, and the idea behind animating changes to a CAShapeLayer using CABasicAnimation should be fairly easy to translate from Objective-C to Swift if you've worked with CAShapelayers before. You could also use a series of Catmull-Rom splines to get the tail animation you're after. The advantage of Catmull-Rom splines is that all the control points are on the curve.

Duncan C
  • 128,072
  • 22
  • 173
  • 272