AI导航网
微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

稳扎稳打Silverlight(37) - 3.0动画之Easing缓动效果

分类：Silverlight作者：编程之家
[索引页]
[源码下载]


稳扎稳打Silverlight(37) - 3.0动画之Easing（缓动效果）


作者：webabcd


介绍
Silverlight 3.0 动画的缓动效果：
    @H_502_23@Easing 可以与 Storyboard 结合实现动画的缓动效果 @H_502_23@Silverlight 3 内置 11 种缓动效果：分别为BackEase,BounceEase,CircleEase,CubicEase,ElasticEase,ExponentialEase,PowerEase,QuadraticEase,QuarticEase,QuinticEase,SineEase @H_502_23@各个缓动类都继承自 EasingFunctionBase，除了 EasingFunctionBase 提供的功能外，各个缓动类可能还会有各自的属性（懒的写了，查文档吧）  @H_502_23@EasingFunctionBase 有一个用于设置缓动模式的枚举类型属性 EasingMode （EasingMode.EaSEOut(默认值),EasingMode.EaseIn,EasingMode.EaseInOut）


在线DEMO
http://www.voidcn.com/article/p-boakcggz-tq.html


示例
1、Silverlight 3.0 内置的 11 种缓动效果的 Demo
Easing.xaml
<navigation:Page x:Class="Silverlight30.Animation.Easing"    
                     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    
                     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                     mc:Ignorable="d"
                     xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
                     d:DesignWidth="640" d:DesignHeight="480"
                     Title="Easing Page">
        <Grid x:Name="LayoutRoot">
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">

                        <!--用于显示各种 Easing 的图例列表-->
                        <StackPanel Margin="10">
                                <ListBox x:Name="lstEasing">
                                        <ListBox.ItemTemplate>
                                                <DataTemplate>
                                                        <StackPanel Margin="1">
                                                                <TextBlock Text="{Binding EasingName}" />
                                                                <Image Source="{Binding PicAddress}" Width="300" Height="50" />
                                                        </StackPanel>
                                                </DataTemplate>
                                        </ListBox.ItemTemplate>
                                </ListBox>
                        </StackPanel>

                        <StackPanel Margin="10,200">
                        
                                <!--分别用 3 种动画来演示各类 Easing-->
                                <ComboBox x:Name="cboTransform" Margin="5">
                                        <ComboBoxItem Content="Translate" IsSelected="True" />
                                        <ComboBoxItem Content="Rotate" />
                                        <ComboBoxItem Content="Scale" />
                                </ComboBox>
                                
                                <!--用各种 EasingMode 分别做演示-->
                                <ComboBox x:Name="cboEasingMode" Margin="5">
                                        <ComboBoxItem Content="EaSEOut" IsSelected="True" />
                                        <ComboBoxItem Content="EaseIn" />
                                        <ComboBoxItem Content="EaseInOut" />
                                </ComboBox>

                                <Button x:Name="btnShow" Content="演示" Click="btnShow_Click" Margin="5" />

                                <!--用于做动画演示的矩形-->
                                <Rectangle x:Name="rect" Fill="Blue" Width="200" Height="40" Margin="5" RenderTransformOrigin="0.5,0.5">
                                        <Rectangle.RenderTransform>
                                                <TransformGroup>
                                                        <TranslateTransform x:Name="tt" X="0" Y="0" />
                                                        <RotateTransform x:Name="rt" Angle="0" />
                                                        <ScaleTransform x:Name="st" ScaleX="1" ScaleY="1" />
                                                </TransformGroup>
                                        </Rectangle.RenderTransform>
                                </Rectangle>

                        </StackPanel>
                </StackPanel>
        </Grid>
</navigation:Page>
 
Easing.xaml.cs

/*

* Easing - 与 Storyboard 结合实现动画的缓动效果

* Silverlight 3 内置 11 种缓动效果：分别为BackEase,SineEase

* 各个缓动类都继承自 EasingFunctionBase，除了 EasingFunctionBase 提供的功能外，各个缓动类可能还会有各自的属性（懒的写了，查文档吧）

* EasingFunctionBase 有一个用于设置缓动模式的枚举类型属性 EasingMode （EasingMode.EaSEOut(默认值),EasingMode.EaseInOut）

*/


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 System.Windows.Navigation;


using Silverlight30.Model;

using System.Xml.Linq;


namespace Silverlight30.Animation

{

         public partial class Easing : Page

        {

                 public Easing()

                {

                        InitializeComponent();


                         this.Loaded += new RoutedEventHandler(Easing_Loaded);

                }


                 // 绑定各种 Easing 的图例列表

                 void Easing_Loaded( object sender,RoutedEventArgs e)

                {

                        XElement root = XElement.Load( "Animation/Easing.xml");

                        var easings = from n in root.Elements( "easing")

                                                    select new EasingModel

                                                    {

                                                            EasingName = ( string)n.Attribute( "EasingName"),

                                                            Description = ( string)n.Attribute( "Description"),

                                                            PicAddress = ( string)n.Attribute( "PicAddress")

                                                    };


                        lstEasing.ItemsSource = easings;

                        lstEasing.Selectedindex = 0;

                }


                 private Storyboard _prevStoryboard;


                 private void btnShow_Click( object sender,RoutedEventArgs e)

                {

                         if (_prevStoryboard != null)

                                _prevStoryboard.Stop();


                         // 实例化用户所选择的 Easing

                        Type type = typeof(EasingFunctionBase).Assembly.GetType( "System.Windows.Media.Animation." + ((EasingModel)lstEasing.SelectedItem).EasingName,false);

                        EasingFunctionBase easing = Activator.CreateInstance(type) as EasingFunctionBase;


                         // 根据用户的选择，设置 Easing 的 EasingMode 属性

                        easing.EasingMode = (EasingMode)Enum.Parse( typeof(EasingMode),((ComboBoxItem)cboEasingMode.SelectedItem).Content.ToString(),true);


                        Storyboard sb = new Storyboard();

                        _prevStoryboard = sb;


                        var transformType = ((ComboBoxItem)cboTransform.SelectedItem).Content.ToString();

                         switch (transformType)

                        {

                                 // 位移动画结合 Easing 的演示

                                 case "Translate":

                                        DoubleAnimation daTranslateY = new DoubleAnimation();

                                        daTranslateY.From = 0 ;

                                        daTranslateY.To = 200;

                                        daTranslateY.Duration = TimeSpan.FromSeconds(3);


                                        daTranslateY.EasingFunction = easing;


                                        Storyboard.SetTargetProperty(daTranslateY,new PropertyPath( "Y"));

                                        Storyboard.SetTarget(daTranslateY,tt);


                                        sb.Children.Add(daTranslateY);


                                         break;

                                 // 缩放动画结合 Easing 的演示

                                 case "Scale":

                                        DoubleAnimation daScaleX = new DoubleAnimation();

                                        daScaleX.From = 1;

                                        daScaleX.To = 2;

                                        daScaleX.Duration = TimeSpan.FromSeconds(3);


                                        DoubleAnimation daScaleY = new DoubleAnimation();

                                        daScaleY.From = 1;

                                        daScaleY.To = 2;

                                        daScaleY.Duration = TimeSpan.FromSeconds(3);


                                        daScaleX.EasingFunction = easing;

                                        daScaleY.EasingFunction = easing;


                                        Storyboard.SetTargetProperty(daScaleX,new PropertyPath( "ScaleX"));

                                        Storyboard.SetTarget(daScaleX,st);

                                        Storyboard.SetTargetProperty(daScaleY,new PropertyPath( "ScaleY"));

                                        Storyboard.SetTarget(daScaleY,st);


                                        sb.Children.Add(daScaleX);

                                        sb.Children.Add(daScaleY);


                                         break;

                                 // 旋转动画结合 Easing 的演示

                                 case "Rotate":

                                        DoubleAnimation daAngle = new DoubleAnimation();

                                        daAngle.To = 0;

                                        daAngle.To = 360;

                                        daAngle.Duration = TimeSpan.FromSeconds(3);


                                        daAngle.EasingFunction = easing;


                                        Storyboard.SetTargetProperty(daAngle,new PropertyPath( "Angle"));

                                        Storyboard.SetTarget(daAngle,rt);


                                        sb.Children.Add(daAngle);


                                         break;

                        }

        

                        sb.Begin();

                }

        }

}
 
 
2、自定义缓动效果的 Demo
MyCustomEasing.cs

using System;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Ink;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;


namespace Silverlight30.Animation

{

         /// <summary>

         /// 自定义缓动效果

         /// </summary>

         public class MyCustomEasing : EasingFunctionBase

        {

                 public MyCustomEasing()

                        : base()

                {

    

                }


                 /// <summary>

                 /// 实现 EaseIn 模式下的逻辑

                 /// EaSEOut 和 EaseInOut 会自动实现

                 /// </summary>

                 /// <param name="normalizedTime">标准时间位（0 - 1之间）。即 动画运行到此的时间 占 动画运行所需的全部时间 的百分比</param>

                 /// <returns></returns>

                 protected override double EaseInCore( double normalizedTime)

                {

                         // QuinticEase 效果的实现算法


                         // 假定动画运行的总共时间为 1 秒

                         // 那么当 normalizedTime 为 0.1 时，动画运行到的位置为无该缓动效果时，0.00001秒后的位置。以此类推

                         return Math.Pow(normalizedTime,5);

                }

        }

}
 
CustomEasing.xaml
<navigation:Page x:Class="Silverlight30.Animation.CustomEasing"    
                     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    
                     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                     mc:Ignorable="d"
                     xmlns:custom="clr-namespace:Silverlight30.Animation"
                     xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
                     d:DesignWidth="640" d:DesignHeight="480"
                     Title="CustomEasing Page">
        <Grid x:Name="LayoutRoot">
                <StackPanel>
                
                        <StackPanel.Resources>
                                <Storyboard x:Name="ani">
                                        <DoubleAnimation    
                                                Storyboard.TargetName="tt"
                                                Storyboard.TargetProperty="Y"
                                                From="0"    
                                                To="200"    
                                                Duration="00:00:03"
                                        >
                                                <DoubleAnimation.EasingFunction>
                                                        <!--使用自定义的缓动效果-->
                                                        <custom:MyCustomEasing EasingMode="EaSEOut" />
                                                </DoubleAnimation.EasingFunction>
                                        </DoubleAnimation>
                                </Storyboard>
                        </StackPanel.Resources>

                        <Button x:Name="btnShow" Content="演示" Margin="5" Click="btnShow_Click" />

                        <Rectangle x:Name="rect" Fill="Blue" Width="200" Height="40" Margin="5" RenderTransformOrigin="0.5,0.5">
                                <Rectangle.RenderTransform>
                                        <TransformGroup>
                                                <TranslateTransform x:Name="tt" X="0" Y="0" />
                                        </TransformGroup>
                                </Rectangle.RenderTransform>
                        </Rectangle>
                        
                </StackPanel>
        </Grid>
</navigation:Page>
 
CustomEasing.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 System.Windows.Navigation;


namespace Silverlight30.Animation

{

         public partial class CustomEasing : Page

        {

                 public CustomEasing()

                {

                        InitializeComponent();

                }


                 private void btnShow_Click( object sender,RoutedEventArgs e)

                {

                        ani.Begin();

                }

        }

}
 

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。

相关推荐

c# – 如何在Silverlight 4中绑定ContextMenu的IsEnabled属性？
如何在Silverlight4(XAML)中绑定IsEnabled属性？我试过简单的IsEnabled=“{BindingABC}”,但这不起作用–MenuItem总是启用.提前感谢您的线索！干杯编辑：有趣的是,当设置Mode=TwoWay时,绑定似乎有效.但是,在菜单项上...
c# – 使用Silverlight / windows手机式控件设置我的.Net桌面应用程序GUI
我正在编写我的第一个vb.net应用程序(但我也会在这里标记c#,因为我确信即使是一个c#人也可以使用类似的.net实现来回答这个问题).我申请的简短说明：我的桌面应用程序将仅在win平台上运行,使用vb.net,它是一个简单的网...
c# – Silverlight：将服务调用和文件处理移动到后台线程
ProcessFile()是在UIThread上运行还是在单独的线程上运行.如果它在UIThread上,如何将文件请求和ProcessFile()移动到单独的线程？varxClient=newServiceReference1.Service1SoapClient();xClient.Retrieve_File_Compl...
c# – 如何从ASP.NET / Silverlight开发人员成为sharepoint开发人员？
我从同行那里听说,对sharepoint的了解对职业生涯有益.我们不在办公室使用sharepoint.所以不知道如何开始.这些是我的新手问题>学习共享点值得努力吗？>学习sharepoint的资源在哪里？>我是否应该考虑开发哪些...
c# – Windows Phone 8 – 将列表保存到IsolatedStorage
我正在尝试保存一个类我的类对象的集合.我收到一个错误说明：Thecollectiondatacontracttype‘System.Collections.Generic.Listcannotbedeserializedbecauseitdoesnothaveapublicparameterlessconstructor.Addingapu...
c# – 在XAML中使用绑定设置样式
我需要根据Silverlight中的某些配置值设置给定控件的Style.我想有可能从两种可用的样式(静态资源)中选择一个控件样式.我试图做一些像：<TextBoxStyle="{BindingABC}"/>哪里publicstringABC{get{retu...
Android设备上的Silverlight / Moonlight
我刚买了第一台Android设备,我喜欢它…我也很喜欢你可以创建自己的应用程序并随意分发它们.我已经阅读了一些关于Monodroid的内容,而且显然微软希望将Silverlight放在这些设备上,尽管没有太多关于它们的信息……但是M...
c# – 从silverlight应用程序访问SQL Server数据库
我们的ASP.NET网站允许用户执行各种查询,并根据从数据库查询的结果显示网络图(如UML图).目前,我们正在生成一个位图并显示它.但由于我们需要支持允许用户以交互方式显示/隐藏某些块的功能,因此我们计划使用Silverligh...
c# – 自定义Silverlight启动画面导致白屏死机
我正在开发一个Silverlight4应用程序,我已经创建了一个自定义的启动画面.乍一看,自定义启动画面运行良好–非常好.几天后,我开始注意到闪屏不再显示,屏幕仍然是空白.这似乎只发生在我打开多个指向同一个应用程序的IE选...
c# – 使用带偏移的RotateTransform问题旋转图像
这是我的XAML：<ImageVerticalAlignment="Center"HorizontalAlignment="Center"Source="{BindingInput,Converter={StaticResourceByteArrayToBitmapConverter}}"><Image.Ren...
    pythonJavaScriptjavaHTMLreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-bootreact-native