animation image wpf

Version imprimable

animation image wpf

Bonjour
je desire faire une animation qui affiche des image une aprés les autres
au demmarage de l'application j'ai une image image1 qui afficher puis aprés une durée image2 et afficher puis image3 aprés une autre durée, je voudrais que cette animation soit répété et la est mon probléme,en je met l'attribut RepeatBehaviour sur true et normalement je doit avoir la toutes premiere image afficher mais je ne l'ai pas
j'ai du faire une erreur qq part voici le code XAML

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<Storyboard x:Name="animLogo" Completed="animLogo_Completed" RepeatBehavior="forever" >
                    <DoubleAnimation Storyboard.TargetName="image1"
                                     Storyboard.TargetProperty="opacity"
                                     BeginTime="0:0:5"
                                     From="1" To="0" Duration="0:0:1" />
                    <DoubleAnimation Storyboard.TargetName="image2"
                                     Storyboard.TargetProperty="opacity"
                                     BeginTime="0:0:5.25"
                                     From="0" To="1" Duration="0:0:1" />
                    <DoubleAnimation Storyboard.TargetName="image3"
                                     Storyboard.TargetProperty="opacity"
                                     BeginTime="0:0:10.50"
                                     From="0" To="1" Duration="0:0:1" />                    
 
 
                </Storyboard>

je ne sais pas aussi si ces la methode la plus optimal

merci
salutations

24/08/2011, 14h18
binoo

Salut,

Ça ressemble à un gif animé. Si un gif animé te suffit, alors le plus simple est de faire ce gif animé tout simplement (il y a des outils sur internet pour ça) et de l'utiliser dans ton application WPF avec cette méthode par exemple :
http://tomlev.wordpress.com/2011/03/...ge-gif-animee/

Sinon pour ton code, ta première image apparait au bout de 5 secondes (BeginTime="0:0:5") et dure 1 seconde. et la deuxième démarre 25 centièmes de seconde plus tard. Du coup la première est vite remplacer et c'est peut-être pour ça que tu ne vois pas la première image ;)

Bonjour et merci
je vais voir le truc sur les gif
sinon pour l’animation j'ai jouer sur l'opacité,au bout de 5 sec image1 commence a devenir transparente et image2 commence a apparaitre aprés 0.25 sec, idem pour image3 c'est 0.25 sec après que image2 commence a devenir transparente puis la je doit avoir un raz de l'animation,image1 doit s'afficher encore et ainsi de suite
le problème c'est que je n'arrive pas a réafficher image1 pour rejouer l'animation j'ai image2 au lieu image1 puis image3 puis image2........etc
voici le XAML de canvas:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
<Canvas x:Name="LayoutRoot" Margin="127,12,66,13">
 
            <Image   Name="image1" Stretch="Fill" Width="207" Source="AR-EQUITY-press-36x25-Rocher.jpg" Height="275" />   
            <Image   Name="image2" Stretch="Fill" Width="207" Source="FR-EQUITY-press-36x25-Foot.jpg" Opacity="0" Height="275" />
            <Image Name="image3" Stretch="Fill" Width="207" Source="AR-EQUITY-press-36x25-Famille.jpg" Opacity="0" Height="275" />
            <Canvas.Resources>
            <Storyboard x:Name="animLogo" Completed="animLogo_Completed" RepeatBehavior="forever" >
                    <DoubleAnimation Storyboard.TargetName="image1"
                                     Storyboard.TargetProperty="opacity"
                                     BeginTime="0:0:5"
                                     From="1" To="0" Duration="0:0:1" />
                    <DoubleAnimation Storyboard.TargetName="image2"
                                     Storyboard.TargetProperty="opacity"
                                     BeginTime="0:0:5.25"
                                     From="0" To="1" Duration="0:0:1" />
                    <DoubleAnimation Storyboard.TargetName="image3"
                                     Storyboard.TargetProperty="opacity"
                                     BeginTime="0:0:10.50"
                                     From="0" To="1" Duration="0:0:1" />                    
 
 
                </Storyboard>
        </Canvas.Resources>
    </Canvas>

merci encore

Coucou,

Essaye ce code:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<Canvas x:Name="LayoutRoot" Margin="127,12,66,13">
    <Image Name="image1" Stretch="Fill" Width="207" 
           Source="AR-EQUITY-press-36x25-Rocher.jpg" Height="275" />
    <Image Name="image2" Stretch="Fill" Width="207" 
           Source="FR-EQUITY-press-36x25-Foot.jpg" Opacity="0" Height="275" />
    <Image Name="image3" Stretch="Fill" Width="207" 
           Source="AR-EQUITY-press-36x25-Famille.jpg" Opacity="0"
            Height="275" />
    <Canvas.Resources>
        <Storyboard x:Name="animLogo" Completed="animLogo_Completed" RepeatBehavior="forever">
            <DoubleAnimation Storyboard.TargetName="image1" 
                             Storyboard.TargetProperty="opacity" BeginTime="0:0:0"
                    From="1" To="1" Duration="0:0:5" />
            <DoubleAnimation Storyboard.TargetName="image1" 
                             Storyboard.TargetProperty="opacity" BeginTime="0:0:5"
                    From="1" To="0" Duration="0:0:1" />
            <DoubleAnimation Storyboard.TargetName="image2" 
                             Storyboard.TargetProperty="opacity" BeginTime="0:0:5.25"
                    From="0" To="1" Duration="0:0:1" />
            <DoubleAnimation Storyboard.TargetName="image3" 
                             Storyboard.TargetProperty="opacity"
                    BeginTime="0:0:10.50" From="0" To="1" Duration="0:0:1" />
        </Storyboard>
    </Canvas.Resources>
</Canvas>

Cela remet bien l'opacité de ton image1 à 1 au début de l'anim (sinon elle restait à 0 jusque l'animation commence réellement (à 5 secondes).

Bon courage,

24/08/2011, 15h17
amine008

sa ne marche pas
je n'ai rien sur l’écran avec se code,il semblerais que le problème et le fait que image1 et utilisé deux fois!!
jamais vu se cas!

mmm, et en remplaçant la première DoubleAnim par celle-ci ? :

Code:

1
2
3
4
5
6
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="image1" 
Storyboard.TargetProperty="opacity" >
        <LinearDoubleKeyFrame KeyTime="0:0:0" Value="1"/>
        <LinearDoubleKeyFrame KeyTime="0:0:5" Value="1" />
        <LinearDoubleKeyFrame KeyTime="0:0:6" Value="0" />
    </DoubleAnimationUsingKeyFrames>

EDIT: je viens de mettre à jour ce code !

avec sa l'animation semble se répété correctement mais au load j'ai image1 qui commence a devenir transparente et image2 apparait progressivement.
le but est de laisser chaque image pendant 5 sec net puis elle devient transparente et en même temps l'image suivante apparait progressivement
je tient a signalé que la première animation que je fait :roll:
voice le code

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="image1" 
                                                   Storyboard.TargetProperty="opacity" >
                        <LinearDoubleKeyFrame KeyTime="0:0:0" Value="1"/>
                        <LinearDoubleKeyFrame KeyTime="0:0:5" Value="1" />
                        <LinearDoubleKeyFrame KeyTime="0:0:6" Value="0" />
                    </DoubleAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="image2" 
                                                   Storyboard.TargetProperty="opacity" >                        
                        <LinearDoubleKeyFrame KeyTime="0:0:5.25" Value="1" />
                        <LinearDoubleKeyFrame KeyTime="0:0:10" Value="1" />
                        <LinearDoubleKeyFrame KeyTime="0:0:11" Value="0" />
                    </DoubleAnimationUsingKeyFrames>

merci

24/08/2011, 16h15
jmix90

Je ne comprends pas ton problème...

j'ai trouvé
l'animation marche comme prevu

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="image1" 
                                                   Storyboard.TargetProperty="opacity" >
                        <LinearDoubleKeyFrame KeyTime="0:0:0" Value="1"/>
                        <LinearDoubleKeyFrame KeyTime="0:0:5" Value="1" />
                        <LinearDoubleKeyFrame KeyTime="0:0:6" Value="0" />
                    </DoubleAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="image2" 
                                                   Storyboard.TargetProperty="opacity" BeginTime="0:0:5.50" >                        
                        <LinearDoubleKeyFrame KeyTime="0:0:1" Value="1" />
                        <LinearDoubleKeyFrame KeyTime="0:0:5" Value="1" />
                        <LinearDoubleKeyFrame KeyTime="0:0:6" Value="0" />
                    </DoubleAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="image3" 
                                                   Storyboard.TargetProperty="opacity" BeginTime="0:0:11" >
                        <LinearDoubleKeyFrame KeyTime="0:0:1" Value="1" />
                        <LinearDoubleKeyFrame KeyTime="0:0:5" Value="1" />
                        <LinearDoubleKeyFrame KeyTime="0:0:6" Value="0" />
                    </DoubleAnimationUsingKeyFrames>

merci beaucoup:ccool:

24/08/2011, 16h18
jmix90

Super !! :ccool:
24/08/2011, 16h20
amine008

j'ai trouvé mais je vais m'expliquer quand même
j'ai trois image que je doit afficher a tour de rôle,image1 sera afficher pendant 5 seconde puis disparait au bout d'une seconde et pendant cette seconde image2 apparait progressivement, et cela en jouant sur l’opacité et ainsi de suite pour image3,cet animation doit se répété pendant tout le temps que l'application tourne,et le problème que j'avais c'est que l'animation ne se rjoue pas dans le même ordre qu'au lancement
mais avec ton aide j’ai pu réglé le problème
merci beaucoup:ccool: