8995

Ios drawing lines animated

I have a view in which I have multiple horizontal lines (like a horzontal dial). I want to animate the horizontal movement. It should look like this

EDIT:

<img src="https://i.stack.imgur.com/kg8RV.png" alt="Horizontal Animation">

<img src="https://i.stack.imgur.com/vftx4.png" alt="enter image description here">

<img src="https://i.stack.imgur.com/fjOF4.png" alt="enter image description here">

How can I do this? As far as I understood I can't use CoreAnimation. Furthermore I wan't to be able to simulate different kinds of speed. How would the updatemethod work? Do I change the draw time, or distance?

I know I could solve this with a scrollview, but I would prefer not to use it.

Thanks!

Answer1:

If I've understood what you are trying to do, then I see no reason why you shouldn't be able to do that using Core Animation.

If the pattern you are moving is as simple as that then you can use a line dash pattern on a CAShapeLayer to draw the pattern. I created my layer so that it gets the line width from the height of the bounds and the shape layer's path gets its start and end points from the bounds of the layer:

CAShapeLayer *lineLayer = [CAShapeLayer layer]; lineLayer.bounds = CGRectMake(0, 0, 200, 60); lineLayer.position = self.view.center; lineLayer.strokeColor = [UIColor blackColor].CGColor; lineLayer.lineDashPattern = @[@5, @2, @2, @2, @2, @2, @2, @2, @2, @2]; lineLayer.lineWidth = CGRectGetHeight(lineLayer.bounds); UIBezierPath *linePath = [UIBezierPath bezierPath]; [linePath moveToPoint:CGPointMake(0, CGRectGetMidY(lineLayer.bounds))]; [linePath addLineToPoint:CGPointMake(CGRectGetMaxX(lineLayer.bounds), CGRectGetMidY(lineLayer.bounds))]; lineLayer.path = linePath.CGPath; [self.view.layer addSublayer:lineLayer];

That will produce the static drawing of the pattern. The line dash pattern in the code is the length of the alternating segments of where the line is shown and where it is not.

<img src="https://i.stack.imgur.com/0Usti.png" alt="enter image description here">

With the path drawn, I did the animation by altering the "phase" of the line dashes (shifting them in one direction or the other). To make it seem like the pattern is smoothly and continuously moving I created a linear, repeating animation that shifts the pattern by its full length:

NSNumber *totalDashLenght = [lineLayer.lineDashPattern valueForKeyPath:@"@sum.self"]; // KVC is awesome :) CABasicAnimation *animatePhase = [CABasicAnimation animationWithKeyPath:@"lineDashPhase"]; animatePhase.byValue = totalDashLenght; // using byValue means that even if the layer has a shifted phase, it will shift on top of that. animatePhase.duration = 3.0; animatePhase.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]; animatePhase.repeatCount = INFINITY; [lineLayer addAnimation:animatePhase forKey:@"marching ants"];

The animated line looks like this:

<img src="https://i.stack.imgur.com/xE1e5.gif" alt="enter image description here">

If you want different lines to animate at different speeds you change the duration of the animation. This value represents the time it takes to animate the shifting one full phase.

Recommend

  • UIBezierPath moved half aside
  • Create line extensions for given line created by user
  • sed Removing whitespace around certain character
  • C# combobox with lines
  • JsonConvert.DeserializeObject, Index was outside the bounds of the array
  • How to correctly deal with escaped Unicode Characters in R's library RJSONIO when reading json
  • Drag and reorder - UICollectionview with sections
  • Cythonized function unexpectedly slow
  • How to reshape a 3D numpy array?
  • How to change placeholder text in an autocomplete activity of android google place?
  • Examples of how to a STS in .Net 4.5 using WCF
  • there is no graph with tensorboard
  • CSS bleed-through with cfinput type=“datefield”
  • R Split data.frame using a column that represents and on/off switch
  • How to detect interior vertices in groups of 2d polygons? (E.g. ZIP Codes to determine a territory)
  • Can I programmatically choose the Android layout folder?
  • D3 get axis values on zoom event
  • Not able to aggregate on nested fields in elasticsearch
  • Unable to install Git-core+svn by MacPorts
  • Django simple Captcha “No module named fields” error
  • Could not find rake using whenever rails
  • OpenGL 3.3 on Mac OSX El Capitan with LWJGL
  • Using $this when not in object context
  • How do I fake an specific browser client when using Java's Net library?
  • How reduce the height of an mschart by breaking up the y-axis
  • How to convert from System.Drawing.Color to Excel.ColorFormat in C#? Change comment color
  • How to set/get protobuf's extension field in Go?
  • script to move all files from one location to another location
  • ILMerge & Keep Assembly Name
  • Perl system calls when running as another user using sudo
  • 'TypeError' while using NSGA2 to solve Multi-objective prob. from pyopt-sparse in OpenMDAO
  • Symfony2: How to get request parameter
  • How to show dropdown in excel using jrxml (jasper api)?
  • Run Powershell script from inside other Powershell script with dynamic redirection to file
  • Traverse Array and Display in markup
  • python regex in pyparsing
  • Can Visual Studio XAML designer handle font family names with spaces as a resource?
  • Android Google Maps API OnLocationChanged only called once
  • MATLAB: Piecewise function in curve fitting toolbox using fittype
  • How can I use threading to 'tick' a timer to be accessed by other threads?