Chromium Chronicle #33: アニメーションのビュー

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 にメールを送信してください。