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

Aktivity (1)
Avatar
lukas.sei
Člen
Avatar
lukas.sei:2.5.2016 19:34

Č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.5.2016 19:34
Avatar
Odpovídá na lukas.sei
sadlomaslox25:2.5.2016 20:49
<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.5.2016 20:49
Avatar
lukas.sei
Člen
Avatar
Odpovídá na sadlomaslox25
lukas.sei:3.5.2016 6:36

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.5.2016 6:36
Avatar
Odpovídá na lukas.sei
sadlomaslox25:3.5.2016 11:15

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.5.2016 11:15
Avatar
lukas.sei
Člen
Avatar
Odpovídá na sadlomaslox25
lukas.sei:3.5.2016 15:27

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.5.2016 15:28
 
Nahoru Odpovědět 3.5.2016 15:27
Avatar
Odpovídá na lukas.sei
sadlomaslox25:3.5.2016 15:33

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.5.2016 15:33
Avatar
lukas.sei
Člen
Avatar
Odpovídá na sadlomaslox25
lukas.sei:3.5.2016 19:03

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.5.2016 19:03
Avatar
Odpovídá na lukas.sei
sadlomaslox25:4.5.2016 20:39
<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.5.2016 20:39
Avatar
lukas.sei
Člen
Avatar
lukas.sei:7.5.2016 6:27

Díky :)

 
Nahoru Odpovědět 7.5.2016 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.