The Chromium Chronicle رقم 33: طرق عرض AnimationBuilder

إنّ استخدام الرسوم المتحركة المستندة إلى طبقات في بانوراميات يمكن أن يؤدي إلى تحسين الأداء والحدّ من ضعف الأداء، ولكن من الصعب إعداده. يمكن لفئات AnimationBuilder تقليل التعقيد إلى حد كبير وتحسين سهولة قراءة الرسوم المتحركة على الطبقات.

لنفترض أنك بحاجة إلى تحريك تلاشٍ متقاطع مستمر بين العرضين التاليين، كما هو الحال في الصورة التالية.

إليك مثال عن كيفية تنفيذ ذلك باستخدام واجهات برمجة تطبيقات الرسوم المتحركة للطبقة مباشرةً.

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.