Reaali Robootika.COM

NXT robotimaailm ja programmeerimine C-keeles

Windows Phone – EASE funktsioonid

EASE-funktsioonid on Silverlightis välja töötatud spetsiaalsete matemaatiliste algoritmidega funktsioonid, mis võimaldavad lihtsal moel objekte erilisel viisil liikuma ja põrkama panna.

Alljärgnevas näites on realiseeritud 4 kõige silmapaistvamat EASE funktsiooni, milleks on

·         BackEase

image

·         BounceEase

image

·         ElasticEase

image

·         ExponentialEase

image

Täpsemalt leiad Ease funktsioonide kohta siit lehelt: http://msdn.microsoft.com/en-us/library/ee308751.aspx 

Vaata kõigepealt antud rakenduse videot, et tekiks parem arusaamine antud funktsioonide eripäradest.

Windows Phone - how Ease functions working

MainPage.xaml

<phone:PhoneApplicationPage
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
   xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
   xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
   xmlns:Microsoft_Advertising_Mobile_UI="clr-namespace:Microsoft.Advertising.Mobile.UI;assembly=Microsoft.Advertising.Mobile.UI"
   x:Class="PhoneApp1.MainPage"
   mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
   SupportedOrientations="Portrait" Orientation="Portrait"
   shell:SystemTray.IsVisible="True">

      <Grid x:Name="LayoutRoot" Background="Transparent">
        
        <Canvas>
            <Canvas.Resources>
                <Storyboard x:Name="myStoryboard" Completed="myStoryboard_Completed">
                    <DoubleAnimation x:Name="RectangleAnimation" From="0" To="300" Duration="00:00:04"
                                    Storyboard.TargetName="Myrectangle"
                                    Storyboard.TargetProperty="(Canvas.Top)"
                                    >
                                        </DoubleAnimation>
                    <DoubleAnimation x:Name="RectangleAnimation1" From="650" To="351" Duration="00:00:04"
                                    Storyboard.TargetName="Myrectangle1"
                                    Storyboard.TargetProperty="(Canvas.Top)"
                                    >
                    </DoubleAnimation>
                    <DoubleAnimation x:Name="RingAnimationX" From="0" To="1"
                                    Duration="00:00:04"
                                    Storyboard.TargetName="Ring"
                                    Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)"
                                    >
                    </DoubleAnimation>
                    <DoubleAnimation x:Name="RingAnimationY" From="0" To="1"
                                    Duration="00:00:04"
                                    Storyboard.TargetName="Ring"
                                    Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" >
                    </DoubleAnimation>
                    <DoubleAnimation x:Name="SliderRotation1" From="0" To="360"
                                    Duration="00:00:06"
                                    Storyboard.TargetName="slider1"
                                    Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" >
                    </DoubleAnimation>
                    <DoubleAnimation x:Name="SliderRotation2" From="0" To="360"
                                    Duration="00:00:03"
                                    Storyboard.TargetName="slider2"
                                    Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" >
                    </DoubleAnimation>

                </Storyboard>
                <Storyboard x:Name="ProgressStoryBoard">
                    <DoubleAnimation x:Name="Progressbar" From="0" To="100"
                                    Duration="00:00:06"
                                    Storyboard.TargetName="progressBar1"
                                    Storyboard.TargetProperty="Value" >
                    </DoubleAnimation>
                </Storyboard>
            </Canvas.Resources>
            <Rectangle x:Name="Myrectangle" Width="50" Height="50" VerticalAlignment="Center" Canvas.Left="27" Canvas.Top="0" Fill="Blue" RadiusX="10" RadiusY="10" />
            <Rectangle x:Name="Myrectangle1" Width="50" Height="50" VerticalAlignment="Center" Canvas.Left="27" Canvas.Top="650" Fill="Red" RadiusX="10" RadiusY="10" />
            <RadioButton Canvas.Left="235" Canvas.Top="6" Content="Back Ease" Height="71" Name="backEase" Width="245" GroupName="EaseRadio" Checked="backEase_Checked" />
            <RadioButton Canvas.Left="235" Canvas.Top="77" Content="Bounce Ease" Height="71" Name="bounceEase" Width="245" GroupName="EaseRadio" Checked="bounceEase_Checked" />
            <RadioButton Canvas.Left="235" Canvas.Top="154" Content="Elastic Ease" Height="71" Name="elasticEase" Width="245" GroupName="EaseRadio" Checked="elasticEase_Checked" />
            <RadioButton Canvas.Left="235" Canvas.Top="231" Content="Exponential" Height="71" Name="exponentialEase" Width="245" GroupName="EaseRadio" Checked="exponentialEase_Checked" />
            <Slider Canvas.Left="235" Canvas.Top="360" Height="344" Name="slider1" Width="80" Orientation="Vertical" Visibility="Visible" SmallChange="0.5" ValueChanged="slider1_ValueChanged" RenderTransformOrigin="0.5,0.5">
                <Slider.RenderTransform>
                    <CompositeTransform Rotation="0"></CompositeTransform>
                </Slider.RenderTransform>
            </Slider>
            <Slider Canvas.Left="329" Canvas.Top="360" Height="344" Name="slider2" Width="80" Orientation="Vertical" SmallChange="0.5" ValueChanged="slider2_ValueChanged" RenderTransformOrigin="0.5,0.5">
                <Slider.RenderTransform>
                    <CompositeTransform Rotation="0"></CompositeTransform>
                </Slider.RenderTransform>
            </Slider>
            <TextBlock Canvas.Left="170" Canvas.Top="309" Height="46" Name="textBlock1" Width="145" TextAlignment="Center" FontSize="24" />
            <TextBlock Canvas.Left="329" Canvas.Top="309" Height="46" Name="textBlock2" Width="145" TextAlignment="Center" FontSize="24" />
            <TextBlock Canvas.Left="235" Canvas.Top="710" Height="51" Name="textBlock11" Width="80" TextAlignment="Center" />
            <TextBlock Canvas.Left="329" Canvas.Top="710" Height="51" Name="textBlock22" Width="80" TextAlignment="Center" />
            <Button Canvas.Left="98" Canvas.Top="697" Content="RUN" Height="71" Name="button1" Width="131" Click="button1_Click" />
            <Ellipse RenderTransformOrigin="0.5,0.5" Height="100" x:Name="Ring" Canvas.Left="117" StrokeStartLineCap="Round" StrokeEndLineCap="Square" StrokeThickness="10" Canvas.Top="607" Width="96">
                <Ellipse.RenderTransform>
                    <CompositeTransform ScaleX="0" ScaleY="0"></CompositeTransform>
                </Ellipse.RenderTransform>
                <Ellipse.Fill>
                    <RadialGradientBrush GradientOrigin="0.23,0.3">
                        <GradientStop Color="Black" Offset="1"/>
                        <GradientStop Color="White"/>
                    </RadialGradientBrush>
                </Ellipse.Fill>
            </Ellipse>
            <ProgressBar Canvas.Left="0" Canvas.Top="350" Height="1" Name="progressBar1" Width="460" Value="0" Background="White" Foreground="Red" >
            </ProgressBar>
        </Canvas>
    </Grid
>

</
phone:PhoneApplicationPage
>

MainPage.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;


namespace PhoneApp1
{
    public partial class MainPage : PhoneApplicationPage
    {
        int MyRadio = 0;

        public MainPage()
        {
            InitializeComponent();
        }
        private void backEase_Checked(object sender, RoutedEventArgs e)
        {
            //kuvatakse peidetakse vajalikud sliderid ja numbrite näitamised
            slider1.Visibility = Visibility.Visible;
            slider2.Visibility = Visibility.Collapsed;
            textBlock2.Visibility = Visibility.Collapsed;
            textBlock22.Visibility = Visibility.Collapsed;
            textBlock1.Text = "Amplituud";
            //algväärtustatakse slider
            slider1.Value = 1;
            //switchi jaoks määratud nupuvajutus
            MyRadio = 1;
        }

        private void bounceEase_Checked(object sender, RoutedEventArgs e)
        {
            slider1.Visibility = Visibility.Visible;
            slider2.Visibility = Visibility.Visible;
            textBlock2.Visibility = Visibility.Visible;
            textBlock22.Visibility = Visibility.Visible;
            textBlock1.Text = "Põrkeid";
            textBlock2.Text = "Tugevus";
            slider1.Value = 6;
            slider2.Value = 2;
            MyRadio = 2;
        }

        private void elasticEase_Checked(object sender, RoutedEventArgs e)
        {
            slider1.Visibility = Visibility.Visible;
            slider2.Visibility = Visibility.Visible;
            textBlock2.Visibility = Visibility.Visible;
            textBlock22.Visibility = Visibility.Visible;
            textBlock1.Text = "Võnkeid";
            textBlock2.Text = "Vetruvus";
            slider1.Value = 3;
            slider2.Value = 1;
            MyRadio = 3;
        }

        private void exponentialEase_Checked(object sender, RoutedEventArgs e)
        {
            slider1.Visibility = Visibility.Visible;
            slider2.Visibility = Visibility.Collapsed;
            textBlock2.Visibility = Visibility.Collapsed;
            textBlock22.Visibility = Visibility.Collapsed;
            textBlock1.Text = "Exponentsiaalsus";
            slider1.Value = 6;
            MyRadio = 4;
        }
        private void button1_Click(object sender, RoutedEventArgs e)
        {
            switch (MyRadio)
            {
                case 1:
                    BackEase be = new BackEase();
                    be.Amplitude = Convert.ToDouble(slider1.Value);
                    be.EasingMode = EasingMode.EaseOut;
                    RectangleAnimation.EasingFunction = be;
                    RectangleAnimation1.EasingFunction = be;
                    RingAnimationX.EasingFunction = be;
                    RingAnimationY.EasingFunction = be;
                    SliderRotation1.EasingFunction = be;
                    SliderRotation2.EasingFunction = be;
                    break;
                case 2:
                    BounceEase boe = new BounceEase();
                    boe.Bounces = Convert.ToInt32(slider1.Value);
                    boe.Bounciness = Convert.ToDouble(slider2.Value);
                    boe.EasingMode = EasingMode.EaseOut;
                    RectangleAnimation.EasingFunction = boe;
                    RectangleAnimation1.EasingFunction = boe;
                    RingAnimationX.EasingFunction = boe;
                    RingAnimationY.EasingFunction = boe;
                    SliderRotation1.EasingFunction = boe;
                    SliderRotation2.EasingFunction = boe;
                    break;
                case 3:
                    ElasticEase ee = new ElasticEase();
                    ee.Oscillations = Convert.ToInt32(slider1.Value);
                    ee.Springiness = Convert.ToDouble(slider2.Value);
                    ee.EasingMode = EasingMode.EaseOut;
                    RectangleAnimation.EasingFunction = ee;
                    RectangleAnimation1.EasingFunction = ee;
                    RingAnimationX.EasingFunction = ee;
                    RingAnimationY.EasingFunction = ee;
                    SliderRotation1.EasingFunction = ee;
                    SliderRotation2.EasingFunction = ee;
                    break;
                case 4:
                    ExponentialEase xe = new ExponentialEase();
                    xe.Exponent = Convert.ToInt32(slider1.Value);
                    xe.EasingMode = EasingMode.EaseOut;
                    RectangleAnimation.EasingFunction = xe;
                    RectangleAnimation1.EasingFunction = xe;
                    RingAnimationX.EasingFunction = xe;
                    RingAnimationY.EasingFunction = xe;
                    SliderRotation1.EasingFunction = xe;
                    SliderRotation2.EasingFunction = xe;
                    break;
            }
            ProgressStoryBoard.Begin();
            myStoryboard.Begin();
            }
        private void myStoryboard_Completed(object sender, EventArgs e)
        {
            //myStoryboard.Stop();
        }

        private void slider1_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            textBlock11.Text = slider1.Value.ToString("0.00");
        }

        private void slider2_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            textBlock22.Text = slider2.Value.ToString("0.00");
        }
    }
}

Add comment

Loading