WPF：像 CSS 中那样使用三次贝塞尔曲线的缓动函数

Question

我的目标是在 WPF 中重现此鼠标悬停动画：
https://xaalek.w3spaces.com/saved-from-Tryit-2022-03-21-n3xl2.html?bypass-cache=74310593

目前我的代码中有这样的东西：

var doubleAnimation = new DoubleAnimation(1, new Duration(TimeSpan.FromMilliseconds(280)))
{
    FillBehavior = FillBehavior.HoldEnd,
    EasingFunction = new CubicEase()
};

但结果并不完美
是否可以像 CSS 中那样使用三次贝塞尔曲线创建自定义缓动？

transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1)

我看到我们可以通过继承创建自定义缓动函数 EasingFunctionBase

我需要指定曲线上点的坐标才能得到相同的结果。
https://cubic-bezier.com/#.4,0,.2,1

我可以像这样创建自定义缓动函数：

internal class MaterialEasingFunction : EasingFunctionBase
    {
        public MaterialEasingFunction()
            : base()
        {
            EasingMode = EasingMode.EaseInOut;
        }

        protected override double EaseInCore(double normalizedTime) => Math.Pow(normalizedTime, 3);

        protected override Freezable CreateInstanceCore() => new MaterialEasingFunction();

    }

但是我不知道如何指定曲线上点的坐标。

你知道我该怎么做吗？

Answer 1

我们可以在 DoubleAnimation 上使用 AccelerationRatio 和 DecelerationRatio 属性： https://docs.microsoft.com/fr-fr/dotnet/desktop/wpf/graphics-multimedia/how-to-accelerate-or-decelerate-an-animation?view=netframeworkdesktop-4.8

这是三次贝塞尔曲线的 CSS 语法：

cubic-bezier(x1,y1,x2,y2)

在这种情况下，我们只使用 x1 和 x2。
由于坐标是从0到1，所以我们可以用点的x-coordinates作为加减速比

这是最终结果：

var doubleAnimation = new DoubleAnimation()
{
    To = 1,
    Duration = new Duration(TimeSpan.FromMilliseconds(280)),
    FillBehavior = FillBehavior.HoldEnd,
    EasingFunction = new CubicEase(),
    AccelerationRatio = 0.4,
    DecelerationRatio = 0.2
};

WPF：像 CSS 中那样使用三次贝塞尔曲线的缓动函数

WPF : Easing Function with Cubic Bezier Curve like in CSS

c#

wpf

easing