1# 动画开发指导 2 3 4## 使用场景 5 6UI动画通过task处理机制每个tick调用一下用户设置的callback函数来实现,具体实现为AnimatorManager、Animator、AnimatorCallback三个类实现。 7 8- AnimatorManager:AnimatorManager为单例,在Init函数执行时将自己注册到系统task回调函数中,系统task机制保证每个tick会调用一下AnimatorManager的callback函数,同时AnimatorManager用来管理Animator实例。 9 10- Animator:Animator中可以设置动画相关的属性,包括动画的起止时间,动画开始和停止,动画状态的设置和获取等。 11 12- AnimatorCallback:具体每一个tick动画所要做的内容在AnimatorCallback类中实现,开发者需要自己实现Callback方法,动画执行时在Callback实现相应功能。 13 14 15## 接口说明 16 17 **表1** 动画接口说明 18 19| 子模块 | 方法 | 功能 | 20| -------- | -------- | -------- | 21| Animator | void Start () | 动画开始 | 22| Animator | void Stop () | 动画停止 | 23| Animator | void Pause () | 动画暂停 | 24| Animator | void Resume () | 动画恢复 | 25| Animator | uint8_t GetState () const | 获取动画当前状态 | 26| Animator | void SetState (uint8_t state) | 设置动画当前状态 | 27| Animator | uint32_t GetTime () const | 获取动画总持续时间 | 28| Animator | void SetTime (uint32_t time) | 设置动画总持续时间 | 29| Animator | uint32_t GetRunTime () const | 获取动画当前已经持续的时间 | 30| Animator | void SetRunTime (uint32_t runTime) | 设置动画当前已经持续的时间 | 31| Animator | bool IsRepeat () const | 获取动画是否循环播放 | 32| AnimatorCallback | virtual void Callback (UIView \*view)=0 | 由用户实现,动画回调函数 | 33| AnimatorCallback | virtual void OnStop(UIView& view) {} | 由用户实现,动画停止后的回调函数 | 34| AnimatorManager | static AnimatorManager\* GetInstance() | 获取AnimatorManager实例 | 35| AnimatorManager | void Add (Animator \*animator) | 添加动画 | 36| AnimatorManager | void Remove(const Animator\* animator); | 删除动画 | 37 38 39## 开发步骤 40 411. 实现AnimatorCallback的回调函数。 42 43 ``` 44 class AnimatorCallbackDemo : public OHOS::AnimatorCallback { 45 public: 46 AnimatorCallbackDemo(int16_t startPos, int16_t endPos, uint16_t time) 47 : start_(startPos), end_(endPos), time_(time), curTime_(0) {} 48 49 virtual void Callback(OHOS::UIView* view) 50 { 51 curTime_++; 52 int16_t pos = EasingEquation::CubicEaseIn(start_, end_, curTime_, time_); 53 view->Invalidate(); 54 view->SetPosition(pos, view->GetY()); 55 view->Invalidate(); 56 } 57 protected: 58 int16_t start_; 59 int16_t end_; 60 uint16_t time_; 61 uint16_t curTime_; 62 }; 63 ``` 64 652. 将AnimatorCallback添加到Animator中。 66 67 ``` 68 UIImageView* image = new UIImageView(); 69 image->SetSrc("..\\config\\images\\A021_001.bin"); 70 image->SetPosition(0, 50); 71 AnimatorCallbackDemo* callback = new AnimatorCallbackDemo(0, 338, 60); 72 Animator* animator = new Animator(callback, image, 0, true); 73 ``` 74 753. 将Animator添加到AnimatorManager中。 76 77 ``` 78 AnimatorManager::GetInstance()->Add(animator); 79 ``` 80 814. 点击下图下方的按钮,检查对应的动画运行效果。 82 83 **图1** 动画实现效果图 84 85 ![zh-cn_image_0000001055504010](figures/zh-cn_image_0000001055504010.gif) 86