Chromium Chronicle #33: 뷰 AnimationBuilder

뷰에서 레이어 기반 애니메이션을 사용하면 성능을 개선하고 버벅거림을 줄일 수 있지만 설정이 다소 어렵습니다. AnimationBuilder 클래스를 사용하면 레이어 애니메이션의 복잡성을 크게 줄이고 가독성을 높일 수 있습니다.

다음 이미지와 같이 두 뷰 사이의 연속 크로스 페이드를 애니메이션해야 한다고 가정해 보겠습니다.

다음은 레이어 Animation 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로 이메일을 보내세요.