UWP弹簧动画

为什么要使用弹簧?
弹簧是一种常见的运动体验,我们都曾经在生活中经历过;从螺旋弹簧玩具到包含弹簧块的物理教室体验。 弹簧的运动不稳定,这通常会为观察它的人带来有趣而令人愉快的情绪反应。 因此,对于那些渴求创建更为生动的运动体验的人来说,弹簧的运动在应用程序 UI 中得到了很好的运用:“弹出”给最终用户,而不是传统的贝塞尔曲线。 在这些情况下,弹簧运动不仅能产生更为生动的运动体验,还能帮助吸引人们注意新的或目前正在显示动画效果的内容。 根据应用程序的品牌或运动语言,弹簧的振荡更加显然而显眼,但在其他情况下,它的运动不明显。

定义一个绿色的圆 给它一个点击事件

<Ellipse x:Name="green_Ellipse" Height="100" Width="100" Fill="Green" PointerPressed="green_Ellipse_PointerPressed"/>
 private void green_Ellipse_PointerPressed(object sender, PointerRoutedEventArgs e)
        {
            //获取到绿色圆的可视化层
            Visual greenVisual= ElementCompositionPreview.GetElementVisual(green_Ellipse);
            greenVisual.Offset = new Vector3(1000, 300, 0);
            //创建弹簧动画
            var springAnimation = greenVisual.Compositor.CreateSpringVector3Animation();
            springAnimation.DampingRatio = 0.3f;
            springAnimation.Period = TimeSpan.FromSeconds(0.1);
            //springAnimation.DelayTime = TimeSpan.FromSeconds(1);
            springAnimation.InitialValue = new Vector3(1000, 0, 0);
            springAnimation.FinalValue = new Vector3(1000, 500, 0);
            //开始动画
            greenVisual.StartAnimation("Offset", springAnimation);
        }

DampingRatio – 表示在动画中使用的弹簧运动的阻尼级别
DampingRatio = 0 Undamped – 弹簧将振荡很长时间
0 < DampingRatio < 1 Underdamped – 弹簧将由少变多增加振荡幅度。
DampingRatio = 1 Criticallydamped – 弹簧不会振荡。
DampingRation > 1 Overdamped – 弹簧将通过突然减速而不振荡快速到达其目的地
Period – 弹簧执行单次振荡所花费的时间。
Final/Starting Value – 定义弹簧运动的开始和结束位置(如果未定义,则开始值和/或最终值将是当前值)。
Initial Velocity 运动的编程初始速度。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值