Crossfade ที่สมบูรณ์แบบ

25

ฉันพบว่ามันยากที่จะอธิบายปัญหานี้ด้วยคำพูดซึ่งเป็นสาเหตุที่ฉันสร้างวิดีโอ (45 วินาที) เพื่ออธิบาย นี่คือตัวอย่างของคำถามโปรดดูได้ที่ Vimeo: http://vimeo.com/epologee/perfect-crossfade

การใช้ crossfade เชิงเส้นภาพที่ได้จะมี 'การจุ่ม' อย่างโปร่งใส ฉันจะป้องกันสิ่งนี้ได้อย่างไร

ปัญหาของการสร้าง crossfade ที่ไร้ที่ติหรือละลายสองภาพหรือรูปร่างได้เกิดขึ้นกับฉันในหลายสาขาในช่วงทศวรรษที่ผ่านมา ที่หนึ่งในการตัดต่อวิดีโอจากนั้นใน Flash animation และตอนนี้ในการเขียนโปรแกรม iOS เมื่อคุณเริ่ม googling มีหลายวิธีแก้ไข แต่ฉันต้องการแก้ปัญหานี้โดยไม่แฮ็คในครั้งนี้

สรุป:
อะไรคือชื่อของเทคนิคหรือเส้นโค้งที่จะนำไปใช้ในการผสมบิตแมปบิตแมปกึ่งโปร่งใสสองสีหากคุณต้องการความโปร่งใสที่เกิดขึ้นให้ตรงกับต้นฉบับของทั้งสอง

มีฟังก์ชั่น (ทางคณิตศาสตร์) ในการคำนวณค่าความโปร่งใส / ค่าอัลฟาบางส่วนที่จำเป็นในระหว่างการจางหรือไม่?

จะมีภาษาโปรแกรมที่มีฟังก์ชั่นเหล่านี้เป็นที่ตั้งไว้คล้ายกับease in, ease outหรือease in outฟังก์ชั่นที่พบใน ActionScript หรือโกโก้?

อัปเดต:นอกเหนือจากวิดีโอฉันได้ทำโครงการตัวอย่าง (ต้องใช้ Xcode และ iOS SDK) และโพสต์ลงบน GitHub มันแสดงภาพเคลื่อนไหวเดียวกับวิดีโอ แต่คราวนี้มีสี่เหลี่ยม: https://github.com/epologee/StackOverflow-Example-Code

— epologee
แหล่งที่มา

7

ไม่รู้อะไรเลยนอกจาก +1 สำหรับวิดีโอ

— sebastiangeiger

ขึ้นอยู่กับวิธีการนำโอเปอเรเตอร์เกินมาใช้ ดูen.wikipedia.org/wiki/Alpha_channel

— artistoex

ฉันเห็นด้วย @artistoex มีบางสิ่งที่ผู้ปฏิบัติงานเกินขอบคุณสำหรับลิงค์! อย่างไรก็ตามหากคำตอบนั้นถูกฝังไว้ที่ใดที่หนึ่งฉันไม่เห็น :(

— บทกวี

การเป็นตัวแทนทางคณิตศาสตร์ของโอเปอเรเตอร์เกินนำไปสู่สมการ ตัวอย่างผู้ปฏิบัติงาน: 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 ถ้าคุณไม่ต้องการให้มีการซ้อนทับพื้นที่

— b123400
แหล่งที่มา

3

ผมไม่ทราบว่าสิ่งที่ชื่ออาจจะอยู่ในขอบเขตของการตัดต่อวิดีโอ แต่ฉันต้องการโทรโค้ง S-โค้งหรือเส้นโค้ง sigmoid มันง่ายมากที่จะสร้าง cross-fade ที่คุณต้องการใน iOS โดยใช้ฟังก์ชั่นkCAMediaTimingFunctionEaseInEaseOutของ Core Animation เพียงเคลื่อนไหว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 คุณสามารถสร้างระยะเวลาการทำงานของคุณเองที่อธิบายไว้ในจังหวะ Timespaces และ CAAnimation นั่นเป็นขั้นสูงกว่าภาพเคลื่อนไหวอย่างง่ายเล็กน้อยที่แสดงด้านบน แต่ให้การควบคุมทั้งหมดที่คุณต้องการ

— คาเลบ
แหล่งที่มา

sigmoid! นั่นใกล้เข้ามาแล้วหนึ่งก้าวขอบคุณ! ชิ้นส่วนของรหัสที่คุณให้ไม่สามารถทำงานได้ทันทีสำหรับ setAnimationCurve kCAMediaTimingFunctionEaseInEaseOutใช้เวลาพารามิเตอร์ที่แตกต่างกว่า คุณมีความหมายUIViewAnimationCurveEaseInOutไหม ปัญหาของเส้นโค้งนั้นเหมือนกัน (จุ่มลงตรงกลาง) เนื่องจาก ณ เวลาใด ๆ ค่าอัลฟาสองค่าในการบวกอย่างง่ายจะเท่ากัน1.0โดยที่ในการปรับแต่งเส้นโค้งของฉันเองมันต้องเกินกว่า1.0จะได้ผลลัพธ์ที่ต้องการ .

— บทกวี

ฉันเห็นแล้วตอนนี้ ... คุณถูกต้องเกี่ยวกับค่าคงที่ - ฉันได้อัปเดตโค้ดในคำตอบแล้ว ฉันได้เพิ่มลิงก์ไปยังเอกสารที่อธิบายวิธีสร้างฟังก์ชันกำหนดเวลาของคุณเอง

— Caleb

ฉันทำแอนิเมชั่นด้วยบล็อก แต่แก่นสารเหมือนกัน เส้นโค้งในตัวยังไม่สามารถใช้งานได้เนื่องจากความสมมาตรของมัน แต่ภาคผนวกปูทางไปสู่ CAMediaTimingFunction ที่กำหนดเองที่ตรงกับที่ฉันใช้ในวิดีโอ After Effects ที่น่าเป็นห่วงคือไม่มีเส้นโค้ง sigmoid ที่เหมาะกับทุกสถานการณ์ระดับความเริ่มต้นที่แตกต่างกันจะต้องมีตำแหน่งที่แตกต่างกันเพื่อกำจัด 'จุ่ม' ต้องมีบางอย่างที่ฉันขาดไป

— บทกวี

สวัสดี @Caleb ฉันโพสต์ตัวอย่างโครงการใน GitHub (ดูโพสต์) เวลาที่กำหนดเองมีประโยชน์ แต่ถ้าคุณเปลี่ยนinitialTransparencyค่ามันจะไม่มีประโยชน์ คุณไม่มีเงื่อนงำอะไรที่จะลองต่อไป

— เขียนบทกวีที่

2

อีกเล็กน้อยเพื่อช่วยในการค้นหาของ Google; โปรแกรมเมอร์กราฟิกเรียกกราฟที่คุณกำลังพูดถึง "smoothstep" โปรแกรมเมอร์ที่มีความสามารถสูงมักจะเรียกมันว่า "hermite interpolator" และสมการง่าย ๆ ในการคำนวณอันที่ไม่มีตรีโกณมิติคือ: "3t ^ 2 - 2t ^ 3"

— Trevor Powell

1

ในคอมพิวเตอร์กราฟิกชนิดของฟังก์ชั่นนี้จะเรียกว่าsmoothstep เมื่อใช้ในการข้ามมันจะกำหนดค่าอัลฟาทั่วโลกสำหรับองค์ประกอบ

ถ้าภาพอินพุตมีช่องอัลฟาแรกคุณควรตรวจสอบให้แน่ใจว่าอัลฟาจะpremultiplied จากนั้นคุณสามารถทำการจัดองค์ประกอบ crossfade ได้อย่างตรงไปตรงมาโดยใช้ขั้นตอนที่ราบรื่นalphaในแต่ละช่อง [ X = A*alpha + B*(1-alpha)] และคาดหวังผลลัพธ์ที่สมเหตุสมผล

— comingstorm
แหล่งที่มา

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

— Danny Varod
แหล่งที่มา

ขอบคุณ @ แดนนี่ ที่จริงแล้วการดำเนินการ1 - Alpha1(time)สมการจะไม่ดูแลการจุ่มเนื่องจากภาพที่ผสม 0.5 อัลฟ่าสองภาพจะไม่ส่งผลให้เกิดภาพที่ผสมกับ 1.0 อัลฟา เส้นโค้งที่กำหนดเองที่ฉันวาดไม่ได้สะท้อนในแนวตั้ง

— เขียนบทละคร

1

1-alpha สำหรับการสลายตัวแบบเอ็กซ์โปเนนเชียลซึ่งฉันคิดว่าเหมาะสมกว่า สำหรับฟังก์ชั่น sin / cos ของคอร์ส sin (t) = sqrt (1-sqr (cos (t)) อย่างไรก็ตามการคำนวณแต่ละอันควรจะเร็วกว่านี้

— Danny Varod

หากปัญหาคือสิ่งที่ฟังก์ชั่นของเส้นโค้งที่คล้ายกันอาจมีลักษณะเช่นนี้คณิตศาสตร์ของคุณถูกต้อง อย่างไรก็ตามปัญหาคือวิธีจัดการกับการผสมสองสีเช่นวิธีรับ 40% สีน้ำเงิน + 40% สีน้ำเงินเพื่อให้ได้สีน้ำเงิน 80%

— บทกวี

นั่นเป็นเรื่องง่ายที่จะทำ แต่จะส่งผลให้ความอิ่มตัวของสีดูไม่ดีเมื่อผลรวมของสี> 100%

— Danny Varod