Улучшение производительности моей угловой анимации - PullRequest
Новая
       73

Улучшение производительности моей угловой анимации

0 голосов
/ 13 октября 2019

У меня есть анимация, в которой 4 группы svg поворачиваются на 90 или 180 градусов в течение 6,8 секунд. Это выглядит довольно изменчиво с точки зрения частоты кадров. Я попытался поместить вызов animationplayer.play () в setTimeout (), поскольку интернет-специалист рекомендовал выгружать тяжелые анимации из обработчиков событий, но улучшения не было.

Вы можете найти живой пример анимациив samueljenks.me

анимация 

import { animation, style, animate, sequence } from "@angular/animations";
import { rotatename, degreesunit } from './styleconstants';

export const rotationtime = 6800
export const anglename = 'angle'
export const inputtimename = 'inputtime'

export const normalkick = `.21, .14, 0, -0.32`
export const flipkick = '.5, 0.09, .3, 0.39'

export const curvename = 'curve'

/**parameters: inputangle, angle, curve */
export const rotatetablet90withkick = animation(    
    animate(
        `{{ ${inputtimename} }}ms cubic-bezier({{ ${curvename} }})`,
        style({
            transform: `${rotatename}({{ ${anglename} }}${degreesunit})`
        }),
    )
)

обработчик события 

  @Input()
  public set currentrotation(input: number) {
    let difference = Math.abs(input - this.currentrotationfield)
    let shoulduseflip = difference === flip
    let currentangle = this.currentrotationfield
    this.currentrotationfield = input

    if(this.initialized === false) {
      return
    }

    setTimeout(() => {
      this.applyrotation(currentangle, input, shoulduseflip)
    })
  }

вид 

<svg>
    <defs>
        <clipPath id="overflow-container">
            <rect class="overflow-container"></rect>
        </clipPath>        
    </defs> 

    <g style="isolation:isolate" 
        id="tablet"
        #tablet>                        
        <rect x="1306.262" y="631.324" width="904.487" height="1468.676" transform="matrix(1,0,-0.008,1,10.575,0)" fill="rgb(204,195,184)" />
        <path d=" M 1312.156 630.936 L 1306.94 1784.414 Q 1425.034 1510.833 1493.632 1023.123 Q 1545.927 778.69 1703.234 630.499 L 1312.156 630.936 Z " fill="rgb(213,206,198)" />
        <path d=" M 2213.25 1232.832 L 2217.687 629.764 L 1703.375 630.45 Q 1524.035 794.288 1480.211 1106.153 Q 1436.387 1418.018 1306.956 1786.655 L 1305.618 2096.467 L 2205.646 2096.423 L 2213.25 1232.832 Z " fill="rgb(213,209,206)" />
        <path d=" M 2205.399 2096.846 L 1924.14 2096.789 Q 2076 1932.855 2119.168 1670.295 Q 2162.337 1407.735 2212.79 1233.626 L 2205.399 2096.846 Z " fill="rgb(213,206,198)" />
        <path d=" M 2217.594 629.765 L 2320.125 556.18 L 2330.102 1985.496 L 2205.774 2096.842 L 2217.594 629.765 Z " fill="rgb(221,216,213)" />
        <path d=" M 1312.031 631.2 L 2217.907 630.718 L 2319.938 556.416 L 1419.369 557.044 L 1312.031 631.2 Z " fill="rgb(227,223,220)" />
        <g app-pageloader [injectedpage]="initialdata.page"></g>                
    </g>    
</svg>
...