背水一戰 Windows 10 (15) - 動畫: 緩動動畫 原文:背水一戰 Windows 10 (15) - 動畫: 緩動動畫

[源碼下載]

背水一戰 Windows 10 (15) - 動畫: 緩動動畫

作者：webabcd


介紹
背水一戰 Windows 10 之 動畫

• 緩動動畫 - easing

示例
演示緩動（easing）的應用
Animation/EasingAnimation.xaml

<Pagex:Class="Windows10.Animation.EasingAnimation"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="using:Windows10.Animation"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"mc:Ignorable="d"><Grid Background="Transparent"><StackPanel Margin="10 0 10 10"><StackPanel Orientation="Horizontal"><StackPanel Orientation="Horizontal"><TextBlock FontSize="24" Text="Easing Function:" VerticalAlignment="Top" /><!-- 用于選擇 Easing Function --><ComboBox x:Name="cboEasingFunction" SelectionChanged="cboEasingFunction_SelectionChanged" Margin="10 0 0 0"><ComboBoxItem>BackEase</ComboBoxItem><ComboBoxItem>BounceEase</ComboBoxItem><ComboBoxItem>CircleEase</ComboBoxItem><ComboBoxItem>CubicEase</ComboBoxItem><ComboBoxItem>ElasticEase</ComboBoxItem><ComboBoxItem>ExponentialEase</ComboBoxItem><ComboBoxItem>PowerEase</ComboBoxItem><ComboBoxItem>QuadraticEase</ComboBoxItem><ComboBoxItem>QuarticEase</ComboBoxItem><ComboBoxItem>QuinticEase</ComboBoxItem><ComboBoxItem>SineEase</ComboBoxItem></ComboBox></StackPanel><StackPanel Orientation="Horizontal" Margin="10 0 0 0"><TextBlock FontSize="24" Text="Easing Mode:" VerticalAlignment="Top" /><ComboBox x:Name="cboEasingMode" SelectionChanged="cboEasingMode_SelectionChanged" Margin="10 0 0 0"><!-- 用于選擇 Easing Mode --><ComboBoxItem>EaseIn</ComboBoxItem><ComboBoxItem>EaseOut</ComboBoxItem><ComboBoxItem>EaseInOut</ComboBoxItem></ComboBox></StackPanel></StackPanel><StackPanel Orientation="Horizontal" Margin="0 30 0 0"><StackPanel.Resources><Storyboard x:Name="storyboard"><!-- 用于演示緩動動畫的效果 --><DoubleAnimation x:Name="aniEasingDemo"Storyboard.TargetName="easingDemo"Storyboard.TargetProperty="(Canvas.Left)"Duration="0:0:3"RepeatBehavior="Forever"From="0"To="300" /><!-- 用一個球顯示緩動軌跡（X 軸代表時間） --><DoubleAnimation x:Name="aniBallX"Storyboard.TargetName="ball"Storyboard.TargetProperty="(Canvas.Left)"Duration="0:0:3"RepeatBehavior="Forever"From="0"To="100" /><!-- 用一個球顯示緩動軌跡（Y 軸代表當前時間點的緩動結果值） --><DoubleAnimation x:Name="aniBallY"Storyboard.TargetName="ball"Storyboard.TargetProperty="(Canvas.Top)"Duration="0:0:3"RepeatBehavior="Forever"From="0"To="100" /></Storyboard></StackPanel.Resources><StackPanel><Canvas Name="graphContainer" RenderTransformOrigin="0,0.5" Height="100" Width="100"><Canvas.RenderTransform><ScaleTransform ScaleY="-1" /></Canvas.RenderTransform><!-- 用于顯示緩動曲線 --><Canvas Name="graph" /><!-- 緩動曲線的 X 軸和 Y 軸 --><Line X1="0" Y1="0" X2="0" Y2="100" Stroke="Black" StrokeThickness="1" Width="1" Height="100" /><Line X1="0" Y1="0" X2="100" Y2="1" Stroke="Black" StrokeThickness="1" Width="100" Height="1" /><!-- 用一個球顯示緩動軌跡 --><Ellipse Name="ball" Fill="Orange" Width="5" Height="5" /></Canvas></StackPanel><StackPanel Margin="30 0 0 0"><Border BorderBrush="Black" BorderThickness="1"><Canvas Width="400" Height="100"><!-- 用于演示緩動動畫的效果 --><Rectangle Name="easingDemo" Width="100" Height="100" Fill="Blue" /></Canvas></Border></StackPanel></StackPanel></StackPanel></Grid> </Page>

Animation/EasingAnimation.xaml.cs

/** 演示緩動（easing）的應用* * WinRT 支持 11 種經典的緩動：* BackEase, BounceEase, CircleEase, CubicEase, ElasticEase, ExponentialEase, PowerEase, QuadraticEase, QuarticEase, QuinticEase, SineEase* * EasingMode 有 3 種：* EaseIn, EaseOut, EaseInOut*/using Windows.Foundation; using Windows.UI; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Media; using Windows.UI.Xaml.Media.Animation; using Windows.UI.Xaml.Shapes;namespace Windows10.Animation {public sealed partial class EasingAnimation : Page{public EasingAnimation(){this.InitializeComponent();this.Loaded += EasingAnimation_Loaded;}void EasingAnimation_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e){cboEasingFunction.SelectedIndex = 0;cboEasingMode.SelectedIndex = 0;}private void cboEasingFunction_SelectionChanged(object sender, SelectionChangedEventArgs e){EasingChanged();}private void cboEasingMode_SelectionChanged(object sender, SelectionChangedEventArgs e){EasingChanged();}private void EasingChanged(){if (cboEasingFunction.SelectedIndex == -1 || cboEasingMode.SelectedIndex == -1)return;storyboard.Stop();EasingFunctionBase easingFunction = null;// 確定 Easing Functionswitch ((cboEasingFunction.SelectedItem as ComboBoxItem).Content.ToString()){case "BackEase":// Amplitude - 幅度，必須大于等于 0，默認值 1easingFunction = new BackEase() { Amplitude = 1 };break;case "BounceEase":// Bounces - 彈跳次數，必須大于等于 0，默認值 3// Bounciness - 彈跳程度，必須是正數，默認值 2easingFunction = new BounceEase() { Bounces = 3, Bounciness = 2 };break;case "CircleEase":easingFunction = new CircleEase();break;case "CubicEase":easingFunction = new CubicEase();break;case "ElasticEase":// Oscillations - 來回滑動的次數，必須大于等于 0，默認值 3// Springiness - 彈簧的彈度，必須是正數，默認值 3easingFunction = new ElasticEase() { Oscillations = 3, Springiness = 3 };break;case "ExponentialEase":easingFunction = new ExponentialEase();break;case "PowerEase":easingFunction = new PowerEase();break;case "QuadraticEase":easingFunction = new QuadraticEase();break;case "QuarticEase":easingFunction = new QuarticEase();break;case "QuinticEase":easingFunction = new QuinticEase();break;case "SineEase":easingFunction = new SineEase();break;default:break;}// 確定 Easing Modeswitch ((cboEasingMode.SelectedItem as ComboBoxItem).Content.ToString()){case "EaseIn": // 漸進easingFunction.EasingMode = EasingMode.EaseIn;break;case "EaseOut": // 漸出（默認值）easingFunction.EasingMode = EasingMode.EaseOut;break;case "EaseInOut": // 前半段漸進，后半段漸出easingFunction.EasingMode = EasingMode.EaseInOut;break;default:break;}// 用于演示緩動效果aniEasingDemo.EasingFunction = easingFunction;// 用于演示緩動軌跡aniBallY.EasingFunction = easingFunction;// 畫出當前緩動的曲線圖 DrawEasingGraph(easingFunction);storyboard.Begin();}/// <summary>/// 繪制指定的 easing 的曲線圖/// </summary>private void DrawEasingGraph(EasingFunctionBase easingFunction){graph.Children.Clear();Path path = new Path();PathGeometry pathGeometry = new PathGeometry();PathFigure pathFigure = new PathFigure() { StartPoint = new Point(0, 0) };PathSegmentCollection pathSegmentCollection = new PathSegmentCollection();// 0 - 1 之間每隔 0.005 計算出一段 LineSegment，用于顯示此 0.005 時間段內的緩動曲線for (double i = 0; i < 1; i += 0.005){double x = i * graphContainer.Width;double y = easingFunction.Ease(i) * graphContainer.Height;LineSegment segment = new LineSegment();segment.Point = new Point(x, y);pathSegmentCollection.Add(segment);}pathFigure.Segments = pathSegmentCollection;pathGeometry.Figures.Add(pathFigure);path.Data = pathGeometry;path.Stroke = new SolidColorBrush(Colors.Black);path.StrokeThickness = 1;graph.Children.Add(path);}} }

OK
[源碼下載]

posted on 2017-09-21 09:50 NET未來之路 閱讀(...) 評論(...) 編輯 收藏

轉載于:https://www.cnblogs.com/lonelyxmas/p/7566969.html

總結

以上是生活随笔為你收集整理的背水一战 Windows 10 (15) - 动画: 缓动动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。