zoukankan      html  css  js  c++  java
  • Silverlight动画之 Animation Easing

    使用Animation Easing函数可以创造出更具有动感的动画。对比下面两个动画。

    普通线性动画:

    <Storyboard x:Name="growStoryboard">
    <DoubleAnimation
    Storyboard.TargetName="cmdGrow" Storyboard.TargetProperty="Width"
    To="400" Duration="0:0:1.5"></DoubleAnimation>
    </Storyboard>

    使用Easing Function:

    <Storyboard x:Name="growStoryboard">
    <DoubleAnimation
    Storyboard.TargetName="cmdGrow" Storyboard.TargetProperty="Width"
    To="400" Duration="0:0:1.5">
    <DoubleAnimation.EasingFunction>
    <ElasticEase EasingMode="EaseOut" Oscillations="5"></ElasticEase>
    </DoubleAnimation.EasingFunction>
    </DoubleAnimation>
    </Storyboard>

    通过VS写下这段代码并运行,你就知道加了Easing Function后与之前的显著差别。使用Easing Function,可以让我们很简单的创建效果复杂的动画。

    每一个Easing Function都继承自EasingFunctionBase并实现EasingMode。EasingMode有三个值:EaseIn,EaseOut和EaseInOut。

    EaseOut变化曲线图:

    EaseIn变化曲线图:

    Silverlight提供了11种easing functions

    • BackEase
    • ElasticEase
    • BounceEase
    • CircleEase
    • CubicEase
    • QuadraticEase
    • QuarticEase
    • QuinticEase
    • SineEase
    • PowerEase
    • ExponentialEase

     下图是六种比较常用的easing functions曲线变化图:

  • 相关阅读:
    C3线性化
    fingerprint for the ECDSA key
    tmp
    线性筛(欧拉筛)
    tmp
    tmp
    Micro Frontends 微前端
    TreeFrog Framework : High-speed C++ MVC Framework for Web Application http://www.treefrogframework.org
    消息同屏转发
    web-linux-shell实现 阿里方案canvas+wss。
  • 原文地址:https://www.cnblogs.com/Gyoung/p/3655464.html
Copyright © 2011-2022 走看看