如何为离线渲染创建贝塞尔/立方简化动画？

Question

我必须为离线计算的元素的 alpha 设置动画。让我们谈谈简单的 alpha 动画。 alpha 为零，alpha 增长到 1，停留一段时间又回到零。

如下图所示：

动画会有不同的时间。我需要一些可以给出时间（t）并获得值（v）的东西。

这个动画将被放在一个基于CIFilter的类中，并用于为该过滤器设置动画，因为这个过滤器的结果将离线计算，所以没有CALayer可以添加它，所以使用CAKeyframeAnimation或CABasicAnimation 是不可能的。

如果我可以使用 CALayer，我会这样做：

CABasicAnimation* fadeInOut = [CABasicAnimation animation];
fadeInOut.keyPath = @"filters.myFilter.inputRadius";
fadeInOut.fromValue = @(0);
fadeInOut.toValue = @(10);
fadeInOut.duration = 0.2f;
fadeInOut.timingFunction = [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseInEaseOut];
fadeInOut.autoreverses = YES;

但问题是这条线......没有添加动画的图层。就像我说的，我在 CIFilter 班级里！

[self.layer addAnimation:fadeInOut forKey:nil]; // NO WAY!

所以，我的问题是：在我为动画定义的时间间隔内，有什么东西可以给我这种曲线的时间值吗？

Answer 1

您正在继承 CIFilter 并制作动画...我想这意味着您的过滤器类需要一个时间参数，并根据该参数改变其结果？

如果是这样，您可以考虑两个选项。两者都依赖于这样一个事实，即您所需的时序曲线看起来像一条“缓入缓出”的 S 曲线，然后是该曲线的反向曲线。

1. 如果您正在编写 CI 内核语言代码来实现过滤器的效果，您可以使用 the smoothstep function 根据您的时间参数进行插值（该函数由 GLSL 定义，并且 CI 内核语言是 GLSL 的超集，除了 @ 987654322@. 由于你有双 S 曲线，你需要做两次：

   // pseudo CI Kernel source:
   effect = smoothstep(0, 0.5, time) - smoothstep(0.5, 1, time)
   

1234563许多图形库。 （或者您可以大致了解Hermite interpolation 并使用您自己的平滑函数疯狂。）然后使用您的函数根据您的时间参数更改内部过滤器的输入。