• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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