Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

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

Aktivity
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
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í
+2,50 Kč
Ř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.