Xamarin形式的Carousel View自动滑动

Question

我在页面底部有一个“轮播视图”。 现在我希望图像每2秒自动滚动一次。 我已经实现了相同的功能，并且工作正常。

`Device.StartTimer(TimeSpan.FromSeconds(2), () =>
            {
                SlidePosition++;
                if (SlidePosition == Zoos.Count)
                {
                    SlidePosition = 0;
                }
                CarouselZoos.Position = SlidePosition;
                return true; 
            });`

现在将图像加载为L-> R，第一个图像滚动，第二个图像滚动等等。

在最后一个图像之后，从R-> L进行倒带动作，并再次加载第一个图像。

我需要在没有倒带动作的情况下在最后一张图像之后显示第一张图像。

Answer 1

所有可能的:-)动画。

文件“ icon1.png”，“ icon2.png”，“ icon3.png”位于PCL资源文件夹中

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ButtonRendererDemo.RollingAnimPage">
    <ContentPage.Content>
        <ScrollView>
            <StackLayout>
                <Button x:Name="btnScaleAnim" Text="Start Scale Animations" Clicked="ButtonScaleAnim_Clicked" ></Button>
                <StackLayout BackgroundColor="Aqua" >
                    <Image x:Name="scaleImage" WidthRequest="80" HeightRequest="66" Aspect="AspectFit"></Image>
                </StackLayout>

                <Button x:Name="btnFadeAnim" Text="Start Fade Animations" Clicked="ButtonFadeAnim_Clicked" ></Button>
                <StackLayout BackgroundColor="Aqua">
                    <Image x:Name="fadeImage" WidthRequest="80" HeightRequest="66" Aspect="AspectFit"></Image>
                </StackLayout>

                <Button x:Name="btnFade2Anim" Text="Start Fade 2 Animations" Clicked="ButtonFade2Anim_Clicked" ></Button>
                <StackLayout>
                    <RelativeLayout x:Name="fadeRelativeLayout" BackgroundColor="Aqua" HeightRequest="70"></RelativeLayout>
                </StackLayout>

                <Button x:Name="btnScrollAnim" Text="Start Scroll Animations" Clicked="ButtonScrollAnim_Clicked" ></Button>
                <AbsoluteLayout BackgroundColor="Aqua" >
                    <Image x:Name="scrollImage1" WidthRequest="80" HeightRequest="66" Aspect="AspectFit" ></Image>
                    <Image x:Name="scrollImage2" WidthRequest="80" HeightRequest="66" Aspect="AspectFit" ></Image>
                </AbsoluteLayout>

            </StackLayout>
        </ScrollView>
    </ContentPage.Content>
</ContentPage>

后面的代码：

namespace ButtonRendererDemo
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class RollingAnimPage : ContentPage
    {
        Image fadeImage1, fadeImage2;

        string[] images = new string[]
            {
                "icon1.png",
                "icon2.png",
                "icon3.png",
            };

        int nextScaleImageIndex = 0;
        int nextFadeImageIndex = 0;
        int nextFade2ImageIndex = 0;
        int nextScrollImageIndex = 0;

        public RollingAnimPage()
        {
            InitializeComponent();

            scaleImage.Scale = 0;
            fadeImage.Opacity = 0;

            fadeRelativeLayout.Children.Add(fadeImage1 = new Image
            {
                Opacity = 0,
                WidthRequest = 80,
                HeightRequest = 66
            },
            Constraint.RelativeToParent((parent) =>
            {
                return parent.Width / 2 - fadeImage1.Measure(double.PositiveInfinity, double.PositiveInfinity).Request.Width / 2;
            }),
            Constraint.RelativeToParent((parent) =>
            {
                return parent.Height / 2 - fadeImage1.Measure(double.PositiveInfinity, double.PositiveInfinity).Request.Height / 2;
            })
            );

            fadeRelativeLayout.Children.Add(fadeImage2 = new Image
            {
                Opacity = 0,
                WidthRequest = 80,
                HeightRequest = 66
            },
            Constraint.RelativeToParent((parent) =>
            {
                return parent.Width / 2 - fadeImage2.Measure(double.PositiveInfinity, double.PositiveInfinity).Request.Width / 2;
            }),
            Constraint.RelativeToParent((parent) =>
            {
                return parent.Height / 2 - fadeImage2.Measure(double.PositiveInfinity, double.PositiveInfinity).Request.Height / 2;
            })
            );

        }



        bool scaleAnimRunning = false;
        private void ButtonScaleAnim_Clicked(object sender, EventArgs e)
        {
            scaleAnimRunning = !scaleAnimRunning;
            btnScaleAnim.Text = scaleAnimRunning ? "Stop Scale Animation" : "Start Scale Animation";

            Task.Run(() =>
            {
                Device.BeginInvokeOnMainThread(async () =>
                {
                    while (scaleAnimRunning)
                    {
                        await scaleImage.ScaleTo(0, 250, Easing.Linear);
                        scaleImage.Source = ImageSource.FromResource("ButtonRendererDemo.Resources." + images[nextScaleImageIndex]);
                        await scaleImage.ScaleTo(1, 250, Easing.Linear);

                        nextScaleImageIndex = ++nextScaleImageIndex % images.Length;
                        await Task.Delay(1000);
                    }
                });
            });
        }


        bool fadeAnimRunning = false;
        private void ButtonFadeAnim_Clicked(object sender, EventArgs e)
        {
            fadeAnimRunning = !fadeAnimRunning;
            btnFadeAnim.Text = fadeAnimRunning ? "Stop Fade Animation" : "Start Fade Animation";

            Task.Run(() =>
            {
                Device.BeginInvokeOnMainThread(async () =>
                {
                    while (fadeAnimRunning)
                    {
                        await fadeImage.FadeTo(0, 250, Easing.Linear);
                        fadeImage.Source = ImageSource.FromResource("ButtonRendererDemo.Resources." + images[nextFadeImageIndex]);
                        await fadeImage.FadeTo(1, 250, Easing.Linear);

                        nextFadeImageIndex = ++nextFadeImageIndex % images.Length;
                        await Task.Delay(1000);
                    }
                });
            });
        }


        bool fade2AnimRunning = false;
        bool image1Visible = false;
        private void ButtonFade2Anim_Clicked(object sender, EventArgs e)
        {
            fade2AnimRunning = !fade2AnimRunning;
            btnFade2Anim.Text = fade2AnimRunning ? "Stop Fade 2 Animation" : "Start Fade 2 Animation";

            Task.Run(() =>
            {
                Device.BeginInvokeOnMainThread(async () =>
                {

                    while (fade2AnimRunning)
                    {
                        if (image1Visible)
                        {
                            fadeImage2.Source = ImageSource.FromResource("ButtonRendererDemo.Resources." + images[nextFade2ImageIndex]);
                            fadeImage1.FadeTo(0, 250, Easing.Linear);
                            await fadeImage2.FadeTo(1, 250, Easing.Linear);
                        }
                        else
                        {
                            fadeImage1.Source = ImageSource.FromResource("ButtonRendererDemo.Resources." + images[nextFade2ImageIndex]);
                            fadeImage2.FadeTo(0, 250, Easing.Linear);
                            await fadeImage1.FadeTo(1, 250, Easing.Linear);
                        }

                        image1Visible = !image1Visible;
                        nextFade2ImageIndex = ++nextFade2ImageIndex % images.Length;
                        await Task.Delay(1000);
                    }
                });
            });
        }



        bool scrollAnimRunning = false;
        bool scrollImage1Visible = false;
        private void ButtonScrollAnim_Clicked(object sender, EventArgs e)
        {
            scrollAnimRunning = !scrollAnimRunning;
            btnScrollAnim.Text = scrollAnimRunning ? "Stop Scroll Animation" : "Start Scroll Animation";

            if (scrollAnimRunning) //anim started
            {
                if (scrollImage1Visible)
                    scrollImage2.TranslateTo(Width, scrollImage2.Y, 0);
                else
                    scrollImage1.TranslateTo(Width, scrollImage1.Y, 0);
            }

            Task.Run(() =>
            {
                Device.BeginInvokeOnMainThread(async () =>
                {

                    while (scrollAnimRunning)
                    {
                        if (scrollImage1Visible)
                        {
                            scrollImage2.Source = ImageSource.FromResource("ButtonRendererDemo.Resources." + images[nextScrollImageIndex]);
                            scrollImage1.TranslateTo(-scrollImage1.Width, scrollImage1.Y, 250);
                            await scrollImage2.TranslateTo(Width / 2 - scrollImage2.Width / 2, scrollImage2.Y, 250);
                            scrollImage1.TranslateTo(Width, scrollImage1.Y, 0);
                        }
                        else
                        {
                            scrollImage1.Source = ImageSource.FromResource("ButtonRendererDemo.Resources." + images[nextScrollImageIndex]);
                            scrollImage2.TranslateTo(-scrollImage2.Width, scrollImage2.Y, 250);
                            await scrollImage1.TranslateTo(Width / 2 - scrollImage1.Width / 2, scrollImage1.Y, 250);
                            scrollImage2.TranslateTo(Width, scrollImage2.Y, 0);
                        }

                        scrollImage1Visible = !scrollImage1Visible;
                        nextScrollImageIndex = ++nextScrollImageIndex % images.Length;
                        await Task.Delay(1000);
                    }
                });
            });    
        }           
    }
}