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 31private backDisplaySyncBigger: displaySync.DisplaySync = displaySync.create(); 32``` 33 34## IntervalInfo 35 36Defines the interval information. 37 38**System capability**: SystemCapability.ArkUI.ArkUI.Full 39 40| Name | Type | Read-only| Mandatory| Description | 41| ---------------- | ----------------------------------------- | ---- | ---- | ------------------------------------------ | 42| timestamp | number | Yes | No | Timestamp of the current frame.| 43| targetTimestamp | number| Yes | No | Expected timestamp of the next frame.| 44 45 46## DisplaySync 47 48 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. 49 50 Before calling any of the following APIs, you must use [displaySync.create()](#displaysynccreate) to create a **DisplaySync** instance. 51 52### setExpectedFrameRateRange 53 54setExpectedFrameRateRange(rateRange: ExpectedFrameRateRange) : void 55 56Sets the expected frame rate range. 57 58**System capability**: SystemCapability.ArkUI.ArkUI.Full 59 60**Parameters** 61 62| Name | Type | Mandatory| Description | 63| --------------- | ------------------------------------------ | ---- | -----------------------------| 64| rateRange | [ExpectedFrameRateRange](../arkui-ts/ts-animatorproperty.md#expectedframeraterange)| Yes | Expected frame rate range.| 65 66 67**Example** 68 69```ts 70let range : ExpectedFrameRateRange = { 71 expected: 10, 72 min:0, 73 max:120 74}; 75this.backDisplaySyncBigger.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 _this = this 98let bigger = (frameInfo: displaySync.IntervalInfo) => { 99_this.drawFirstSize += 1; 100 console.info(_this.TAG, 'bigger:' + frameInfo.timestamp + ' TargetTimeStamp: ' + frameInfo.targetTimestamp); 101} 102this.backDisplaySyncBigger.setExpectedFrameRateRange(range) 103this.backDisplaySyncBigger.on("frame", bigger) 104``` 105 106### off('frame') 107 108off(type: 'frame', callback\?: Callback\<IntervalInfo\>): void 109 110Unsubscribes from change events of each frame. 111 112**System capability**: SystemCapability.ArkUI.ArkUI.Full 113 114**Parameters** 115 116| Name | Type | Mandatory| Description | 117| --------------- | ------------------------------------------ | ---- | -----------------------------| 118| type | 'frame'| Yes | Event type. The value is fixed at **'frame'**.| 119| callback | Callback<[IntervalInfo](#intervalinfo)>| No | Callback used for unsubscription. If no value is passed in, all subscriptions to the specified event are canceled.| 120 121 122**Example** 123 124```ts 125let _this = this 126let bigger = (frameInfo: displaySync.IntervalInfo) => { 127_this.drawFirstSize += 1; 128 console.info(_this.TAG, 'bigger:' + frameInfo.timestamp + ' TargetTimeStamp: ' + frameInfo.targetTimestamp); 129} 130this.backDisplaySyncBigger.off("frame", bigger) 131``` 132 133### start 134 135start(): void 136 137Starts callback for each frame. 138 139**System capability**: SystemCapability.ArkUI.ArkUI.Full 140 141**Example** 142 143```ts 144Button('StartBigger') 145 .fontSize(30) 146 .fontColor(Color.Black) 147 .onClick(() => { 148 this.backDisplaySyncBigger.start() 149 }) 150``` 151 152### stop 153 154stop(): void 155 156Stops callback for each frame. 157 158 159**System capability**: SystemCapability.ArkUI.ArkUI.Full 160 161 162**Example** 163 164```ts 165Button('StopBigger') 166 .fontSize(30) 167 .fontColor(Color.Black) 168 .onClick(() => { 169 this.backDisplaySyncBigger.stop() 170 }) 171``` 172