2016-07-21 2 views
0

私のアプリケーションは、アルファ値を調整することによって、さまざまなメディアレイヤーとテキストレイヤーの間でフェードします。しかし、リニア・クロスフェードを使用すると、輝度が途中で「ディップ」してからフェード・バックするように見えます。いくつかの検索の後、私はthis answerが問題を説明しているのを見つけましたが、私が使用しているレイヤーのほとんどがすでに透過性を含んでいるので、一度に1つのレイヤーしかフェードアウトしません。滑らかなアルファクロスフェードのためのアルゴリズム?

Here's an example of the issue I'm having, in HTML/CSS (code below because SO requires it

<style> 
body, html { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    background-color: black; 
} 

.example { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    opacity: 0; 
} 

#example1 { 
    background-color: red; 
    animation: 1s linear 0s fade infinite alternate; 
} 

#example2 { 
    background-color: red; 
    animation: 1s linear 1s fade infinite alternate; 
} 

@keyframes fade { 
    from {opacity: 0;} 
    to {opacity: 1;} 
} 
</style> 


<div id="example1" class="example"></div> 
<div id="example2" class="example"></div> 

2つのdivは、その不透明度を元に戻して消えて、全体の赤色のイメージが残ります。代わりに、それは明るさに浸るように見えます。

alphaを使用して滑らかなクロスフェードを作成するためのアルゴリズムまたは式は何ですか? OpenGLを使用しています。 (HTML/CSSスニペットは、問題を実証する最も簡単な方法でした)。

+0

透明領域をどのように表示しますか?それはあなたが調和する必要がある色です。それとももっと良い。また、アルファチャンネルをブレンドします。 –

+0

透明領域のアルファは0に設定されています。アルファチャネルのみを調整します。他のものは調整しません。 –

+0

ブレンド機能に 'GL_CONSTANT_ALPHA'と' GL_ONE_MINUS_CONSTANT_ALPHA'を使いたいかもしれません。 'glBlendColor'でフェード時間を指定します。 –

答えて

1

申し訳ありませんが、できません。

まず、希望する式がhereと定義されています。私は他の用語でそれをここにコピーします:

outputColor = overAlpha * overColor + (1 - overAlpha) * underColor 

私が正しくあなたの質問を理解していれば、あなたはアルファ移行のための定期的な機能f(t)を探しているように:

1 = f(t - 1) + (1 - f(t)) * f(t - 1) = f(t - 1) + f(t) - f(t - 1) * f(t) 

のみ機能その式を満たす少なくともaccording to wolfram alphaは定数1です。最初にゼロにして無限にループさせたい場合は動作しません。

定期的な機能を必要としない限り、あなたのフェードをちょっとしたものにしたいのでない限り。上にリンクされた方程式。

+0

説明をいただきありがとうございます。アニメーションにCSSを使用するような立方体のベジェタイミング関数を使用しましたが、私の目的には十分に見えます。 –

関連する問題