Chromium Chronicle #33：View 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 這種廣告的目的在於簡化 以圖層為基礎的動畫下次需要 製作動畫

如需進一步協助，請傳送電子郵件至 chromium-dev@chromium.org。