0

wp7で点滅する画像アニメーションを作成する最良の方法は何ですか？ソースコードのサンプルはありますか？（または）それぞれが数分の1秒で他の画像に変更する必要がある4つの画像のセットがありますか？

4

2 に答える 2

1

私はあなたのためにこのコードを作成しました。それを試してみてください

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>

コードビハインドイベントでストーリーボードイベントを開始します

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
于 2012-06-18T09:25:53.320 に答える
0

1枚の画像でまばたきアニメーションができます。

<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"/>

そして、2番目のステップでは、反対方向に2つの円にアニメーションを適用して、一方がフェードインするともう一方がフェードアウトするようにしました（道路工事の2つの点滅するライトの一種の錯覚）

<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>
于 2012-06-22T04:25:48.357 に答える