Using SkiaSharp samples, how can I turn off the infinite loop in Expanding Circles example?

UnreachableCodeUnreachableCode USMember ✭✭✭
edited June 19 in Xamarin.Forms

Xamarin Forms has a great code sample for an expanding circle. It looks like this:

I'm now trying to make it so the effect stops but continues drawing the final circles before disappearing completely. A sort of ripple effect, like a stone dropped in a pool.

I've read through the code. I understand that the for loop draws 5 circles over and over. I also understand that the timer is used to repeat the drawing pattern. But animation isn't really my strong suit, so I'm not sure how I can suddenly stop all new draws. My impression is that this might take quite a big refactor given the 2 parts I've just described.

I somehow need a boolean that when set to false, causes the last few animations to finish and then stop drawing any new circles.

Using the sample code's touch effects implementation, I am able to stop the animation after a 2 second period. I do this like so:

    void OnTouchEffectAction(object sender, TouchActionEventArgs args)
        switch (args.Type)
            case TouchActionType.Pressed:
                tappedPoint = ConvertToPixel(args.Location);

                Device.StartTimer(TimeSpan.FromMilliseconds(2000), () =>
                    pageIsActive = false;
                    return pageIsActive;

So after two seconds, the animation stops. But this leaves the circles stuck in place, and I have no idea how to make them continue to ripple like they have been in the loop.

Does anyone know how I might go about this?


  • LucasZhangLucasZhang Member, Xamarin Team Xamurai

    Note: the method canvasView.InvalidateSurface(); needs to be called from the main thread.
    So you can let the loop continue by calling the following code . For example ,when you click a button .

    private  void Button_Clicked(object sender, EventArgs e)
         pageIsActive = true;
Sign In or Register to comment.