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