Chromium Chronicle #33: 뷰 AnimationBuilder

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

다음 두 영역 사이의 연속 크로스 페이드를 애니메이션해야 한다고 가정해 봅시다. 뷰(예: 다음 이미지)

다음은 레이어 애니메이션 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은 애니메이션을 단순화하기 위한 것이므로 애니메이션에 추가 오버헤드를 추가하지 않습니다. 레이어 기반 애니메이션 생성에 관해 이야기해 보겠습니다 다음에 필요할 때 사용해 보세요. 애니메이션을 적용할 수 있습니다

추가 지원이 필요하면 이메일로 문의해 주세요. [e-mail]를 사용합니다.

• AnimationBuilder 문서
• Chromium UI 알아보기