1# @ohos.arkui.UIContext (UIContext) (System API)
2
3In the stage model, a window stage or window can use the **loadContent** API to load pages, create a UI instance, and render page content to the associated window. Naturally, UI instances and windows are associated on a one-by-one basis. Some global UI APIs are executed in the context of certain UI instances. When calling these APIs, you must identify the UI context, and consequently UI instance, by tracing the call chain. If these APIs are called on a non-UI page or in some asynchronous callback, the current UI context may fail to be identified, resulting in API execution errors.
4
5**@ohos.window** adds the [getUIContext](./js-apis-window.md#getuicontext10) API in API version 10 for obtaining the **UIContext** object of a UI instance. The API provided by the **UIContext** object can be directly applied to the corresponding UI instance.
6
7> **NOTE**
8>
9> The initial APIs of this module are supported since API version 10. Newly added APIs will be marked with a superscript to indicate their earliest API version.
10>
11> You can preview how this component looks on a real device, but not in DevEco Studio Previewer.
12>
13> This topic describes only system APIs provided by the module. For details about its public APIs, see [@ohos.arkui.UIContext (UIContext)](js-apis-arkui-UIContext.md).
14
15## UIContext
16
17In the following API examples, you must first use [getUIContext()](./js-apis-window.md#getuicontext10) in **@ohos.window** to obtain a **UIContext** instance, and then call the APIs using the obtained instance. In this document, the **UIContext** instance is represented by **uiContext**.
18
19### setDynamicDimming<sup>12+<sup>
20
21setDynamicDimming(id: string, value: number): void
22
23Sets the dynamic dimming degree of the component.
24
25
26> **NOTE**
27>
28> Applying other visual effects after this API is called may result in conflicts.
29
30**System capability**: SystemCapability.ArkUI.ArkUI.Full
31
32**Parameters**
33
34| Name | Type | Mandatory | Description |
35| ------- | ------- | ------- | ------- |
36| id | string | Yes | Component ID. |
37| value | number | Yes | Dynamic dimming degree of the component. The value range is [0, 1]. The component is brighter with a larger value. |
38
39**Example**
40
41```ts
42@Entry
43@Component
44struct Index {
45  @State
46  myCount : number = 100
47
48  build() {
49    Column(){
50      Image($r('app.media.testImage')).width(500).height(800).id("test")
51    }.width("100%").height("100%").onClick(()=>{
52      this.getUIContext().setDynamicDimming("test",1)
53      animateTo({duration:5000 },()=>{
54        this.getUIContext().setDynamicDimming("test",0)
55      })
56    })
57  }
58}
59```
60![api-switch-overview](../apis-arkui/figures/dynamicDinning.gif)
61
62### animateToImmediately<sup>12+</sup>
63
64animateToImmediately(param: AnimateParam , event: () => void): void
65
66Implements immediate delivery of an explicit animation through a **UIContext** object. When multiple property animations are loaded at once, you can call this API to immediately execute the transition animation for state changes caused by the specified closure function.
67
68**Atomic service API**: This API can be used in atomic services since API version 12.
69
70**System capability**: SystemCapability.ArkUI.ArkUI.Full
71
72**Parameters**
73
74| Name  | Type                                      | Mandatory  | Description                                   |
75| ----- | ---------------------------------------- | ---- | ------------------------------------- |
76| param | [AnimateParam](arkui-ts/ts-explicit-animation.md#animateparam)  | Yes   | Animation settings.                          |
77| event | () => void                               | Yes   | Closure function that displays the animation. The system automatically inserts the transition animation if the state changes in the closure function. |
78
79**Example**
80
81This example shows how to use **animateToImmediately** to implement immediate delivery of an explicit animation through a **UIContext** object.
82
83```ts
84// xxx.ets
85@Entry
86@Component
87struct AnimateToImmediatelyExample {
88  @State widthSize: number = 250
89  @State heightSize: number = 100
90  @State opacitySize: number = 0
91  private flag: boolean = true
92  uiContext: UIContext | null | undefined = this.getUIContext();
93
94  build() {
95    Column() {
96      Column()
97        .width(this.widthSize)
98        .height(this.heightSize)
99        .backgroundColor(Color.Green)
100        .opacity(this.opacitySize)
101      Button('change size')
102        .margin(30)
103        .onClick(() => {
104          if (this.flag) {
105            this.uiContext?.animateToImmediately({
106              delay: 0,
107              duration: 1000
108            }, () => {
109              this.opacitySize = 1
110            })
111            this.uiContext?.animateTo({
112              delay: 1000,
113              duration: 1000
114            }, () => {
115              this.widthSize = 150
116              this.heightSize = 60
117            })
118          } else {
119            this.uiContext?.animateToImmediately({
120              delay: 0,
121              duration: 1000
122            }, () => {
123              this.widthSize = 250
124              this.heightSize = 100
125            })
126            this.uiContext?.animateTo({
127              delay: 1000,
128              duration: 1000
129            }, () => {
130              this.opacitySize = 0
131            })
132          }
133          this.flag = !this.flag
134        })
135    }.width('100%').margin({ top: 5 })
136  }
137}
138```
139![animateToImmediately](figures/animateToImmediately.gif)
140