완벽한 크로스 페이드


25

이 문제를 말로 표현하기가 어렵 기 때문에이를 설명하기 위해 비디오 (45 초)를 만들었습니다. 다음은 질문에 대한 미리보기입니다. Vimeo에서 확인하십시오 : http://vimeo.com/epologee/perfect-crossfade

선형 크로스 페이드를 사용하면 결과 이미지의 투명도가 '딥'됩니다.  이 문제를 어떻게 방지 할 수 있습니까?

완벽한 크로스 페이드 (crossfade)를 만들거나 두 이미지 또는 모양의 디졸브 (dissolve) 문제는 지난 10 년 동안 여러 분야에서 반복적으로 발생하고 있습니다. 비디오 편집, 플래시 애니메이션 및 iOS 프로그래밍에서 처음입니다. 인터넷 검색을 시작하면 많은 해결 방법이 있지만 이번에는 해킹 없이이 문제를 해결하고 싶습니다.

요약 :
결과 투명도가 어느 하나의 원본과 일치하도록하려면 두 개의 반투명 한 동일한 색상의 비트 맵을 크로스 페이딩 할 때 적용 할 기술 또는 곡선의 이름은 무엇입니까?

페이드 중에 필요한 부분 투명도 / 알파 값을 계산하는 (수학적) 함수가 있습니까?

받는 유사한 사전 설정으로이 기능이 언어가 프로그래밍하고 ease in, ease out또는 ease in out액션 또는 코코아에서 발견 된 기능을?

업데이트 : 비디오 외에도 샘플 프로젝트 (Xcode 및 iOS SDK 필요)를 만들어 github에 게시했습니다. 비디오와 동일한 애니메이션을 표시하지만 이번에는 사각형으로 표시됩니다. https://github.com/epologee/StackOverflow-Example-Code


7
동영상에 대해 +1 외에는 아무것도 모릅니다.
sebastiangeiger

오버 연산자가 구현되는 방법에 따라 다릅니다. 참조 en.wikipedia.org/wiki/Alpha_channel
artistoex

@artistoex에 동의합니다. 링크에 대해 감사드립니다. 그러나 대답이 어딘가에 묻혀 있으면 그것을 보지 못합니다. (
epologee

오버 연산자의 수학적 표현은 방정식으로 이어집니다. 연산자에 대한 예 : 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

답변:


3

나는 그것이 불가능하다는 것을 두려워합니다. 이것은 두 객체가 오버레이 될 때 투명도가 계산되는 방식입니다. http://en.wikipedia.org/wiki/Alpha_compositing

알파 합성

오버레이 영역을 보지 않으려면 객체 중 하나의 불투명도가 1이어야합니다.


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습니까? 그 곡선의 문제는 동일하지만 (중간에 딥) 어떤 시점에서 간단한 덧셈의 두 알파 값이 같을 것 1.0입니다. 수동으로 조정 된 곡선에서와 같이 1.0원하는 결과를 얻으려면 초과해야 합니다. .
epologee

나는 지금 본다 ... 당신은 상수에 대해 옳다-나는 대답에서 코드를 업데이트했다. 또한 자신 만의 타이밍 함수를 만드는 방법을 설명하는 문서 링크를 추가했습니다.
Caleb

블록으로 애니메이션을 만들지 만 요지는 같습니다. 내장 곡선은 대칭으로 인해 여전히 적용되지 않지만 부록은 After Effects 비디오에서 사용한 것과 일치하는 사용자 지정 CAMediaTimingFunction으로 향했습니다. 문제는 모든 시나리오에 맞는 하나의 S 자형 곡선없다는 것 입니다. 불투명도의 시작 레벨이 다르면 '딥'을 제거하기 위해 다른 베 지어 위치가 필요합니다. 내가 빠진 것이 있어야합니다.
epologee

안녕하세요 @ Caleb, GitHub에 샘플 프로젝트를 게시했습니다 (게시물 참조). 사용자 정의 타이밍이 도움이되지만 initialTransparency값 을 변경하면 아무 소용이 없습니다. 다음에 무엇을 시도 해야할지 실마리가 없습니까?
epologee

2
Google 검색에 도움이되는 몇 가지 추가 정보 그래픽 프로그래머는 당신이 말하는 "평활 한 단계"라는 그래프를 호출합니다. 고도로 숙련 된 프로그래머는 종종 이것을 "Hermite Interpolator"라고 부릅니다. 삼각법이없는 것을 계산하는 간단한 방정식은 "3t ^ 2-2t ^ 3"입니다.
트레버 파월

1

컴퓨터 그래픽에서 이러한 종류의 기능을 부드러운 단계 라고 합니다. . 크로스 페이드로 사용될 때 컴포지션의 글로벌 알파 값을 결정합니다.

입력 이미지에 알파 채널이있는 경우 먼저 알파에 미리 곱 해야합니다 . 그런 다음 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 알파 이미지 2 개가 1.0 알파의 합성 이미지를 생성하지 않기 때문입니다. 내가 그린 커스텀 커브는 수직으로 미러링되지 않습니다.
epologee

1
1- 알파는 지수 붕괴에 대한 것이며, 더 적합하다고 생각합니다. 죄 들어 / 코스 죄 (t) = SQRT (1 SQR (COS (t))의 함수 왜냐하면 그러나, 별도로 각을 계산하는 속도이어야한다.
대니 Varod

문제가 비슷한 곡선의 함수처럼 보이는 경우 수학이 올바른 것입니다. 그러나 문제는 두 가지 색상의 혼합을 처리하는 방법입니다 (예 : 40 % 파란색 + 40 % 파란색을 가져와 80 % 파란색으로 만드는 방법).
epologee

쉽게 할 수 있지만 색상 합이 100 %를 초과하면 채도가 좋지 않습니다.
대니 Varod
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.