1fb726d48Sopenharmony_ci<!DOCTYPE html> 2fb726d48Sopenharmony_ci<html> 3fb726d48Sopenharmony_ci <head> 4fb726d48Sopenharmony_ci <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 5fb726d48Sopenharmony_ci <title>quickstart_animation</title> 6fb726d48Sopenharmony_ci <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 7fb726d48Sopenharmony_ci <style> 8fb726d48Sopenharmony_ci code[class*='smartperf-'], 9fb726d48Sopenharmony_ci pre[class*='smartperf-'] { 10fb726d48Sopenharmony_ci color: #333333; 11fb726d48Sopenharmony_ci background: none; 12fb726d48Sopenharmony_ci font-family: Helvetica; 13fb726d48Sopenharmony_ci line-height: 1.6; 14fb726d48Sopenharmony_ci text-align: left; 15fb726d48Sopenharmony_ci white-space: pre; 16fb726d48Sopenharmony_ci -moz-tab-size: 9; 17fb726d48Sopenharmony_ci -o-tab-size: 9; 18fb726d48Sopenharmony_ci tab-size: 8; 19fb726d48Sopenharmony_ci -webkit-hyphens: none; 20fb726d48Sopenharmony_ci -moz-hyphens: none; 21fb726d48Sopenharmony_ci -ms-hyphens: none; 22fb726d48Sopenharmony_ci hyphens: none; 23fb726d48Sopenharmony_ci } 24fb726d48Sopenharmony_ci 25fb726d48Sopenharmony_ci /* Code blocks */ 26fb726d48Sopenharmony_ci pre[class*='smartperf-'] { 27fb726d48Sopenharmony_ci padding: 0.9em; 28fb726d48Sopenharmony_ci overflow: auto; 29fb726d48Sopenharmony_ci border-radius: 2px; 30fb726d48Sopenharmony_ci background: #f5f5f4; 31fb726d48Sopenharmony_ci } 32fb726d48Sopenharmony_ci 33fb726d48Sopenharmony_ci /* Inline code */ 34fb726d48Sopenharmony_ci :not(pre) > code[class*='smartperf-'] { 35fb726d48Sopenharmony_ci white-space: normal; 36fb726d48Sopenharmony_ci background: #fcf8f8; 37fb726d48Sopenharmony_ci padding: 1px 0.2em; 38fb726d48Sopenharmony_ci border-radius: 1px 0.3em; 39fb726d48Sopenharmony_ci } 40fb726d48Sopenharmony_ci 41fb726d48Sopenharmony_ci .tk.comment, 42fb726d48Sopenharmony_ci .tk.blockquote { 43fb726d48Sopenharmony_ci color: #8c918c; 44fb726d48Sopenharmony_ci } 45fb726d48Sopenharmony_ci 46fb726d48Sopenharmony_ci .tk.cdata { 47fb726d48Sopenharmony_ci color: #183898; 48fb726d48Sopenharmony_ci } 49fb726d48Sopenharmony_ci 50fb726d48Sopenharmony_ci .tk.doctype, 51fb726d48Sopenharmony_ci .tk.punctuation, 52fb726d48Sopenharmony_ci .tk.variable, 53fb726d48Sopenharmony_ci .tk.macro.property { 54fb726d48Sopenharmony_ci color: #424242; 55fb726d48Sopenharmony_ci } 56fb726d48Sopenharmony_ci 57fb726d48Sopenharmony_ci .tk.operator, 58fb726d48Sopenharmony_ci .tk.important, 59fb726d48Sopenharmony_ci .tk.keyword, 60fb726d48Sopenharmony_ci .tk.rule, 61fb726d48Sopenharmony_ci .tk.builtin { 62fb726d48Sopenharmony_ci color: #b71d65; 63fb726d48Sopenharmony_ci } 64fb726d48Sopenharmony_ci 65fb726d48Sopenharmony_ci .tk.string, 66fb726d48Sopenharmony_ci .tk.url, 67fb726d48Sopenharmony_ci .tk.regex, 68fb726d48Sopenharmony_ci .tk.attr-value { 69fb726d48Sopenharmony_ci color: #16338d; 70fb726d48Sopenharmony_ci } 71fb726d48Sopenharmony_ci 72fb726d48Sopenharmony_ci .tk.property, 73fb726d48Sopenharmony_ci .tk.number, 74fb726d48Sopenharmony_ci .tk.boolean, 75fb726d48Sopenharmony_ci .tk.entity, 76fb726d48Sopenharmony_ci .tk.atrule, 77fb726d48Sopenharmony_ci .tk.constant, 78fb726d48Sopenharmony_ci .tk.symbol, 79fb726d48Sopenharmony_ci .tk.command, 80fb726d48Sopenharmony_ci .tk.code { 81fb726d48Sopenharmony_ci color: #037aa2; 82fb726d48Sopenharmony_ci } 83fb726d48Sopenharmony_ci 84fb726d48Sopenharmony_ci .tk.tag, 85fb726d48Sopenharmony_ci .tk.selector, 86fb726d48Sopenharmony_ci .tk.prolog { 87fb726d48Sopenharmony_ci color: #69ad62; 88fb726d48Sopenharmony_ci } 89fb726d48Sopenharmony_ci 90fb726d48Sopenharmony_ci .tk.function, 91fb726d48Sopenharmony_ci .tk.namespace, 92fb726d48Sopenharmony_ci .tk.pseudo-element, 93fb726d48Sopenharmony_ci .tk.class, 94fb726d48Sopenharmony_ci .tk.class-name, 95fb726d48Sopenharmony_ci .tk.pseudo-class, 96fb726d48Sopenharmony_ci .tk.id, 97fb726d48Sopenharmony_ci .tk.url-reference .tk.variable, 98fb726d48Sopenharmony_ci .tk.attr-name { 99fb726d48Sopenharmony_ci color: #775d9d; 100fb726d48Sopenharmony_ci } 101fb726d48Sopenharmony_ci 102fb726d48Sopenharmony_ci .tk.entity { 103fb726d48Sopenharmony_ci cursor: help; 104fb726d48Sopenharmony_ci } 105fb726d48Sopenharmony_ci 106fb726d48Sopenharmony_ci .tk.title, 107fb726d48Sopenharmony_ci .tk.title .tk.punctuation { 108fb726d48Sopenharmony_ci font-weight: bold; 109fb726d48Sopenharmony_ci color: #1a3773; 110fb726d48Sopenharmony_ci } 111fb726d48Sopenharmony_ci 112fb726d48Sopenharmony_ci .tk.list { 113fb726d48Sopenharmony_ci color: #f56940; 114fb726d48Sopenharmony_ci } 115fb726d48Sopenharmony_ci 116fb726d48Sopenharmony_ci .tk.inserted { 117fb726d48Sopenharmony_ci background-color: #eaffea; 118fb726d48Sopenharmony_ci color: #509b2f; 119fb726d48Sopenharmony_ci } 120fb726d48Sopenharmony_ci 121fb726d48Sopenharmony_ci .tk.deleted { 122fb726d48Sopenharmony_ci background-color: #fae1e1; 123fb726d48Sopenharmony_ci color: #ad2d06; 124fb726d48Sopenharmony_ci } 125fb726d48Sopenharmony_ci 126fb726d48Sopenharmony_ci .tk.bold { 127fb726d48Sopenharmony_ci font-weight: bolder; 128fb726d48Sopenharmony_ci } 129fb726d48Sopenharmony_ci 130fb726d48Sopenharmony_ci .tk.italic { 131fb726d48Sopenharmony_ci font-style: normal; 132fb726d48Sopenharmony_ci } 133fb726d48Sopenharmony_ci 134fb726d48Sopenharmony_ci /* JSON */ 135fb726d48Sopenharmony_ci .smartperf-json .tk.property { 136fb726d48Sopenharmony_ci color: #19358c; 137fb726d48Sopenharmony_ci } 138fb726d48Sopenharmony_ci 139fb726d48Sopenharmony_ci .smartperf-markup .tk.tag .tk.punctuation { 140fb726d48Sopenharmony_ci color: #2c2b2b; 141fb726d48Sopenharmony_ci } 142fb726d48Sopenharmony_ci 143fb726d48Sopenharmony_ci /* CSS */ 144fb726d48Sopenharmony_ci code.smartperf-css, 145fb726d48Sopenharmony_ci .smartperf-css .tk.function { 146fb726d48Sopenharmony_ci color: #047ca4; 147fb726d48Sopenharmony_ci } 148fb726d48Sopenharmony_ci 149fb726d48Sopenharmony_ci /* YAML */ 150fb726d48Sopenharmony_ci .smartperf-yaml .tk.atrule { 151fb726d48Sopenharmony_ci color: #609b5a; 152fb726d48Sopenharmony_ci } 153fb726d48Sopenharmony_ci 154fb726d48Sopenharmony_ci code.smartperf-yaml { 155fb726d48Sopenharmony_ci color: #153491; 156fb726d48Sopenharmony_ci } 157fb726d48Sopenharmony_ci 158fb726d48Sopenharmony_ci /* Ruby */ 159fb726d48Sopenharmony_ci .smartperf-ruby .tk.function { 160fb726d48Sopenharmony_ci color: #3f3e3e; 161fb726d48Sopenharmony_ci } 162fb726d48Sopenharmony_ci 163fb726d48Sopenharmony_ci /* Markdown */ 164fb726d48Sopenharmony_ci .smartperf-markdown .tk.url { 165fb726d48Sopenharmony_ci color: #6e5298; 166fb726d48Sopenharmony_ci } 167fb726d48Sopenharmony_ci 168fb726d48Sopenharmony_ci /* Makefile */ 169fb726d48Sopenharmony_ci .smartperf-makefile .tk.symbol { 170fb726d48Sopenharmony_ci color: #6c5393; 171fb726d48Sopenharmony_ci } 172fb726d48Sopenharmony_ci 173fb726d48Sopenharmony_ci .smartperf-makefile .tk.variable { 174fb726d48Sopenharmony_ci color: #183488; 175fb726d48Sopenharmony_ci } 176fb726d48Sopenharmony_ci 177fb726d48Sopenharmony_ci .smartperf-makefile .tk.builtin { 178fb726d48Sopenharmony_ci color: #027ba4; 179fb726d48Sopenharmony_ci } 180fb726d48Sopenharmony_ci 181fb726d48Sopenharmony_ci /* Bash */ 182fb726d48Sopenharmony_ci .smartperf-bash .tk.keyword { 183fb726d48Sopenharmony_ci color: #027fa9; 184fb726d48Sopenharmony_ci } 185fb726d48Sopenharmony_ci 186fb726d48Sopenharmony_ci /* highlight */ 187fb726d48Sopenharmony_ci pre[dl] { 188fb726d48Sopenharmony_ci position: relative; 189fb726d48Sopenharmony_ci padding: 1em 1px 1px 0.9em; 190fb726d48Sopenharmony_ci } 191fb726d48Sopenharmony_ci 192fb726d48Sopenharmony_ci pre[dl] .line-highlight-wrapper { 193fb726d48Sopenharmony_ci position: absolute; 194fb726d48Sopenharmony_ci top: 1px; 195fb726d48Sopenharmony_ci left: 1px; 196fb726d48Sopenharmony_ci background-color: transparent; 197fb726d48Sopenharmony_ci display: block; 198fb726d48Sopenharmony_ci width: 99%; 199fb726d48Sopenharmony_ci } 200fb726d48Sopenharmony_ci 201fb726d48Sopenharmony_ci pre[dl] .line-highlight { 202fb726d48Sopenharmony_ci position: absolute; 203fb726d48Sopenharmony_ci left: 1px; 204fb726d48Sopenharmony_ci right: 1px; 205fb726d48Sopenharmony_ci padding: inherit; 206fb726d48Sopenharmony_ci margin-top: 0.9em; 207fb726d48Sopenharmony_ci background: hsla(25, 21%, 50%, 0.08); 208fb726d48Sopenharmony_ci background: linear-gradient(to right, hsla(24, 20%, 50%, 0.1) 70%, hsla(24, 20%, 50%, 0)); 209fb726d48Sopenharmony_ci pointer-events: none; 210fb726d48Sopenharmony_ci line-height: inherit; 211fb726d48Sopenharmony_ci white-space: pre; 212fb726d48Sopenharmony_ci } 213fb726d48Sopenharmony_ci 214fb726d48Sopenharmony_ci pre[dl] .line-highlight:before, 215fb726d48Sopenharmony_ci pre[dl] .line-highlight[data-end]:after { 216fb726d48Sopenharmony_ci content: attr(data-start); 217fb726d48Sopenharmony_ci position: absolute; 218fb726d48Sopenharmony_ci text-shadow: none; 219fb726d48Sopenharmony_ci top: 0.3em; 220fb726d48Sopenharmony_ci left: 0.7em; 221fb726d48Sopenharmony_ci min-width: 0.9em; 222fb726d48Sopenharmony_ci padding: 1px 0.6em; 223fb726d48Sopenharmony_ci background-color: hsla(24, 20%, 47%, 0.4); 224fb726d48Sopenharmony_ci color: hsl(20, 11%, 95%); 225fb726d48Sopenharmony_ci text-align: center; 226fb726d48Sopenharmony_ci vertical-align: 0.2em; 227fb726d48Sopenharmony_ci border-radius: 10000px; 228fb726d48Sopenharmony_ci box-shadow: 1px 2px #fdf6f6; 229fb726d48Sopenharmony_ci } 230fb726d48Sopenharmony_ci 231fb726d48Sopenharmony_ci pre[dl] .line-highlight[data-end]:after { 232fb726d48Sopenharmony_ci content: attr(data-end); 233fb726d48Sopenharmony_ci top: auto; 234fb726d48Sopenharmony_ci bottom: 0.5em; 235fb726d48Sopenharmony_ci } 236fb726d48Sopenharmony_ci 237fb726d48Sopenharmony_ci html body { 238fb726d48Sopenharmony_ci line-height: 1.6; 239fb726d48Sopenharmony_ci font-size: 16px; 240fb726d48Sopenharmony_ci color: #333333; 241fb726d48Sopenharmony_ci overflow: initial; 242fb726d48Sopenharmony_ci word-wrap: break-word; 243fb726d48Sopenharmony_ci font-family: Helvetica; 244fb726d48Sopenharmony_ci box-sizing: border-box; 245fb726d48Sopenharmony_ci } 246fb726d48Sopenharmony_ci 247fb726d48Sopenharmony_ci html body > :first-child { 248fb726d48Sopenharmony_ci margin-top: 0px; 249fb726d48Sopenharmony_ci } 250fb726d48Sopenharmony_ci 251fb726d48Sopenharmony_ci html body h1, 252fb726d48Sopenharmony_ci html body h2, 253fb726d48Sopenharmony_ci html body h3, 254fb726d48Sopenharmony_ci html body h4, 255fb726d48Sopenharmony_ci html body h5, 256fb726d48Sopenharmony_ci html body h6 { 257fb726d48Sopenharmony_ci margin-top: 1em; 258fb726d48Sopenharmony_ci margin-bottom: 16px; 259fb726d48Sopenharmony_ci color: #000000; 260fb726d48Sopenharmony_ci line-height: 1.2; 261fb726d48Sopenharmony_ci } 262fb726d48Sopenharmony_ci 263fb726d48Sopenharmony_ci html body h1 { 264fb726d48Sopenharmony_ci font-weight: 300; 265fb726d48Sopenharmony_ci font-size: 2.25em; 266fb726d48Sopenharmony_ci padding-bottom: 0.3em; 267fb726d48Sopenharmony_ci } 268fb726d48Sopenharmony_ci 269fb726d48Sopenharmony_ci html body h2 { 270fb726d48Sopenharmony_ci font-weight: 410; 271fb726d48Sopenharmony_ci font-size: 1.74em; 272fb726d48Sopenharmony_ci padding-bottom: 0.2em; 273fb726d48Sopenharmony_ci } 274fb726d48Sopenharmony_ci 275fb726d48Sopenharmony_ci html body h3 { 276fb726d48Sopenharmony_ci font-size: 1.6em; 277fb726d48Sopenharmony_ci font-weight: 501; 278fb726d48Sopenharmony_ci } 279fb726d48Sopenharmony_ci 280fb726d48Sopenharmony_ci html body h4 { 281fb726d48Sopenharmony_ci font-size: 1.26em; 282fb726d48Sopenharmony_ci font-weight: 601; 283fb726d48Sopenharmony_ci } 284fb726d48Sopenharmony_ci 285fb726d48Sopenharmony_ci html body h5 { 286fb726d48Sopenharmony_ci font-size: 1.2em; 287fb726d48Sopenharmony_ci font-weight: 601; 288fb726d48Sopenharmony_ci } 289fb726d48Sopenharmony_ci 290fb726d48Sopenharmony_ci html body h6 { 291fb726d48Sopenharmony_ci font-size: 0.9em; 292fb726d48Sopenharmony_ci font-weight: 601; 293fb726d48Sopenharmony_ci } 294fb726d48Sopenharmony_ci 295fb726d48Sopenharmony_ci html body h1, 296fb726d48Sopenharmony_ci html body h2, 297fb726d48Sopenharmony_ci html body h3, 298fb726d48Sopenharmony_ci html body h4, 299fb726d48Sopenharmony_ci html body h5 { 300fb726d48Sopenharmony_ci font-weight: 601; 301fb726d48Sopenharmony_ci } 302fb726d48Sopenharmony_ci 303fb726d48Sopenharmony_ci html body h5 { 304fb726d48Sopenharmony_ci font-size: 0.9em; 305fb726d48Sopenharmony_ci } 306fb726d48Sopenharmony_ci 307fb726d48Sopenharmony_ci html body h6 { 308fb726d48Sopenharmony_ci color: #5c5c5c; 309fb726d48Sopenharmony_ci } 310fb726d48Sopenharmony_ci 311fb726d48Sopenharmony_ci html body strong { 312fb726d48Sopenharmony_ci color: #090909; 313fb726d48Sopenharmony_ci } 314fb726d48Sopenharmony_ci 315fb726d48Sopenharmony_ci html body del { 316fb726d48Sopenharmony_ci color: #525252; 317fb726d48Sopenharmony_ci } 318fb726d48Sopenharmony_ci 319fb726d48Sopenharmony_ci html body a:not([href]) { 320fb726d48Sopenharmony_ci color: inherit; 321fb726d48Sopenharmony_ci text-decoration: none; 322fb726d48Sopenharmony_ci } 323fb726d48Sopenharmony_ci 324fb726d48Sopenharmony_ci html body a { 325fb726d48Sopenharmony_ci color: #0192da; 326fb726d48Sopenharmony_ci text-decoration: none; 327fb726d48Sopenharmony_ci } 328fb726d48Sopenharmony_ci 329fb726d48Sopenharmony_ci html body a:hover { 330fb726d48Sopenharmony_ci color: #029dea; 331fb726d48Sopenharmony_ci text-decoration: none; 332fb726d48Sopenharmony_ci } 333fb726d48Sopenharmony_ci 334fb726d48Sopenharmony_ci html body img { 335fb726d48Sopenharmony_ci max-width: 99%; 336fb726d48Sopenharmony_ci } 337fb726d48Sopenharmony_ci 338fb726d48Sopenharmony_ci html body > p { 339fb726d48Sopenharmony_ci margin-top: 1px; 340fb726d48Sopenharmony_ci margin-bottom: 15px; 341fb726d48Sopenharmony_ci word-wrap: break-word; 342fb726d48Sopenharmony_ci } 343fb726d48Sopenharmony_ci 344fb726d48Sopenharmony_ci html body > ul, 345fb726d48Sopenharmony_ci html body > ol { 346fb726d48Sopenharmony_ci margin-bottom: 15px; 347fb726d48Sopenharmony_ci } 348fb726d48Sopenharmony_ci 349fb726d48Sopenharmony_ci html body ul, 350fb726d48Sopenharmony_ci html body ol { 351fb726d48Sopenharmony_ci padding-left: 1.9em; 352fb726d48Sopenharmony_ci } 353fb726d48Sopenharmony_ci 354fb726d48Sopenharmony_ci html body ul.no-list, 355fb726d48Sopenharmony_ci html body ol.no-list { 356fb726d48Sopenharmony_ci padding: 0px; 357fb726d48Sopenharmony_ci list-style-type: none; 358fb726d48Sopenharmony_ci } 359fb726d48Sopenharmony_ci 360fb726d48Sopenharmony_ci html body ul ul, 361fb726d48Sopenharmony_ci html body ul ol, 362fb726d48Sopenharmony_ci html body ol ol, 363fb726d48Sopenharmony_ci html body ol ul { 364fb726d48Sopenharmony_ci margin-top: 1px; 365fb726d48Sopenharmony_ci margin-bottom: 1px; 366fb726d48Sopenharmony_ci } 367fb726d48Sopenharmony_ci 368fb726d48Sopenharmony_ci html body li { 369fb726d48Sopenharmony_ci margin-bottom: 1px; 370fb726d48Sopenharmony_ci } 371fb726d48Sopenharmony_ci 372fb726d48Sopenharmony_ci html body li.task-list-item { 373fb726d48Sopenharmony_ci list-style: none; 374fb726d48Sopenharmony_ci } 375fb726d48Sopenharmony_ci 376fb726d48Sopenharmony_ci html body li > p { 377fb726d48Sopenharmony_ci margin-top: 1px; 378fb726d48Sopenharmony_ci margin-bottom: 1px; 379fb726d48Sopenharmony_ci } 380fb726d48Sopenharmony_ci 381fb726d48Sopenharmony_ci html body .task-list-item-checkbox { 382fb726d48Sopenharmony_ci margin: 0 0.3em 0.24em -1.7em; 383fb726d48Sopenharmony_ci vertical-align: middle; 384fb726d48Sopenharmony_ci } 385fb726d48Sopenharmony_ci 386fb726d48Sopenharmony_ci html body .task-list-item-checkbox:hover { 387fb726d48Sopenharmony_ci cursor: pointer; 388fb726d48Sopenharmony_ci } 389fb726d48Sopenharmony_ci 390fb726d48Sopenharmony_ci html body blockquote { 391fb726d48Sopenharmony_ci padding: 0.1px 15px 0 0.1px; 392fb726d48Sopenharmony_ci font-size: inherit; 393fb726d48Sopenharmony_ci color: #5c5c5c; 394fb726d48Sopenharmony_ci margin: 16px 0.1px 0 0.1px; 395fb726d48Sopenharmony_ci border-left: 3px solid #cbc9c9; 396fb726d48Sopenharmony_ci background-color: #e8e6e6; 397fb726d48Sopenharmony_ci } 398fb726d48Sopenharmony_ci 399fb726d48Sopenharmony_ci html body blockquote > :first-child { 400fb726d48Sopenharmony_ci margin-top: 0.2px; 401fb726d48Sopenharmony_ci } 402fb726d48Sopenharmony_ci 403fb726d48Sopenharmony_ci html body blockquote > :last-child { 404fb726d48Sopenharmony_ci margin-bottom: 0.1px; 405fb726d48Sopenharmony_ci } 406fb726d48Sopenharmony_ci 407fb726d48Sopenharmony_ci html body hr { 408fb726d48Sopenharmony_ci height: 5px; 409fb726d48Sopenharmony_ci background-color: #cbcaca; 410fb726d48Sopenharmony_ci margin: 32px 0 0.1px 0; 411fb726d48Sopenharmony_ci border: 0 none; 412fb726d48Sopenharmony_ci } 413fb726d48Sopenharmony_ci 414fb726d48Sopenharmony_ci html body table { 415fb726d48Sopenharmony_ci overflow: auto; 416fb726d48Sopenharmony_ci border-collapse: collapse; 417fb726d48Sopenharmony_ci margin: 15px 0.1px 20px 0.1px; 418fb726d48Sopenharmony_ci border-spacing: 0; 419fb726d48Sopenharmony_ci } 420fb726d48Sopenharmony_ci 421fb726d48Sopenharmony_ci html body table th { 422fb726d48Sopenharmony_ci font-weight: bold; 423fb726d48Sopenharmony_ci color: #000000; 424fb726d48Sopenharmony_ci } 425fb726d48Sopenharmony_ci 426fb726d48Sopenharmony_ci html body table td, 427fb726d48Sopenharmony_ci html body table th { 428fb726d48Sopenharmony_ci border: 1px solid #d6d6d6; 429fb726d48Sopenharmony_ci padding: 2px 14px; 430fb726d48Sopenharmony_ci } 431fb726d48Sopenharmony_ci 432fb726d48Sopenharmony_ci html body dl { 433fb726d48Sopenharmony_ci padding: 0px; 434fb726d48Sopenharmony_ci } 435fb726d48Sopenharmony_ci 436fb726d48Sopenharmony_ci html body dl dt { 437fb726d48Sopenharmony_ci padding: 0px; 438fb726d48Sopenharmony_ci margin-top: 15px; 439fb726d48Sopenharmony_ci font-size: 0.9em; 440fb726d48Sopenharmony_ci font-style: italic; 441fb726d48Sopenharmony_ci font-weight: bold; 442fb726d48Sopenharmony_ci } 443fb726d48Sopenharmony_ci 444fb726d48Sopenharmony_ci html body dl dd { 445fb726d48Sopenharmony_ci padding: 0px 17px; 446fb726d48Sopenharmony_ci margin-bottom: 17px; 447fb726d48Sopenharmony_ci } 448fb726d48Sopenharmony_ci 449fb726d48Sopenharmony_ci html body code { 450fb726d48Sopenharmony_ci font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; 451fb726d48Sopenharmony_ci font-size: 0.86em !important; 452fb726d48Sopenharmony_ci color: #000000; 453fb726d48Sopenharmony_ci background-color: #f0f0f0; 454fb726d48Sopenharmony_ci border-radius: 4px; 455fb726d48Sopenharmony_ci padding: 0.3em 0px; 456fb726d48Sopenharmony_ci } 457fb726d48Sopenharmony_ci 458fb726d48Sopenharmony_ci html body code::before, 459fb726d48Sopenharmony_ci html body code::after { 460fb726d48Sopenharmony_ci letter-spacing: -0.1em; 461fb726d48Sopenharmony_ci content: '\00a0'; 462fb726d48Sopenharmony_ci } 463fb726d48Sopenharmony_ci 464fb726d48Sopenharmony_ci html body pre > code { 465fb726d48Sopenharmony_ci padding: 1px; 466fb726d48Sopenharmony_ci margin: 0px; 467fb726d48Sopenharmony_ci font-size: 0.86em !important; 468fb726d48Sopenharmony_ci word-break: normal; 469fb726d48Sopenharmony_ci white-space: pre; 470fb726d48Sopenharmony_ci background: transparent; 471fb726d48Sopenharmony_ci border: 0px; 472fb726d48Sopenharmony_ci } 473fb726d48Sopenharmony_ci 474fb726d48Sopenharmony_ci html body .highlight { 475fb726d48Sopenharmony_ci margin-bottom: 17px; 476fb726d48Sopenharmony_ci } 477fb726d48Sopenharmony_ci 478fb726d48Sopenharmony_ci html body .highlight pre, 479fb726d48Sopenharmony_ci html body pre { 480fb726d48Sopenharmony_ci padding: 0.9em; 481fb726d48Sopenharmony_ci overflow: auto; 482fb726d48Sopenharmony_ci font-size: 0.86em !important; 483fb726d48Sopenharmony_ci line-height: 1.46; 484fb726d48Sopenharmony_ci border: #d6d6d6; 485fb726d48Sopenharmony_ci border-radius: 4px; 486fb726d48Sopenharmony_ci } 487fb726d48Sopenharmony_ci 488fb726d48Sopenharmony_ci html body .highlight pre { 489fb726d48Sopenharmony_ci margin-bottom: 0px; 490fb726d48Sopenharmony_ci word-break: normal; 491fb726d48Sopenharmony_ci } 492fb726d48Sopenharmony_ci 493fb726d48Sopenharmony_ci html body pre code, 494fb726d48Sopenharmony_ci html body pre tt { 495fb726d48Sopenharmony_ci display: inline; 496fb726d48Sopenharmony_ci max-width: initial; 497fb726d48Sopenharmony_ci padding: 1px; 498fb726d48Sopenharmony_ci margin: 1px; 499fb726d48Sopenharmony_ci overflow: initial; 500fb726d48Sopenharmony_ci line-height: inherit; 501fb726d48Sopenharmony_ci word-wrap: normal; 502fb726d48Sopenharmony_ci background-color: transparent; 503fb726d48Sopenharmony_ci border: 1px; 504fb726d48Sopenharmony_ci } 505fb726d48Sopenharmony_ci 506fb726d48Sopenharmony_ci html body pre code:before, 507fb726d48Sopenharmony_ci html body pre tt:before, 508fb726d48Sopenharmony_ci html body pre code:after, 509fb726d48Sopenharmony_ci html body pre tt:after { 510fb726d48Sopenharmony_ci content: normal; 511fb726d48Sopenharmony_ci } 512fb726d48Sopenharmony_ci 513fb726d48Sopenharmony_ci html body p, 514fb726d48Sopenharmony_ci html body blockquote, 515fb726d48Sopenharmony_ci html body ul, 516fb726d48Sopenharmony_ci html body ol, 517fb726d48Sopenharmony_ci html body dl, 518fb726d48Sopenharmony_ci html body pre { 519fb726d48Sopenharmony_ci margin-top: 1px; 520fb726d48Sopenharmony_ci margin-bottom: 17px; 521fb726d48Sopenharmony_ci } 522fb726d48Sopenharmony_ci 523fb726d48Sopenharmony_ci html body kbd { 524fb726d48Sopenharmony_ci color: #000000; 525fb726d48Sopenharmony_ci border: 3px solid #d6d6d6; 526fb726d48Sopenharmony_ci border-bottom: 3px solid #c7c7c7; 527fb726d48Sopenharmony_ci padding: 3px 5px; 528fb726d48Sopenharmony_ci background-color: #f0f0f0; 529fb726d48Sopenharmony_ci border-radius: 2px; 530fb726d48Sopenharmony_ci } 531fb726d48Sopenharmony_ci 532fb726d48Sopenharmony_ci @media print { 533fb726d48Sopenharmony_ci html body { 534fb726d48Sopenharmony_ci background-color: #ffffff; 535fb726d48Sopenharmony_ci } 536fb726d48Sopenharmony_ci 537fb726d48Sopenharmony_ci html body h1, 538fb726d48Sopenharmony_ci html body h2, 539fb726d48Sopenharmony_ci html body h3, 540fb726d48Sopenharmony_ci html body h4, 541fb726d48Sopenharmony_ci html body h5, 542fb726d48Sopenharmony_ci html body h6 { 543fb726d48Sopenharmony_ci color: #000000; 544fb726d48Sopenharmony_ci page-break-after: avoid; 545fb726d48Sopenharmony_ci } 546fb726d48Sopenharmony_ci 547fb726d48Sopenharmony_ci html body blockquote { 548fb726d48Sopenharmony_ci color: #5c5c53; 549fb726d48Sopenharmony_ci } 550fb726d48Sopenharmony_ci 551fb726d48Sopenharmony_ci html body pre { 552fb726d48Sopenharmony_ci page-break-inside: avoid; 553fb726d48Sopenharmony_ci } 554fb726d48Sopenharmony_ci 555fb726d48Sopenharmony_ci html body table { 556fb726d48Sopenharmony_ci display: table; 557fb726d48Sopenharmony_ci } 558fb726d48Sopenharmony_ci 559fb726d48Sopenharmony_ci html body img { 560fb726d48Sopenharmony_ci display: block; 561fb726d48Sopenharmony_ci max-width: 99%; 562fb726d48Sopenharmony_ci max-height: 99%; 563fb726d48Sopenharmony_ci } 564fb726d48Sopenharmony_ci 565fb726d48Sopenharmony_ci html body pre, 566fb726d48Sopenharmony_ci html body code { 567fb726d48Sopenharmony_ci word-wrap: break-word; 568fb726d48Sopenharmony_ci white-space: pre; 569fb726d48Sopenharmony_ci } 570fb726d48Sopenharmony_ci } 571fb726d48Sopenharmony_ci 572fb726d48Sopenharmony_ci .smartperf-preview { 573fb726d48Sopenharmony_ci width: 68vw; 574fb726d48Sopenharmony_ci height: 99%; 575fb726d48Sopenharmony_ci box-sizing: border-box; 576fb726d48Sopenharmony_ci overflow: hidden; 577fb726d48Sopenharmony_ci background-color: #fff; 578fb726d48Sopenharmony_ci } 579fb726d48Sopenharmony_ci 580fb726d48Sopenharmony_ci .smartperf-preview .pagebreak, 581fb726d48Sopenharmony_ci .smartperf-preview .newpage { 582fb726d48Sopenharmony_ci page-break-before: always; 583fb726d48Sopenharmony_ci } 584fb726d48Sopenharmony_ci 585fb726d48Sopenharmony_ci .smartperf-preview pre.line-numbers { 586fb726d48Sopenharmony_ci position: relative; 587fb726d48Sopenharmony_ci padding-left: 3.7em; 588fb726d48Sopenharmony_ci counter-reset: linenumber; 589fb726d48Sopenharmony_ci } 590fb726d48Sopenharmony_ci 591fb726d48Sopenharmony_ci .smartperf-preview pre.line-numbers > code { 592fb726d48Sopenharmony_ci position: relative; 593fb726d48Sopenharmony_ci } 594fb726d48Sopenharmony_ci 595fb726d48Sopenharmony_ci .smartperf-preview pre.line-numbers .line-numbers-rows { 596fb726d48Sopenharmony_ci position: absolute; 597fb726d48Sopenharmony_ci pointer-events: none; 598fb726d48Sopenharmony_ci top: 0.9em; 599fb726d48Sopenharmony_ci font-size: 99%; 600fb726d48Sopenharmony_ci left: 1px; 601fb726d48Sopenharmony_ci width: 3em; 602fb726d48Sopenharmony_ci letter-spacing: -1px; 603fb726d48Sopenharmony_ci border-right: 1px solid #999; 604fb726d48Sopenharmony_ci -webkit-user-select: none; 605fb726d48Sopenharmony_ci -moz-user-select: none; 606fb726d48Sopenharmony_ci -ms-user-select: none; 607fb726d48Sopenharmony_ci user-select: none; 608fb726d48Sopenharmony_ci } 609fb726d48Sopenharmony_ci 610fb726d48Sopenharmony_ci .smartperf-preview pre.line-numbers .line-numbers-rows > span { 611fb726d48Sopenharmony_ci pointer-events: none; 612fb726d48Sopenharmony_ci display: block; 613fb726d48Sopenharmony_ci counter-increment: linenumber; 614fb726d48Sopenharmony_ci } 615fb726d48Sopenharmony_ci 616fb726d48Sopenharmony_ci .smartperf-preview pre.line-numbers .line-numbers-rows > span:before { 617fb726d48Sopenharmony_ci content: counter(linenumber); 618fb726d48Sopenharmony_ci color: #999; 619fb726d48Sopenharmony_ci display: block; 620fb726d48Sopenharmony_ci padding-right: 0.79em; 621fb726d48Sopenharmony_ci text-align: right; 622fb726d48Sopenharmony_ci } 623fb726d48Sopenharmony_ci 624fb726d48Sopenharmony_ci .smartperf-preview .mathjax-exps .MathJax_Display { 625fb726d48Sopenharmony_ci text-align: center !important; 626fb726d48Sopenharmony_ci } 627fb726d48Sopenharmony_ci 628fb726d48Sopenharmony_ci .smartperf-preview:not([for='preview']) .code-chunk .btn-group { 629fb726d48Sopenharmony_ci display: none; 630fb726d48Sopenharmony_ci } 631fb726d48Sopenharmony_ci 632fb726d48Sopenharmony_ci .smartperf-preview:not([for='preview']) .code-chunk .status { 633fb726d48Sopenharmony_ci display: none; 634fb726d48Sopenharmony_ci } 635fb726d48Sopenharmony_ci 636fb726d48Sopenharmony_ci .smartperf-preview:not([for='preview']) .code-chunk .output-div { 637fb726d48Sopenharmony_ci margin-bottom: 16px; 638fb726d48Sopenharmony_ci } 639fb726d48Sopenharmony_ci 640fb726d48Sopenharmony_ci .scrollbar-style::-webkit-scrollbar { 641fb726d48Sopenharmony_ci width: 8px; 642fb726d48Sopenharmony_ci } 643fb726d48Sopenharmony_ci 644fb726d48Sopenharmony_ci .scrollbar-style::-webkit-scrollbar-track { 645fb726d48Sopenharmony_ci border-radius: 9px; 646fb726d48Sopenharmony_ci background-color: transparent; 647fb726d48Sopenharmony_ci } 648fb726d48Sopenharmony_ci 649fb726d48Sopenharmony_ci .scrollbar-style::-webkit-scrollbar-thumb { 650fb726d48Sopenharmony_ci border-radius: 6px; 651fb726d48Sopenharmony_ci background-color: rgba(150, 150, 150, 1); 652fb726d48Sopenharmony_ci border: 4px solid rgba(150, 150, 150, 1); 653fb726d48Sopenharmony_ci background-clip: content-box; 654fb726d48Sopenharmony_ci } 655fb726d48Sopenharmony_ci 656fb726d48Sopenharmony_ci html body[for='html-export']:not([dpm]) { 657fb726d48Sopenharmony_ci position: relative; 658fb726d48Sopenharmony_ci width: 99%; 659fb726d48Sopenharmony_ci height: 99%;; 660fb726d48Sopenharmony_ci overflow: auto; 661fb726d48Sopenharmony_ci } 662fb726d48Sopenharmony_ci 663fb726d48Sopenharmony_ci html body[for='html-export']:not([dpm]) .smartperf-preview { 664fb726d48Sopenharmony_ci position: relative; 665fb726d48Sopenharmony_ci top: 1px; 666fb726d48Sopenharmony_ci } 667fb726d48Sopenharmony_ci 668fb726d48Sopenharmony_ci @media screen and (min-width: 914px) { 669fb726d48Sopenharmony_ci html body[for='html-export']:not([dpm]) .smartperf-preview { 670fb726d48Sopenharmony_ci padding: 2em; 671fb726d48Sopenharmony_ci } 672fb726d48Sopenharmony_ci } 673fb726d48Sopenharmony_ci 674fb726d48Sopenharmony_ci @media screen and (max-width: 914px) { 675fb726d48Sopenharmony_ci html body[for='html-export']:not([dpm]) .smartperf-preview { 676fb726d48Sopenharmony_ci padding: 1.9em; 677fb726d48Sopenharmony_ci } 678fb726d48Sopenharmony_ci } 679fb726d48Sopenharmony_ci 680fb726d48Sopenharmony_ci @media screen and (max-width: 450px) { 681fb726d48Sopenharmony_ci html body[for='html-export']:not([dpm]) .smartperf-preview { 682fb726d48Sopenharmony_ci font-size: 15px !important; 683fb726d48Sopenharmony_ci padding: 1.1em; 684fb726d48Sopenharmony_ci } 685fb726d48Sopenharmony_ci } 686fb726d48Sopenharmony_ci 687fb726d48Sopenharmony_ci @media print { 688fb726d48Sopenharmony_ci html body[for='html-export']:not([dpm]) #sidebar-toc-btn { 689fb726d48Sopenharmony_ci display: none; 690fb726d48Sopenharmony_ci } 691fb726d48Sopenharmony_ci } 692fb726d48Sopenharmony_ci 693fb726d48Sopenharmony_ci html body[for='html-export']:not([dpm]) #sidebar-toc-btn { 694fb726d48Sopenharmony_ci position: fixed; 695fb726d48Sopenharmony_ci bottom: 9px; 696fb726d48Sopenharmony_ci left: 9px; 697fb726d48Sopenharmony_ci font-size: 28px; 698fb726d48Sopenharmony_ci cursor: pointer; 699fb726d48Sopenharmony_ci color: inherit; 700fb726d48Sopenharmony_ci z-index: 99; 701fb726d48Sopenharmony_ci width: 31px; 702fb726d48Sopenharmony_ci text-align: center; 703fb726d48Sopenharmony_ci opacity: 0.5; 704fb726d48Sopenharmony_ci } 705fb726d48Sopenharmony_ci 706fb726d48Sopenharmony_ci html body[for='html-export']:not([dpm])[hsst] #sidebar-toc-btn { 707fb726d48Sopenharmony_ci opacity: 1; 708fb726d48Sopenharmony_ci } 709fb726d48Sopenharmony_ci 710fb726d48Sopenharmony_ci html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc { 711fb726d48Sopenharmony_ci position: fixed; 712fb726d48Sopenharmony_ci top: 1px; 713fb726d48Sopenharmony_ci left: 1px; 714fb726d48Sopenharmony_ci width: 300px; 715fb726d48Sopenharmony_ci height: 99%; 716fb726d48Sopenharmony_ci padding: 32px 0 48px 0; 717fb726d48Sopenharmony_ci font-size: 14px; 718fb726d48Sopenharmony_ci box-shadow: 1px 1px 4px rgba(150, 150, 150, 0.33); 719fb726d48Sopenharmony_ci box-sizing: border-box; 720fb726d48Sopenharmony_ci overflow: auto; 721fb726d48Sopenharmony_ci background-color: inherit; 722fb726d48Sopenharmony_ci } 723fb726d48Sopenharmony_ci 724fb726d48Sopenharmony_ci html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc::-webkit-scrollbar { 725fb726d48Sopenharmony_ci width: 9px; 726fb726d48Sopenharmony_ci } 727fb726d48Sopenharmony_ci 728fb726d48Sopenharmony_ci html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc::-webkit-scrollbar-track { 729fb726d48Sopenharmony_ci border-radius: 11px; 730fb726d48Sopenharmony_ci background-color: transparent; 731fb726d48Sopenharmony_ci } 732fb726d48Sopenharmony_ci 733fb726d48Sopenharmony_ci html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc::-webkit-scrollbar-thumb { 734fb726d48Sopenharmony_ci border-radius: 6px; 735fb726d48Sopenharmony_ci background-color: rgba(150, 150, 150, 0.66); 736fb726d48Sopenharmony_ci border: 3px solid rgba(150, 150, 150, 0.66); 737fb726d48Sopenharmony_ci background-clip: content-box; 738fb726d48Sopenharmony_ci } 739fb726d48Sopenharmony_ci 740fb726d48Sopenharmony_ci html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc a { 741fb726d48Sopenharmony_ci text-decoration: none; 742fb726d48Sopenharmony_ci } 743fb726d48Sopenharmony_ci 744fb726d48Sopenharmony_ci html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc ul { 745fb726d48Sopenharmony_ci padding: 1px 1.7em; 746fb726d48Sopenharmony_ci margin-top: 0.9em; 747fb726d48Sopenharmony_ci } 748fb726d48Sopenharmony_ci 749fb726d48Sopenharmony_ci html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc li { 750fb726d48Sopenharmony_ci margin-bottom: 0.8em; 751fb726d48Sopenharmony_ci } 752fb726d48Sopenharmony_ci 753fb726d48Sopenharmony_ci html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc ul { 754fb726d48Sopenharmony_ci list-style-type: none; 755fb726d48Sopenharmony_ci } 756fb726d48Sopenharmony_ci 757fb726d48Sopenharmony_ci html body[for='html-export']:not([dpm])[hsst] .smartperf-preview { 758fb726d48Sopenharmony_ci left: 301px; 759fb726d48Sopenharmony_ci width: calc(100% - 300px); 760fb726d48Sopenharmony_ci padding: 2em calc(50% - 457px - 150px); 761fb726d48Sopenharmony_ci margin: 1px; 762fb726d48Sopenharmony_ci box-sizing: border-box; 763fb726d48Sopenharmony_ci } 764fb726d48Sopenharmony_ci 765fb726d48Sopenharmony_ci @media screen and (max-width: 1274px) { 766fb726d48Sopenharmony_ci html body[for='html-export']:not([dpm])[hsst] .smartperf-preview { 767fb726d48Sopenharmony_ci padding: 1.9em; 768fb726d48Sopenharmony_ci } 769fb726d48Sopenharmony_ci } 770fb726d48Sopenharmony_ci 771fb726d48Sopenharmony_ci @media screen and (max-width: 450px) { 772fb726d48Sopenharmony_ci html body[for='html-export']:not([dpm])[hsst] .smartperf-preview { 773fb726d48Sopenharmony_ci width: 99%; 774fb726d48Sopenharmony_ci } 775fb726d48Sopenharmony_ci } 776fb726d48Sopenharmony_ci 777fb726d48Sopenharmony_ci html body[for='html-export']:not([dpm]):not([hsst]) .md-sidebar-toc { 778fb726d48Sopenharmony_ci display: none; 779fb726d48Sopenharmony_ci } 780fb726d48Sopenharmony_ci </style> 781fb726d48Sopenharmony_ci </head> 782fb726d48Sopenharmony_ci <body for="html-export" id="body" style="margin:0"> 783fb726d48Sopenharmony_ci <div class="smartperf smartperf-preview" style="min-height: 99vh;"> 784fb726d48Sopenharmony_ci <h1 class="mume-header fontColor">Animation的抓取和展示说明</h1> 785fb726d48Sopenharmony_ci 786fb726d48Sopenharmony_ci <p class="fontColor">通过动效模板的指标项对图形子系统和应用做动效卡顿类问题分析。</p> 787fb726d48Sopenharmony_ci <h3 class="mume-header fontColor" id="header-index-1">Animation抓取参数的配置</h3> 788fb726d48Sopenharmony_ci 789fb726d48Sopenharmony_ci <p class="fontColor"> 790fb726d48Sopenharmony_ci <img src="../figures/animation/animationconfig.jpg" alt="GitHub Logo" /><br /> 791fb726d48Sopenharmony_ci 配置项说明： 792fb726d48Sopenharmony_ci </p> 793fb726d48Sopenharmony_ci <ul class="fontColor"> 794fb726d48Sopenharmony_ci <li> 795fb726d48Sopenharmony_ci <pre class="smartperf-text fontColor light"> 796fb726d48Sopenharmony_ciAnimationAnalysis：动效配置项的总开关。解析时请打开对应的Flags标记(Disabled切换为Enabled)。 797fb726d48Sopenharmony_ci</pre> 798fb726d48Sopenharmony_ci </li> 799fb726d48Sopenharmony_ci </ul> 800fb726d48Sopenharmony_ci <h3 class="mume-header fontColor" id="header-index-2">Animation展示说明</h3> 801fb726d48Sopenharmony_ci 802fb726d48Sopenharmony_ci <p class="fontColor">将抓取的Animation文件导入到smartperf工具中，查看图形子系统和应用动效卡顿类问题。</p> 803fb726d48Sopenharmony_ci <h3 class="mume-header fontColor" id="header-index-3">Animation泳道图展示</h3> 804fb726d48Sopenharmony_ci 805fb726d48Sopenharmony_ci <p class="fontColor"> 806fb726d48Sopenharmony_ci Animation的响应时延和完成时延泳道图显示，泳道图的Slice会显示响应时延和完成时延，如下图中的Response 807fb726d48Sopenharmony_ci delay(79.379165ms),Completion delay(2606.938539ms)。<br /> 808fb726d48Sopenharmony_ci <img src="../figures/animation/anrsdelayrow.jpg" alt="GitHub Logo" />。<br /> 809fb726d48Sopenharmony_ci Animation的动效曲线和帧间距的总泳道图，如图点击WindowScene_mm37旁边的小齿轮可以切换WindowScene。<br /> 810fb726d48Sopenharmony_ci <img src="../figures/animation/anrsallrow.jpg" alt="GitHub Logo" />。<br /> 811fb726d48Sopenharmony_ci Animation的动效曲线泳道图展示，如下：<br /> 812fb726d48Sopenharmony_ci <img src="../figures/animation/anieffectcurv.jpg" alt="GitHub Logo" /><br /> 813fb726d48Sopenharmony_ci 泳道图说明: 814fb726d48Sopenharmony_ci </p> 815fb726d48Sopenharmony_ci <ul class="fontColor"> 816fb726d48Sopenharmony_ci <li> 817fb726d48Sopenharmony_ci <pre class="smartperf-text fontColor light"> 818fb726d48Sopenharmony_ciAnimation Effect Curve旁边的齿轮显示的x,y,width,height,alpha是动效帧的属性值，可以切换。 819fb726d48Sopenharmony_ci</pre> 820fb726d48Sopenharmony_ci </li> 821fb726d48Sopenharmony_ci <li> 822fb726d48Sopenharmony_ci <pre class="smartperf-text fontColor light"> 823fb726d48Sopenharmony_ciAnimation Effect Curve泳道图红色的曲线代表的是异常判断点，也就是相邻两帧属性值相同的异常时间区间。 824fb726d48Sopenharmony_ci</pre> 825fb726d48Sopenharmony_ci </li> 826fb726d48Sopenharmony_ci </ul> 827fb726d48Sopenharmony_ci <p class="fontColor"> 828fb726d48Sopenharmony_ci Animation的帧间距泳道图展示，如下:<br /> 829fb726d48Sopenharmony_ci <img src="../figures/animation/framespacirow.jpg" alt="GitHub Logo" /><br /> 830fb726d48Sopenharmony_ci 泳道图说明: 831fb726d48Sopenharmony_ci </p> 832fb726d48Sopenharmony_ci <ul class="fontColor"> 833fb726d48Sopenharmony_ci <li> 834fb726d48Sopenharmony_ci <pre class="smartperf-text fontColor light"> 835fb726d48Sopenharmony_ciFrame spacing泳道图显示相邻两帧在时间尺度上相对于设备物理屏幕的变化间距值。 836fb726d48Sopenharmony_ci</pre> 837fb726d48Sopenharmony_ci </li> 838fb726d48Sopenharmony_ci </ul> 839fb726d48Sopenharmony_ci <h3 class="mume-header fontColor" id="header-index-4">动效曲线泳道图点选功能</h3> 840fb726d48Sopenharmony_ci 841fb726d48Sopenharmony_ci <p class="fontColor"> 842fb726d48Sopenharmony_ci 点选动效曲线泳道图上的属性值会出现一个空心小圆点，Frame Dynamic的Tab页会显示相关信息。<br /> 843fb726d48Sopenharmony_ci <img src="../figures/animation/anieffectcurvselect.jpg" alt="GitHub Logo" /> 844fb726d48Sopenharmony_ci </p> 845fb726d48Sopenharmony_ci <ul class="fontColor"> 846fb726d48Sopenharmony_ci <li> 847fb726d48Sopenharmony_ci <pre class="smartperf-text fontColor light"> 848fb726d48Sopenharmony_ciTimestamp： 时间戳信息。 849fb726d48Sopenharmony_ci</pre> 850fb726d48Sopenharmony_ci </li> 851fb726d48Sopenharmony_ci <li> 852fb726d48Sopenharmony_ci <pre class="smartperf-text fontColor light"> 853fb726d48Sopenharmony_ciIndex： 属性索引。 854fb726d48Sopenharmony_ci</pre> 855fb726d48Sopenharmony_ci </li> 856fb726d48Sopenharmony_ci <li> 857fb726d48Sopenharmony_ci <pre class="smartperf-text fontColor light"> 858fb726d48Sopenharmony_ciValue：属性值。 859fb726d48Sopenharmony_ci</pre> 860fb726d48Sopenharmony_ci </li> 861fb726d48Sopenharmony_ci </ul> 862fb726d48Sopenharmony_ci <h3 class="mume-header fontColor" id="header-index-5">动效曲线泳道图框选功能</h3> 863fb726d48Sopenharmony_ci 864fb726d48Sopenharmony_ci <p class="fontColor"> 865fb726d48Sopenharmony_ci 框选动效曲线泳道图，Frame Dynamic的Tab页会显示框选范围内每个点的属性值。<br /> 866fb726d48Sopenharmony_ci <img src="../figures/animation/anieffectcurvdrag.jpg" alt="GitHub Logo" /> 867fb726d48Sopenharmony_ci </p> 868fb726d48Sopenharmony_ci <ul class="fontColor"> 869fb726d48Sopenharmony_ci <li> 870fb726d48Sopenharmony_ci <pre class="smartperf-text fontColor light"> 871fb726d48Sopenharmony_ciTimestamp： 时间戳信息。 872fb726d48Sopenharmony_ci</pre> 873fb726d48Sopenharmony_ci </li> 874fb726d48Sopenharmony_ci <li> 875fb726d48Sopenharmony_ci <pre class="smartperf-text fontColor light"> 876fb726d48Sopenharmony_ciIndex： 属性索引。 877fb726d48Sopenharmony_ci</pre> 878fb726d48Sopenharmony_ci </li> 879fb726d48Sopenharmony_ci <li> 880fb726d48Sopenharmony_ci <pre class="smartperf-text fontColor light"> 881fb726d48Sopenharmony_ciValue：属性值。 882fb726d48Sopenharmony_ci</pre> 883fb726d48Sopenharmony_ci </li> 884fb726d48Sopenharmony_ci </ul> 885fb726d48Sopenharmony_ci <h3 class="mume-header fontColor" id="header-index-6">帧间距泳道图点选功能</h3> 886fb726d48Sopenharmony_ci 887fb726d48Sopenharmony_ci <p class="fontColor"> 888fb726d48Sopenharmony_ci 点选帧间距泳道图，Frame 889fb726d48Sopenharmony_ci spacing的Tab页会显示这一个点的帧间距计算数据，一个点要计算四个属性的的帧间距，所以需要显示四个属性的。<br /> 890fb726d48Sopenharmony_ci <img src="../figures/animation/anispacingselect.jpg" alt="GitHub Logo" /> 891fb726d48Sopenharmony_ci </p> 892fb726d48Sopenharmony_ci <ul class="fontColor"> 893fb726d48Sopenharmony_ci <li> 894fb726d48Sopenharmony_ci <pre class="smartperf-text fontColor light"> 895fb726d48Sopenharmony_ciTimestamp： 时间戳信息。 896fb726d48Sopenharmony_ci</pre> 897fb726d48Sopenharmony_ci </li> 898fb726d48Sopenharmony_ci <li> 899fb726d48Sopenharmony_ci <pre class="smartperf-text fontColor light"> 900fb726d48Sopenharmony_ciIndex： 属性索引。 901fb726d48Sopenharmony_ci</pre> 902fb726d48Sopenharmony_ci </li> 903fb726d48Sopenharmony_ci <li> 904fb726d48Sopenharmony_ci <pre class="smartperf-text fontColor light"> 905fb726d48Sopenharmony_ciproperty：动效宽度，高度，X，Y的属性。 906fb726d48Sopenharmony_ci</pre> 907fb726d48Sopenharmony_ci </li> 908fb726d48Sopenharmony_ci <li> 909fb726d48Sopenharmony_ci <pre class="smartperf-text fontColor light"> 910fb726d48Sopenharmony_ciValue2： 当前帧的属性值。 911fb726d48Sopenharmony_ci</pre> 912fb726d48Sopenharmony_ci </li> 913fb726d48Sopenharmony_ci <li> 914fb726d48Sopenharmony_ci <pre class="smartperf-text fontColor light"> 915fb726d48Sopenharmony_ciValue1： 前一帧的属性值。 916fb726d48Sopenharmony_ci</pre> 917fb726d48Sopenharmony_ci </li> 918fb726d48Sopenharmony_ci <li> 919fb726d48Sopenharmony_ci <pre class="smartperf-text fontColor light"> 920fb726d48Sopenharmony_ciScreen：存储设备的物理宽度/高度。 921fb726d48Sopenharmony_ci</pre> 922fb726d48Sopenharmony_ci </li> 923fb726d48Sopenharmony_ci <li> 924fb726d48Sopenharmony_ci <pre class="smartperf-text fontColor light"> 925fb726d48Sopenharmony_ciT2(s)： 当前帧的结束时间。 926fb726d48Sopenharmony_ci</pre> 927fb726d48Sopenharmony_ci </li> 928fb726d48Sopenharmony_ci <li> 929fb726d48Sopenharmony_ci <pre class="smartperf-text fontColor light"> 930fb726d48Sopenharmony_ciT1(s)： 前一帧的结束时间。 931fb726d48Sopenharmony_ci</pre> 932fb726d48Sopenharmony_ci </li> 933fb726d48Sopenharmony_ci <li> 934fb726d48Sopenharmony_ci <pre class="smartperf-text fontColor light"> 935fb726d48Sopenharmony_ciresult：帧间距。 936fb726d48Sopenharmony_ci</pre> 937fb726d48Sopenharmony_ci </li> 938fb726d48Sopenharmony_ci </ul> 939fb726d48Sopenharmony_ci <h3 class="mume-header fontColor" id="header-index-7">帧间距泳道图框选功能</h3> 940fb726d48Sopenharmony_ci 941fb726d48Sopenharmony_ci <p class="fontColor"> 942fb726d48Sopenharmony_ci 框选帧间距泳道图，Frame spacing的Tab页会显示框选范围内帧间距数据。<br /> 943fb726d48Sopenharmony_ci <img src="../figures/animation/anispacingdrag.jpg" alt="GitHub Logo" /> 944fb726d48Sopenharmony_ci </p> 945fb726d48Sopenharmony_ci <ul class="fontColor"> 946fb726d48Sopenharmony_ci <li> 947fb726d48Sopenharmony_ci <pre class="smartperf-text fontColor light"> 948fb726d48Sopenharmony_ciTimestamp： 时间戳信息。 949fb726d48Sopenharmony_ci</pre> 950fb726d48Sopenharmony_ci </li> 951fb726d48Sopenharmony_ci <li> 952fb726d48Sopenharmony_ci <pre class="smartperf-text fontColor light"> 953fb726d48Sopenharmony_ciIndex： 属性索引。 954fb726d48Sopenharmony_ci</pre> 955fb726d48Sopenharmony_ci </li> 956fb726d48Sopenharmony_ci <li> 957fb726d48Sopenharmony_ci <pre class="smartperf-text fontColor light"> 958fb726d48Sopenharmony_ciproperty：动效宽度，高度，X，Y的属性。 959fb726d48Sopenharmony_ci</pre> 960fb726d48Sopenharmony_ci </li> 961fb726d48Sopenharmony_ci <li> 962fb726d48Sopenharmony_ci <pre class="smartperf-text fontColor light"> 963fb726d48Sopenharmony_ciValue2： 当前帧的属性值。 964fb726d48Sopenharmony_ci</pre> 965fb726d48Sopenharmony_ci </li> 966fb726d48Sopenharmony_ci <li> 967fb726d48Sopenharmony_ci <pre class="smartperf-text fontColor light"> 968fb726d48Sopenharmony_ciValue1： 前一帧的属性值。 969fb726d48Sopenharmony_ci</pre> 970fb726d48Sopenharmony_ci </li> 971fb726d48Sopenharmony_ci <li> 972fb726d48Sopenharmony_ci <pre class="smartperf-text fontColor light"> 973fb726d48Sopenharmony_ciScreen：存储设备的物理宽度/高度。 974fb726d48Sopenharmony_ci</pre> 975fb726d48Sopenharmony_ci </li> 976fb726d48Sopenharmony_ci <li> 977fb726d48Sopenharmony_ci <pre class="smartperf-text fontColor light"> 978fb726d48Sopenharmony_ciT2(s)： 当前帧的结束时间。 979fb726d48Sopenharmony_ci</pre> 980fb726d48Sopenharmony_ci </li> 981fb726d48Sopenharmony_ci <li> 982fb726d48Sopenharmony_ci <pre class="smartperf-text fontColor light"> 983fb726d48Sopenharmony_ciT1(s)： 前一帧的结束时间。 984fb726d48Sopenharmony_ci</pre> 985fb726d48Sopenharmony_ci </pre> 986fb726d48Sopenharmony_ci </li> 987fb726d48Sopenharmony_ci <li> 988fb726d48Sopenharmony_ci <pre class="smartperf-text fontColor light"> 989fb726d48Sopenharmony_ciresult：帧间距。 990fb726d48Sopenharmony_ci</pre> 991fb726d48Sopenharmony_ci </li> 992fb726d48Sopenharmony_ci </ul> 993fb726d48Sopenharmony_ci </div> 994fb726d48Sopenharmony_ci 995fb726d48Sopenharmony_ci <script> 996fb726d48Sopenharmony_ci window.onload = () => { 997fb726d48Sopenharmony_ci let isDark = getURLParameter('dark'); 998fb726d48Sopenharmony_ci let targetId = getURLParameter('targetId'); 999fb726d48Sopenharmony_ci let isBack = getURLParameter('isBack'); 1000fb726d48Sopenharmony_ci if (isDark === 'true') { 1001fb726d48Sopenharmony_ci document.getElementById('body').setAttribute('style', 'background-color:#272C34;'); 1002fb726d48Sopenharmony_ci let header = document.getElementsByClassName('fontColor'); 1003fb726d48Sopenharmony_ci for (let i = 0; i < header.length; i++) { 1004fb726d48Sopenharmony_ci header[i].style.color = '#fff'; 1005fb726d48Sopenharmony_ci } 1006fb726d48Sopenharmony_ci let lightBackGround = document.getElementsByClassName('light'); 1007fb726d48Sopenharmony_ci for (let i = 0; i < lightBackGround.length; i++) { 1008fb726d48Sopenharmony_ci lightBackGround[i].style.backgroundColor = '#32373F'; 1009fb726d48Sopenharmony_ci } 1010fb726d48Sopenharmony_ci } 1011fb726d48Sopenharmony_ci function getURLParameter(name) { 1012fb726d48Sopenharmony_ci return (new URL(document.location)).searchParams.get(name); 1013fb726d48Sopenharmony_ci } 1014fb726d48Sopenharmony_ci 1015fb726d48Sopenharmony_ci if ( targetId !== null ) { 1016fb726d48Sopenharmony_ci let targetElement = document.getElementById(targetId); 1017fb726d48Sopenharmony_ci targetElement.scrollIntoView({ behavior: 'smooth' }); 1018fb726d48Sopenharmony_ci } 1019fb726d48Sopenharmony_ci }; 1020fb726d48Sopenharmony_ci </script> 1021fb726d48Sopenharmony_ci </body> 1022fb726d48Sopenharmony_ci</html> 1023
