背水一战 Windows 10 (15) - 动画: 缓动动画

原文:背水一战 Windows 10 (15) - 动画: 缓动动画

[源码下载]

背水一战 Windows 10 (15) - 动画: 缓动动画

作者:webabcd

介绍
背水一战 Windows 10 之 动画

  • 缓动动画 - easing

示例
演示缓动(easing)的应用
Animation/EasingAnimation.xaml

<Page
    x: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 Function
            switch ((cboEasingFunction.SelectedItem as ComboBoxItem).Content.ToString())
            {
                case "BackEase":
                    // Amplitude - 幅度,必须大于等于 0,默认值 1
                    easingFunction = new BackEase() { Amplitude = 1 };
                    break;
                case "BounceEase":
                    // Bounces - 弹跳次数,必须大于等于 0,默认值 3
                    // Bounciness - 弹跳程度,必须是正数,默认值 2
                    easingFunction = 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 - 弹簧的弹度,必须是正数,默认值 3
                    easingFunction = 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 Mode
            switch ((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
[源码下载]

时间: 2017-09-21

背水一战 Windows 10 (15) - 动画: 缓动动画的相关文章

重新想象 Windows 8 Store Apps (19) - 动画: 线性动画, 关键帧动画, 缓动动画

原文:重新想象 Windows 8 Store Apps (19) - 动画: 线性动画, 关键帧动画, 缓动动画 [源码下载] 重新想象 Windows 8 Store Apps (19) - 动画: 线性动画, 关键帧动画, 缓动动画 作者:webabcd 介绍重新想象 Windows 8 Store Apps 之 动画 线性动画 - 共有 3 种: ColorAnimation, DoubleAnimation, PointAnimation, 它们均继承自 Timeline 关键帧动画

Windows 8 Store Apps学习(19) 动画 线性动画, 关键帧动画, 缓动动画

介绍 重新想象 Windows 8 Store Apps 之 动画 线性动画 - 共有 3 种: ColorAnimation, DoubleAnimation, PointAnimation, 它们均继承自 Timeline 关键帧动画 - 共有 4 种:ColorAnimationUsingKeyFrames, DoubleAnimationUsingKeyFrames, PointAnimationUsingKeyFrames, ObjectAnimationUsingKeyFrames

WPF界面设计技巧(7)—模拟电梯升降的缓动动画

原文:WPF界面设计技巧(7)-模拟电梯升降的缓动动画     如同Flash一样,WPF的亮点之一也在于其擅于表现平滑的动画效果,但以移动动画来说,仅凭简单的起始位置.目标位置,所产生的动画仍会非常生硬,这种动画忽略了移动开始时的加速过程与移动结束时的减速过程.   WPF在关键帧动画中提供了样条内插(Spline)型的关键帧,用以控制变化的速率曲线,但这东西实在有些复杂,且不够形象化,我研究很久也没明白如何实现"缓入--缓出"的效果,随后我从一本经典牛X却鲜有人知的过时的Flash

背水一战 Windows 10 (14) - 动画: 线性动画, 关键帧动画

原文:背水一战 Windows 10 (14) - 动画: 线性动画, 关键帧动画 [源码下载] 背水一战 Windows 10 (14) - 动画: 线性动画, 关键帧动画 作者:webabcd 介绍背水一战 Windows 10 之 动画 线性动画 - ColorAnimation, DoubleAnimation, PointAnimation 关键帧动画 - ColorAnimationUsingKeyFrames, DoubleAnimationUsingKeyFrames, Poin

背水一战 Windows 10 (42) - 控件(导航类): Frame 动画

原文:背水一战 Windows 10 (42) - 控件(导航类): Frame 动画 [源码下载] 背水一战 Windows 10 (42) - 控件(导航类): Frame 动画 作者:webabcd 介绍背水一战 Windows 10 之 控件(导航类) Frame 动画 示例Animation/NavigationTransitionInfo/Demo.xaml <Page x:Class="Windows10.Animation.NavigationTransitionInfo.

Windows Phone开发(42):缓动动画

原文:Windows Phone开发(42):缓动动画 前面在讨论关键帧动画的时候,我有意把几个带缓动动画的关键帧动画忽略掉,如EasingColorKeyFrame.EasingDoubleKeyFrame和EasingPointKeyFrame,其实为数不多,就这么几个.因为我希统一放到这节课程来吹一下缓动函数. 所谓缓动函数,就是我们在代数里面说的函数,说白了嘛,就是根特定的函数规则,用输入的值算出最终值,使得动画在两个关键帧之间不再是均衡过度,而是带有加/减速或其他效果,当然,还要取决于

背水一战 Windows 10 (16) - 动画: ThemeAnimation(主题动画)

原文:背水一战 Windows 10 (16) - 动画: ThemeAnimation(主题动画) [源码下载] 背水一战 Windows 10 (16) - 动画: ThemeAnimation(主题动画) 作者:webabcd 介绍背水一战 Windows 10 之 动画 PopInThemeAnimation - 控件出现时的动画 PopOutThemeAnimation - 控件消失时的动画 FadeInThemeAnimation - 控件淡入的动画 FadeOutThemeAnim

jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween_jquery

在jQuery内部函数Animation中调用到了createTweens()来创建缓动动画组,创建完成后的结果为: 可以看到上面的缓动动画组有四个原子动画组成.每一个原子动画的信息都包含在里面了. 仔细查看createTweens函数,实际上就是遍历调用了tweeners ["*"]的数组中的函数(实际上就只有一个元素). function createTweens( animation, props ) { jQuery.each( props, function( prop, v

背水一战 Windows 10 (4) - UI: 多窗口

原文:背水一战 Windows 10 (4) - UI: 多窗口 [源码下载] 背水一战 Windows 10 (4) - UI: 多窗口 作者:webabcd 介绍背水一战 Windows 10 之 UI 多窗口 示例1.自定义帮助类,用于简化 SecondaryView 的管理UI/MultipleViews/SecondaryViewHelper.cs /* * SecondaryViewHelper - 自定义的一个帮助类,用于简化 SecondaryView 的管理 */ using