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

Question

我的目标是通过WPF中的动画复制这款鼠标：

目前我在代码中有类似的东西：

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

但是结果并不完美。

是否可以像CSS一样使用Cutic Bezier曲线创建自定义缓解？

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

我看到我们可以通过继承来创建自定义宽松功能 easingFunctionBase

我需要指定曲线上的点坐标以获得相同的结果。
https://cubic-bezier.com/#.4,0,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

我们可以使用 AccelerationRatio 和减速> doublemeyimation ：
https://lealen.microsoft.com/fr-fr/dotnet/desktop/wpf/wpf/graphics-multimedia/how-te-te-te-te-te-te-te-te-te-te-te-te-te-te-te-te-te-te-te-te-te-te-te-te-te-te-te-te-te-te-te-te-te-te-te-te-t-te-cel---------------------------------- /a>

这是Cupic Bezier的CSS语法：

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

在这种情况下，我们仅使用 x1 和 x2 。
由于坐标从0到1，我们可以将点的X配音用作加速度和减速比率，

这是最终结果：

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