If i have 2 lines on a page
how would i animate the first line to reach the second line’s position?
Share
Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
If i have 2 lines on a page
how would i animate the first line to reach the second line’s position?
Add a ‘counter’ variable that will be the percentage of the distance the line has travelled between the two locations. Initialize it to zero because it starts at the beginning position. Add a timer and each time it ticks you increment the ‘counter’ and invalidate the client area so that a repaint occurs. Once the ‘counter’ hits 100 and so it 100% of the way to the target you disable the timer as no longer being needed.
In the paint routine you already know the start position and the end position so just draw the line at the ‘counter’ percentage between the two. So given you know startX and you know endX your painted version is startX + ((endX – startX) / 100 * counter). Do this for each of the top, left, right and bottom of the line and you are done.