动画开发指导

使用场景

UI动画通过task处理机制每个tick调用一下用户设置的callback函数来实现,具体实现为AnimatorManager、Animator、AnimatorCallback三个类实现。

  • AnimatorManager:AnimatorManager为单例,在Init函数执行时将自己注册到系统task回调函数中,系统task机制保证每个tick会调用一下AnimatorManager的callback函数,同时AnimatorManager用来管理Animator实例。
  • Animator:Animator中可以设置动画相关的属性,包括动画的起止时间,动画开始和停止,动画状态的设置和获取等。
  • AnimatorCallback:具体每一个tick动画所要做的内容在AnimatorCallback类中实现,开发者需要自己实现Callback方法,动画执行时在Callback实现相应功能。

接口说明

表 1 动画接口说明

子模块

方法

功能

Animator

void Start ()

动画开始

Animator

void Stop ()

动画停止

Animator

void Pause ()

动画暂停

Animator

void Resume ()

动画恢复

Animator

uint8_t GetState () const

获取动画当前状态

Animator

void SetState (uint8_t state)

设置动画当前状态

Animator

uint32_t GetTime () const

获取动画总持续时间

Animator

void SetTime (uint32_t time)

设置动画总持续时间

Animator

uint32_t GetRunTime () const

获取动画当前已经持续的时间

Animator

void SetRunTime (uint32_t runTime)

设置动画当前已经持续的时间

Animator

bool IsRepeat () const

获取动画是否循环播放

AnimatorCallback

virtual void Callback (UIView view)=0

由用户实现,动画回调函数

AnimatorCallback

virtual void OnStop(UIView& view) {}

由用户实现,动画停止后的回调函数

AnimatorManager

static AnimatorManager GetInstance()

获取AnimatorManager实例

AnimatorManager

void Add (Animator animator)

添加动画

AnimatorManager

void Remove(const Animator animator);

删除动画

开发步骤

  1. 实现AnimatorCallback的回调函数。

    1. class AnimatorCallbackDemo : public OHOS::AnimatorCallback {
    2. public:
    3. AnimatorCallbackDemo(int16_t startPos, int16_t endPos, uint16_t time)
    4. : start_(startPos), end_(endPos), time_(time), curTime_(0) {}
    5. virtual void Callback(OHOS::UIView* view)
    6. {
    7. curTime_++;
    8. int16_t pos = EasingEquation::CubicEaseIn(start_, end_, curTime_, time_);
    9. view->Invalidate();
    10. view->SetPosition(pos, view->GetY());
    11. view->Invalidate();
    12. }
    13. protected:
    14. int16_t start_;
    15. int16_t end_;
    16. uint16_t time_;
    17. uint16_t curTime_;
    18. };
  2. 将AnimatorCallback添加到Animator中。

    1. UIImageView* image = new UIImageView();
    2. image->SetSrc("..\\config\\images\\A021_001.bin");
    3. image->SetPosition(0, 50);
    4. AnimatorCallbackDemo* callback = new AnimatorCallbackDemo(0, 338, 60);
    5. Animator* animator = new Animator(callback, image, 0, true);
  3. 将Animator添加到AnimatorManager中。

    1. AnimatorManager::GetInstance()->Add(animator);
  4. 点击下图下方的按钮,检查对应的动画运行效果。

    图 1 动画实现效果图
    动画开发指导 - 图1