0

I am trying to make a demo, which is

there will be a vertical line on the left side of the screen (the screen has a default color) and the line will move from left to right. And the line will act as a paint brush which pain the screen to other color, so how to implement this ? Thanks in advance.

Nan
  • 496
  • 3
  • 21

1 Answers1

1

You could do this with colored views and UIView animation.

Set up a view with a background color that will fill the screen. Set this view's background color to "the other color". Let's call this the "fill view". Pin it to the left side of your content view, and give it a right edge constraint that's also pinned to the left edge of the content view. Add an outlet to the left edge constraint. Let's call that constraint outlet "rightEdgeConstraint.

Create a line view (call it the "line view") with a fixed width constraint and a different background color. Add a left edge constraint to the line view attaching it to the right edge of the fill view.

Now in your code, animate the right edge constraint:

UIView.animateWithDuration(1.0) {
  //Make the fill view as wide as the content view.
  rightEdgeConstraint.constant = view.width
  view.layoutIfNeeded()
}

If you want the user to be able to drag the line left to right then you'd need to attach a pan gesture recognizer to the line view and use the change in X position to change the value of the rightEdgeConstraint.constant (and then call layoutIfNeeded() as above.)

Duncan C
  • 128,072
  • 22
  • 173
  • 272
  • That is is very helpful and If I want to make this animation also works in a analog countdown timer, for example, if I want the hour hand paint the area which it travels – Nan May 22 '17 at 17:25
  • Animating a circular clock hand is a little more complicated however. – Duncan C May 22 '17 at 17:28
  • yeah I can see, that is actually what I am working on at the moment, any tutorial or source code you suggest? Thanks in advance – Nan May 22 '17 at 17:29
  • I've done similar things, but animating a pie chart where both the "slice" and the "rest of the pie" are filled with colors poses some challenges. Arcs don't animate correctly if the length of the arc changes, because path animation only works if the total number of control points in the path stays constant, and under the covers arcs of different angles actually have different numbers of control points. This would take some work to get right. – Duncan C May 22 '17 at 17:49
  • Yeah, I have been researching sin and cos mathematics stuff last few days, I eventually work out how to make the hour hand rotate, my approach is I divide 360 into 60 pieces and every piece is 6, so I call the method every second and the hour hand rotate 6 degrees every minute, now I just want to mark the hour hand travelled path. Which is a bloody headache :( – Nan May 22 '17 at 17:53
  • 1
    For filling the circle as you go around, you could use an approach like the "clock wipe" animation I describe in this thread: https://stackoverflow.com/questions/22409212/how-do-you-achieve-a-clock-wipe-radial-wipe-effect-in-ios – Duncan C May 22 '17 at 18:59
  • cheers it helps a lot – Nan May 22 '17 at 23:43