1# @ohos.graphics.displaySync (Variable Frame Rate) 2The displaySync module allows your application to draw its custom UI content at a specified frame rate. 3 4> **NOTE** 5> 6> The initial APIs of this module are supported since API version 11. Newly added APIs will be marked with a superscript to indicate their earliest API version. 7 8 9## Modules to Import 10 11```ts 12import displaySync from '@ohos.graphics.displaySync'; 13``` 14 15## displaySync.create 16create(): DisplaySync 17 18Creates a **DisplaySync** object, through which you can set the frame rate of the custom UI content. 19 20**System capability**: SystemCapability.ArkUI.ArkUI.Full 21 22**Return value** 23 24| Type | Description | 25| ------------------ | ------------------------ | 26| [DisplaySync](#displaysync) | **DisplaySync** object created. | 27 28**Example** 29 30```ts 31let backDisplaySync: displaySync.DisplaySync = displaySync.create(); 32``` 33## IntervalInfo 34 35You can obtain the timestamp information from the event callback, including the timestamp when the current frame arrives and the timestamp when the next frame is expected to arrive. 36 37**System capability**: SystemCapability.ArkUI.ArkUI.Full 38 39| Name | Type | Read-only| Mandatory| Description | 40| ---------------- | ----------------------------------------- | ---- | ---- | ------------------------------------------ | 41| timestamp | number | Yes | No | Time when the current frame arrives, in nanoseconds.| 42| targetTimestamp | number| Yes | No | Expected arrival time of the next frame, in nanoseconds.| 43 44## DisplaySync 45 46 An object that implements the setting of the frame rate and callback. It provides APIs for you to set the frame rate, register a callback, and start/stop the callback. 47 48 Before calling any of the following APIs, you must use [displaySync.create()](#displaysynccreate) to create a **DisplaySync** instance. 49 50### setExpectedFrameRateRange 51 52setExpectedFrameRateRange(rateRange: ExpectedFrameRateRange) : void 53 54Sets the expected frame rate range. 55 56**System capability**: SystemCapability.ArkUI.ArkUI.Full 57 58**Parameters** 59 60| Name | Type | Mandatory| Description | 61| --------------- | ------------------------------------------ | ---- | -----------------------------| 62| rateRange | [ExpectedFrameRateRange](../apis-arkui/arkui-ts/ts-explicit-animation.md#expectedframeraterange11)| Yes | Expected frame rate range.| 63 64 65**Example** 66 67```ts 68let range : ExpectedFrameRateRange = { 69 expected: 10, 70 min:0, 71 max:120 72}; 73 74// Set the expected frame rate range. 75backDisplaySync?.setExpectedFrameRateRange(range) 76``` 77 78### on('frame') 79 80on(type: 'frame', callback: Callback\<IntervalInfo\>): void 81 82Subscribes to change events of each frame. 83 84**System capability**: SystemCapability.ArkUI.ArkUI.Full 85 86**Parameters** 87 88| Name | Type | Mandatory| Description | 89| --------------- | ------------------------------------------ | ---- | -----------------------------| 90| type | 'frame'| Yes | Event type. The value is fixed at **'frame'**.| 91| callback | Callback<[IntervalInfo](#intervalinfo)>| Yes | Callback used for subscription.| 92 93 94**Example** 95 96```ts 97let callback = (frameInfo: displaySync.IntervalInfo) => { 98 console.info("DisplaySync", 'TimeStamp:' + frameInfo.timestamp + ' TargetTimeStamp: ' + frameInfo.targetTimestamp); 99} 100 101// Subscribe to the event. 102backDisplaySync?.on("frame", callback) 103``` 104 105### off('frame') 106 107off(type: 'frame', callback\?: Callback\<IntervalInfo\>): void 108 109Unsubscribes from change events of each frame. 110 111**System capability**: SystemCapability.ArkUI.ArkUI.Full 112 113**Parameters** 114 115| Name | Type | Mandatory| Description | 116| --------------- | ------------------------------------------ | ---- | -----------------------------| 117| type | 'frame'| Yes | Event type. The value is fixed at **'frame'**.| 118| callback | Callback<[IntervalInfo](#intervalinfo)>| No | Callback used for unsubscription. If no value is passed in, all subscriptions to the specified event are canceled.| 119 120 121**Example** 122 123```ts 124let callback = (frameInfo: displaySync.IntervalInfo) => { 125 console.info("DisplaySync", 'TimeStamp:' + frameInfo.timestamp + ' TargetTimeStamp: ' + frameInfo.targetTimestamp); 126} 127 128backDisplaySync?.on("frame", callback) 129 130// Unsubscribe from the event. 131backDisplaySync?.off("frame", callback) 132``` 133 134### start 135 136start(): void 137 138Starts callback for each frame. 139 140**System capability**: SystemCapability.ArkUI.ArkUI.Full 141 142**Example** 143 144```ts 145let range : ExpectedFrameRateRange = { 146 expected: 10, 147 min:0, 148 max:120 149}; 150 151backDisplaySync?.setExpectedFrameRateRange(range) 152 153let callback = (frameInfo: displaySync.IntervalInfo) => { 154 console.info("DisplaySync", 'TimeStamp:' + frameInfo.timestamp + ' TargetTimeStamp: ' + frameInfo.targetTimestamp); 155} 156 157backDisplaySync?.on("frame", callback) 158 159// Start callback for each frame. 160backDisplaySync?.start() 161``` 162 163### stop 164 165stop(): void 166 167Stops callback for each frame. 168 169 170**System capability**: SystemCapability.ArkUI.ArkUI.Full 171 172 173**Example** 174 175```ts 176let range : ExpectedFrameRateRange = { 177 expected: 10, 178 min:0, 179 max:120 180}; 181 182backDisplaySync?.setExpectedFrameRateRange(range) 183 184let callback = (frameInfo: displaySync.IntervalInfo) => { 185 console.info("DisplaySync", 'TimeStamp:' + frameInfo.timestamp + ' TargetTimeStamp: ' + frameInfo.targetTimestamp); 186} 187 188backDisplaySync?.on("frame", callback) 189 190backDisplaySync?.start() 191 192// ... 193 194// Stop callback for each frame. 195backDisplaySync?.stop() 196``` 197