Diskuze: WPF - Animace otáčející se mince

C# .NET .NET (C# a Visual Basic) WPF - Animace otáčející se mince American English version English version

Avatar
lukas.sei
Člen
Avatar
lukas.sei:

Čaute,
Potřebuji pomoc.
Chci si jen tak z nudy vytvořit "Gamblící" aplikaci. Kde by byly různé "Gamble" hry (Kolo štěstí, blackjack a taky např. Hod mincí :D)
No, ale potřebuji pomoct s animacemi.
Mohl by mi někdo poradit, jak v WPF vytvořit nějakou takovouhle animaci (https://www.youtube.com/watch?…) ?
Nejlépe, aby to bylo přes code-behind

Předem děkuji za každé rady.

 
Odpovědět 2. května 19:34
Avatar
Odpovídá na lukas.sei
sadlomaslox25:
<Image x:Name="image" HorizontalAlignment="Left" Height="100" Margin="190,98,0,0" VerticalAlignment="Top" Width="100" Source="peny.jpg" RenderTransformOrigin="0.5,0.5">
    <Image.RenderTransform>
        <ScaleTransform x:Name="my" ScaleX="1" ScaleY="1"/>
    </Image.RenderTransform>
    <Image.Triggers>
        <EventTrigger RoutedEvent="Loaded">
            <BeginStoryboard>
                <Storyboard RepeatBehavior="Forever" Storyboard.TargetName="my" >
                    <DoubleAnimation Duration="0:0:1" From="1" To="-1" Storyboard.TargetProperty="ScaleX">
                        <DoubleAnimation.EasingFunction>
                            <CubicEase EasingMode="EaseInOut"/>
                        </DoubleAnimation.EasingFunction>
                    </DoubleAnimation>
                    <DoubleAnimation BeginTime="0:0:1" Duration="0:0:1" From="-1" To="1" Storyboard.TargetProperty="ScaleX" >
                        <DoubleAnimation.EasingFunction>
                            <CubicEase EasingMode="EaseInOut"/>
                        </DoubleAnimation.EasingFunction>
                    </DoubleAnimation>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Image.Triggers>
</Image>
 
Nahoru Odpovědět 2. května 20:49
Avatar
lukas.sei
Člen
Avatar
Odpovídá na sadlomaslox25
lukas.sei:

Dík přesně takhle nějak si to představuju. Ale mám ještě jednu otázku. Nedokázal bys to napsat v code-behind (C#) a né v XAML ?

 
Nahoru Odpovědět 3. května 6:36
Avatar
Odpovídá na lukas.sei
sadlomaslox25:

no ja jo, ale ja se to nepotrebuju naucit :-D . to das sam. jestli se zaseknes na necem konkretnim tak napis.

 
Nahoru Odpovědět 3. května 11:15
Avatar
lukas.sei
Člen
Avatar
Odpovídá na sadlomaslox25
lukas.sei:

No, tak jsem to nějak s pomocí internetu a tvojí XAML předlohy spíchnul. Ale mám problém, s tím, že to tu první otočku úplně přeskočí a provedete to jenom tu druhou.
Nevíš kde by mohla být chyba ?
Jinak, mám to rozdělené na dvě metody schválně.

Přikládám můj kód:

public void BTN_Click(object sender, RoutedEventArgs e)
        {
            OtocKartu1();
            OtocKartu2();
        }
        public void OtocKartu1()
        {
            Storyboard storyBoard = new Storyboard();

            SineEase easingFunction = new SineEase();
            easingFunction.EasingMode = EasingMode.EaseIn;

            ScaleTransform flipTrans = new ScaleTransform(1.0, 1.0);
            img.RenderTransformOrigin = new Point(0.5, 0.5);
            img.RenderTransform = flipTrans;

            DoubleAnimation growAnimation = new DoubleAnimation();
            growAnimation.Duration = new Duration(TimeSpan.FromSeconds(1));
            growAnimation.From = 1;
            growAnimation.To = -1;
            growAnimation.EasingFunction = easingFunction;
            storyBoard.Children.Add(growAnimation);

            Storyboard.SetTargetProperty(growAnimation, new PropertyPath("RenderTransform.ScaleX"));
            Storyboard.SetTarget(growAnimation, img);

            storyBoard.Begin();
        }
        public void OtocKartu2()
        {
            Storyboard storyBoard = new Storyboard();

            SineEase easingFunction = new SineEase();
            easingFunction.EasingMode = EasingMode.EaseIn;

            ScaleTransform flipTrans = new ScaleTransform(1.0, 1.0);
            img.RenderTransformOrigin = new Point(0.5, 0.5);
            img.RenderTransform = flipTrans;

            DoubleAnimation growAnimation = new DoubleAnimation();
            growAnimation.BeginTime = TimeSpan.FromSeconds(1);
            growAnimation.Duration = new Duration(TimeSpan.FromSeconds(1));
            growAnimation.From = -1;
            growAnimation.To = 1;
            growAnimation.EasingFunction = easingFunction;
            storyBoard.Children.Add(growAnimation);

            Storyboard.SetTargetProperty(growAnimation, new PropertyPath("RenderTransform.ScaleX"));
            Storyboard.SetTarget(growAnimation, img);

            storyBoard.Begin();
        }
Editováno 3. května 15:28
 
Nahoru Odpovědět 3. května 15:27
Avatar
Odpovídá na lukas.sei
sadlomaslox25:

podle me to bude tim ze spoustis 2 storyboardy paralelne nad jednim objektem. zkousel si dat obe dve animace pod jeden storyboard a az pak to pustit ?

 
Nahoru Odpovědět  +1 3. května 15:33
Avatar
lukas.sei
Člen
Avatar
Odpovídá na sadlomaslox25
lukas.sei:

No dobre. Toto jsem vyřešil.
Ještě bych měl jednu otázku. Dá se při té animaci otáčení nastavit, aby ta mince měla na každé straně jinou texturu ? (např. rub a líc u karet)
Doufám, že mě chápeš :D (Prostě, tak jak to je na tom videu.)

 
Nahoru Odpovědět 3. května 19:03
Avatar
Odpovídá na lukas.sei
sadlomaslox25:
<Image x:Name="image" HorizontalAlignment="Left" Height="100" Margin="190,98,0,0" VerticalAlignment="Top" Width="100" Source="peny.jpg" RenderTransformOrigin="0.5,0.5">
    <Image.RenderTransform>
        <ScaleTransform x:Name="my" ScaleX="1" ScaleY="1"/>
    </Image.RenderTransform>
    <Image.Triggers>
        <EventTrigger RoutedEvent="Loaded">
            <BeginStoryboard>
                <Storyboard RepeatBehavior="Forever" Storyboard.TargetName="my" >
                    <DoubleAnimation Duration="0:0:1" From="1" To="-1" Storyboard.TargetProperty="ScaleX">
                        <DoubleAnimation.EasingFunction>
                            <CubicEase EasingMode="EaseInOut"/>
                        </DoubleAnimation.EasingFunction>
                    </DoubleAnimation>
                    <DoubleAnimation BeginTime="0:0:1" Duration="0:0:1" From="-1" To="1" Storyboard.TargetProperty="ScaleX" >
                        <DoubleAnimation.EasingFunction>
                            <CubicEase EasingMode="EaseInOut"/>
                        </DoubleAnimation.EasingFunction>
                    </DoubleAnimation>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="image" Storyboard.TargetProperty="Source">
                        <DiscreteObjectKeyFrame KeyTime="0:0:0.5" >
                            <DiscreteObjectKeyFrame.Value>
                                <BitmapImage UriSource="peny_back.jpg"/>
                            </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                        <DiscreteObjectKeyFrame KeyTime="0:0:1.5" >
                            <DiscreteObjectKeyFrame.Value>
                                <BitmapImage UriSource="peny.jpg"/>
                            </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Image.Triggers>
</Image>
Akceptované řešení
+20 Zkušeností
+1 bodů
Řešení problému
 
Nahoru Odpovědět 4. května 20:39
Avatar
lukas.sei
Člen
Avatar
lukas.sei:

Díky :)

 
Nahoru Odpovědět 7. května 6:27
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 9 zpráv z 9.