回転台の表示Xamarinの自動スライディング

Question

私のページの下部に回転台のビューがあります。今私は2秒ごとに自動的に画像をスクロールし続けたい。私は同じとそのうまく動作して実装しました。

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

画像がロードされると、L-> R、最初の画像がスクロールし、2番目の画像がスクロールします。

最後のイメージの後に、R> LからAリワインドアクションが実行され、最初のイメージが再びロードされます。

この巻き戻し動作をせずに最後の画像の後に最初の画像を表示する必要があります。

Answer 1

すべての可能な:-)アニメーション。

ファイル "icon1.png"、 "icon2.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> 

、コードされている "icon3.png"：場合

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); 
        } 
       }); 
      });  
     }   
    } 
}