【入门到实战】OpenHarmony南向子系统开发：动画开发指南

往期鸿蒙5.0全套实战文章必看：（文中附带全栈鸿蒙5.0学习资料）

• 鸿蒙开发核心知识点，看这篇文章就够了

• 最新版！鸿蒙HarmonyOS Next应用开发实战学习路线

• 鸿蒙HarmonyOS NEXT开发技术最全学习路线指南

• 鸿蒙应用开发实战项目，看这一篇文章就够了（部分项目附源码）

---

动画开发

使用场景

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的回调函数。

   class AnimatorCallbackDemo : public OHOS::AnimatorCallback {
   public:
       AnimatorCallbackDemo(int16_t startPos, int16_t endPos, uint16_t time)
           : start_(startPos), end_(endPos), time_(time), curTime_(0) {}
    
       virtual void Callback(OHOS::UIView* view)
       {
           curTime_++;
           int16_t pos = EasingEquation::CubicEaseIn(start_, end_, curTime_, time_);
           view->Invalidate();
           view->SetPosition(pos, view->GetY());
           view->Invalidate();
       }
   protected:
       int16_t start_;
       int16_t end_;
       uint16_t time_;
       uint16_t curTime_;
   };
   

2. 将AnimatorCallback添加到Animator中。

   UIImageView* image = new UIImageView();
   image->SetSrc("..\\config\\images\\A021_001.bin");
   image->SetPosition(0, 50);
   AnimatorCallbackDemo* callback = new AnimatorCallbackDemo(0, 338, 60);
   Animator* animator = new Animator(callback, image, 0, true);
   

3. 将Animator添加到AnimatorManager中。

   AnimatorManager::GetInstance()->Add(animator);
   

4. 点击下图下方的按钮，检查对应的动画运行效果。

   图1 动画实现效果图