The Chromium Chronicle #33: View AnimationBuilder

การใช้ภาพเคลื่อนไหวแบบเลเยอร์ใน View สามารถช่วยเพิ่มประสิทธิภาพและลด แต่ไม่ยาก แต่การตั้งค่าจะค่อนข้างยาก AnimationBuilder คลาสสามารถลดความซับซ้อนลงอย่างมาก และช่วยให้อ่านเลเยอร์ได้ง่ายขึ้น ภาพเคลื่อนไหว

สมมติว่าคุณต้องการให้ภาพเคลื่อนไหวการข้ามแบบต่อเนื่องระหว่าง 2 ส่วนต่อไปนี้ เช่น ในรูปภาพต่อไปนี้

ลองดูตัวอย่างวิธีการทํางานโดยใช้ API ภาพเคลื่อนไหวของเลเยอร์โดยตรง

auto primary_title_sequence = std::make_unique<LayerAnimationSequence>();
auto working_sequence = std::make_unique<LayerAnimationSequence>();
primary_title_sequence->set_is_repeating(true);
working_sequence->set_is_repeating(true);

primary_title_sequence->AddElement(CreatePauseElement(OPACITY, base::Seconds(2)));
primary_title_sequence->AddElement(CreateOpacityElement(0.0f, base::Seconds(1)));
primary_title_sequence->AddElement(CreatePauseElement(OPACITY, base::Seconds(2)));
primary_title_sequence->AddElement(CreateOpacityElement(1.0f, base::Seconds(1)));

working_sequence->AddElement(CreatePauseElement(OPACITY, base::Seconds(2)));
working_sequence->AddElement(CreateOpacityElement(1.0f, base::Seconds(1)));
working_sequence->AddElement(CreatePauseElement(OPACITY, base::Seconds(2)));
working_sequence->AddElement(CreateOpacityElement(0.0f, base::Seconds(1)));

primary_title_->layer()->GetAnimator()->StartAnimation(primary_title_sequence.release());
working_->layer()->GetAnimator()->StartAnimation(working_sequence.release());

ข้อมูลต่อไปนี้จะแสดงวิธีสร้างเอฟเฟกต์เดียวกันโดยใช้ AnimationBuilder ภาพเคลื่อนไหวจะเริ่มต้นเมื่อออกจากขอบเขต

AnimationBuilder()
    .Repeatedly()
    .Offset(base::Seconds(2))
    .SetDuration(base::Seconds(1))
    .SetOpacity(primary_title_, 0.0f)
    .SetOpacity(working_, 1.0f)
    .Offset(base::Seconds(2))
    .SetDuration(base::Seconds(1))
    .SetOpacity(primary_title_, 1.0f)
    .SetOpacity(working_, 0.0f);

คุณจะเขียนหรืออ่านโค้ดใด ที่สำคัญไปกว่านั้น AnimationBuilder ไม่เพิ่มโอเวอร์เฮดให้กับภาพเคลื่อนไหว เนื่องจากมีจุดประสงค์เพื่อลดความซับซ้อนของ การสร้างภาพเคลื่อนไหวจากเลเยอร์ต่างๆ ลองใช้ในครั้งถัดไปที่ต้องการ ทำให้บางสิ่งเคลื่อนไหว

หากต้องการความช่วยเหลือเพิ่มเติม โปรดส่งอีเมลไปที่ chromium-dev@chromium.org