Анимация мигающего изображения в телефоне7

Каков наилучший способ создания анимации мигающего изображения в wp7? Имеется ли образец с исходным кодом? (или) у меня есть набор из 4 изображений, каждое из которых можно заменить другим за доли секунды, возможно ли это?

Источник

2 ответа

Решение

Можно сделать мигающую анимацию с одним изображением.

<Ellipse x:Name="light1" Grid.Column="1" Grid.Row="1" Fill="#FFF7810A" HorizontalAlignment="Left" Margin="109,9,0,8" Stroke="Black" Width="100" d:LayoutOverrides="GridBox"/>

<Ellipse x:Name="light2" Grid.Row="1" Fill="#FFF7810A" Margin="0,9,106,8" Stroke="Black" HorizontalAlignment="Right" Width="100" d:LayoutOverrides="GridBox"/>

И на втором этапе я применил анимацию к этим двум кругам в противоположном направлении, поэтому, когда один затухает в другом, затухает (своего рода иллюзия для двух мигающих огней дорожной работы)

<Grid.Triggers>
<EventTrigger RoutedEvent="Canvas.Loaded">
<BeginStoryboard>
    <Storyboard>
        <DoubleAnimation Storyboard.TargetName="light1"        Storyboard.TargetProperty="Opacity" From="0.5" To="1" Duration="0:0:1.5"  AutoReverse="True" RepeatBehavior="Forever" />
        <DoubleAnimation Storyboard.TargetName="light2"  Storyboard.TargetProperty="Opacity" From="1" To="0.5" Duration="0:0:1.5" AutoReverse="True" RepeatBehavior="Forever" />
    </Storyboard>
</BeginStoryboard>
  </EventTrigger>
</Grid.Triggers>
Источник

Я разработал этот код для вас. попытайся

В xaml добавьте холст с изображением и кнопкой управления, добавьте раскадровку

  <Canvas Height="220" HorizontalAlignment="Left" Margin="79,29,0,0" Name="canvas1" VerticalAlignment="Top" Width="401" Grid.Row="1" >
        <Canvas.Resources>

            <Storyboard x:Name="myStoryboard">
                <DoubleAnimation
    Storyboard.TargetName="image"
    Storyboard.TargetProperty="Opacity"
    From="1.0" To="0.0" Duration="0:0:1" 
     />
            </Storyboard>

        </Canvas.Resources>


        <Image Name="image" Width="200" Height="173"></Image>
        <Button Content="Button" Height="54"   HorizontalAlignment="Left" Margin="388,113,0,0" Name="button1" VerticalAlignment="Top" Width="97" Grid.Row="1" Click="button1_Click" Canvas.Left="-97" Canvas.Top="-26"/>
        </canvas>

В событии code-behind запустите событие раскадровки

Set the image source to the first image when main page initialize. after that when click the button the blinking starts and change the images


private void button1_Click(object sender, RoutedEventArgs e)
    {
        myStoryboard.Begin();
        myStoryboard.Completed +=new EventHandler(myStoryboard_Completed);
    }


   int count = 0;

   public void myStoryboard_Completed(object sender, EventArgs e)
   {

       count++;

       (if you are adding the images in a loop, try to pass the counter value in the source setter of image or else, here you said 4 images so for each counter value using if condition set the image source in whatever way use to set)

       if(count == 1)
         {
            image.source = img.jpg
         }

       if(count == 2)
         {
            image.source = img2.jpg
         }
       if(count == 3)
         {
            image.source = img3.jpg
         }
       if(count > 3)
         {
           count ==0;
         }

       //start the story board again.the blink starts

         myStoryboard.Begin();

        }

        Any doubts further kindly ask
Источник
Другие вопросы по тегам