完美的淡入淡出


25

我发现很难用语言来描述这个问题,这就是为什么我制作了一个视频(45秒)来说明它的原因。这是问题的预览,请在Vimeo上查看它:http : //vimeo.com/epologee/perfect-crossfade

使用线性淡入淡出后,生成的图像的透明度会降低。 我该如何预防?

在过去十年中,在许多领域中,我一直都在反复讨论如何创建完美的淡入淡出效果或溶解两个图像或形状的问题。首先是视频编辑,然后是Flash动画,现在是iOS编程。当您开始对其进行谷歌搜索时,可以找到许多解决方法,但是我这次真的想解决这个问题,而不会受到黑客的攻击。

摘要:
如果要使生成的透明度与任一原始位图相匹配,则在对两个半透明,同色位图进行交叉渐变时应用的技术或曲线的名称是什么?

是否存在(数学)函数来计算淡入淡出期间所需的部分透明度/ alpha值?

是否有编程具有这些功能为预设语言,类似ease inease outease in out在ActionScript或可可中发现的功能呢?

更新:除了视频,我还制作了一个示例项目(需要Xcode和iOS SDK)并将其发布在github上。它显示了与视频相同的动画,但是这次使用了正方形:https : //github.com/epologee/StackOverflow-Example-Code


7
对它一无所知,但视频+1。
sebastiangeiger

取决于over运算符的实现方式。参见en.wikipedia.org/wiki/Alpha_channel
artistoex 2011年

我同意,@ artistoex,这个操作员有些事,谢谢您的链接!但是,如果答案埋在某个地方,我不会看到:(
epologee

over运算符的数学表示得出一个方程。运算符上方的示例:C = alpha * c1 +(alpha-1)* c2得出alpha =(C + c2)/(c1 + c2)(C是混合两种颜色c1,c2的结果)。这意味着对于这个过度运算符,没有任何功能可以满足您的条件。
artistoex

对于C = alpha1 * c1 + alpha2 * c2(0 <= alpha1,alpha2 <= 1),存在这样的函数:alpha1 =(C-alpha2 * c2)/ c1。
artistoex

Answers:



3

我不知道视频编辑领域的名字是什么,但是我将曲线称为S曲线或S形曲线。使用Core Animation的kCAMediaTimingFunctionEaseInEaseOut计时功能在iOS中生成想要的淡入淡出应该非常简单。只需alpha使用该计时功能为两个方向相反的视图(一个0-> 1,一个1-> 0)设置动画:

[UIView beginAnimations:@"crossfade" context:nil];
[UIView setAnimationDuration:1.0];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
view1.alpha = 0.0;
view2.alpha = 1.0;
[UIView commitAnimations];

注意:您应该真正使用基于块的动画方法,而不是UIView的便捷方法。我在上面使用了UIView的方法,因为它很容易理解,并且很容易从内存中键入。但是,使用块并不困难。

附录:如果您不喜欢UIViewAnimationEaseInOut,则可以如Timing,Timespaces和CAAnimation中所述创建自己的计时函数。这比上面所示的简单动画要先进一些,但是它为您提供了所需的所有控件。


乙状结肠!谢谢,那已经很近了!您提供的代码无法立即生效,因为setAnimationCurve采用的参数不同于kCAMediaTimingFunctionEaseInEaseOut。你可以说UIViewAnimationCurveEaseInOut吗?但是,该曲线的问题是相同的(在中间倾斜),因为在任何时间点,简单加法中的两个alpha值都将相等1.0,而在我手动调整的曲线中,它需要超过1.0才能获得所需的结果。
epologee 2011年

我现在看到了...您对常量是正确的-我已经更新了答案中的代码。我还添加了指向文档的链接,该文档解释了如何创建自己的计时功能。
Caleb

我用块来制作动画,但要旨是一样的。内置曲线由于其对称性而仍然不适用,但是附录为自定义CAMediaTimingFunction铺平了道路,该功能与我在After Effects视频中使用的功能相匹配。令人不安的是,没有一种S形曲线适合每种情况,不同的不透明度起始水平将需要不同的贝塞尔曲线位置来摆脱“倾斜”。一定有我想念的东西。
epologee

@Caleb,您好,我在GitHub上发布了一个示例项目(请参阅帖子)。自定义时间很有用,但是如果您更改initialTransparency值,那就没有用了。您不知道下一步该怎么做?
epologee

2
还有一些帮助Google搜索的内容;图形程序员将您所说的图形称为“平滑步幅”。精通数学的程序员经常将其称为“埃尔姆特插值器”。一个不带三角函数的简单方程是:“ 3t ^ 2-2t ^ 3”。
特雷弗·鲍威尔

1

在计算机图形学中,这种功能称为smoothstep。当用于淡入淡出时,它确定合成的全局Alpha值。

如果输入图像具有Alpha通道,则应首先确保Alpha已预乘。然后,您可以使用alpha每个通道[ X = A*alpha + B*(1-alpha)] 上的平滑步长直接进行淡入淡出合成,并期望得到合理的结果。


0

您可以使用指数衰减函数:

Alpha1(time) = 1 - exp(-time / (0.2 * transitionTime)); // fade in
Alpha2(time) = 1 - Alpha1(time); // fade out

您的图看起来更像:

Alpha1(time) = sin(time * 0.5 * pi / transitionTime); // fade in
Alpha2(time) = cos(time * 0.5 * pi / transitionTime); // fade out

谢谢@丹尼。实际上,执行1 - Alpha1(time)方程式并不会解决倾角问题,因为两个混合的0.5 alpha图像不会生成1.0 alpha的合成图像。我绘制的自定义曲线未垂直镜像。
epologee

1
1-alpha用于指数衰减,我认为这更合适。对于正弦/余弦当然罪(T)= SQRT(1-SQR(COS(t))的功能,但是,分别计算每一个要快。
丹尼Varod

如果问题出在类似曲线的功能可能是什么样子,那么您的数学是正确的。但是,问题在于如何处理两种颜色的混合,例如,如何获得40%的蓝色+ 40%的蓝色以得到80%的蓝色。
epologee

这很容易做到,但是当总和> 100%时,将导致饱和度差。
Danny Varod 2011年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.