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

lukas.sei

Člen

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í )
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

sadlomaslox25

Člen

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

lukas.sei

Člen

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

sadlomaslox25

Člen

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

lukas.sei

Člen

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

sadlomaslox25

Člen

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

lukas.sei

Člen

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š (Prostě, tak jak to je na tom videu.)

Nahoru Odpovědět

3.5.2016 19:03

sadlomaslox25

Člen

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č

Nahoru Odpovědět

4.5.2016 20:39

lukas.sei

Člen

lukas.sei:7.5.2016 6:27

Díky

Nahoru Odpovědět

7.5.2016 6:27

Nejčastěji vyhledáváné

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