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
· BounceEase
· ElasticEase
· ExponentialEase
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");
}
}
}