CODEWITHSUNDEEP
iosswiftios8drawlines
J_Reinaldo
J_Reinaldo

Reputation: 35

iOS 8 + Swift - Looking to define multiple lanes, but draw them based on events

I have 3 buttons in one of my app storyboards. Based on the button pressed by the user, I would like to have a different line drawn. I'm new to iOS development and I was looking at Apple's Developer Library for details on how to create a context, path and line definition, but I was not able to figure out the implementation to define the contexts and paths for multiple lines.

Thanks in advance for the help.

Edit - 2015-02-24: To clarify the question and adding a video explaining how I do this on another platform.

Because the question might be difficult to understand, and because I have more experience with Windows development, I created a Windows Phone app showing what I'd like to do on iOS+Swift.

Here is how I do this in XAML + C# for Windows Universal Apps (Runtime)

First, I define the line in MainPage.xaml (The Tranform tags are added later):

        <Line x:Name="line1" Stroke="Black" StrokeThickness="6" Y1="60" Y2="60" RenderTransformOrigin="0.5,0.5" Margin="1,0,-1,0" X1="30" X2="30">
        <Line.RenderTransform>
            <CompositeTransform/>
        </Line.RenderTransform>
    </Line>

Then I define the storyboard animation within the Page.Resources section in the XAML file:

        <Storyboard x:Name="anLine2">
        <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="line1" d:IsOptimized="True"/>
        <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="(Line.X2)" Storyboard.TargetName="line2">
            <EasingDoubleKeyFrame KeyTime="0" Value="30"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.30" Value="380"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>

I define the button:

<Button x:Name="btnL1" Content="Line 1" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="10,0,0,0" Click="btnL1_Click"/>

And finally I trigger the animation <> when the button is pressed:

        private void btnL1_Click(object sender, RoutedEventArgs e)
    {
        anLine1.Begin();
    }

I defined 3 lines and 3 buttons. The result is seen in this video (It looks a bit choppy in the video, but it is because of the screen capture software. The execution in the emulator and test devices is very smooth): http://youtu.be/Y4i2IUehl7U

Now, what I want is being able to do exactly this, but on iOS using Swift. I hope this helps clarifying the question.

Thanks in advance!

Upvotes: 0

Views: 83

Answers (1)

Kendall Helmstetter Gelner
Kendall Helmstetter Gelner

Reputation: 75058

I think what you want is to animate a line being drawn - if so, see this questions:

how to draw line with animation?

In particular one of the answers has this link:

http://tumbljack.com/post/179975074/complex-interpolation-with-cashapelayer-free

Basically, use a CAShapeLayer and animate from an empty path to a path with your destination.

Upvotes: 1

Related Questions