CODEWITHSUNDEEP
c#xamlxamarinxamarin.forms
xamarin
xamarin

Reputation: 61

360 degree image rotating in Xamarin Forms

In Xamarin Forms, I want to rotate an image as 360 degree. This image rotates with animation constantly at run time. Also, this image has 6 versions of different views. Think about like rotating a glass by hand.

I try this one but it is useless:

<Image Source="glass.png" RotateToY="30"/>

Upvotes: 4

Views: 11863

Answers (3)

Mark Iliev
Mark Iliev

Reputation: 194

Hope this package will help you https://github.com/ilievmark/Basil.Behaviors/tree/master/sample/BehaviorsSample/Pages/Animations

You can use something like this

           <d:CycledAnimationDecorator Cycles="10">
                <h:SequenceHandlerExecutor WaitResult="True">
                    <s:RotateAnimation Length="800" Rotation="360" />
                    <s:RotateAnimation Length="0" Rotation="0" />
                </h:SequenceHandlerExecutor>
            </d:CycledAnimationDecorator>

Upvotes: 0

SushiHangover
SushiHangover

Reputation: 74144

You can use the Image "Rotation" property and change it via a background thread if needed and add animate to it via RotateTo in order to control the rotation speed and start/end point speeds:

async Task RotateImageContinously()
{
    while (true) // a CancellationToken in real life ;-)
    {
        for (int i = 1; i < 7; i++)
        {
            if (image.Rotation >= 360f) image.Rotation = 0;
            await image.RotateTo(i * (360 / 6), 1000, Easing.CubicInOut);
        }
    }
}

Bounce:

enter image description here

Linear:

enter image description here

Cubic:

enter image description here

Upvotes: 15

Steve Chadbourne
Steve Chadbourne

Reputation: 6953

Here is a similar question and answers on Xamarin Forums.

The accepted answer suggests this:

private async Task RotateElement(VisualElement element, CancellationToken cancellation)
{
    while (!cancellation.IsCancellationRequested)
    {
        await element.RotateTo(360, 800, Easing.Linear);
        await element.RotateTo(0, 0); // reset to initial position
    }
}

Upvotes: 2

Related Questions