角度2アニメーション

Question

Iは、（marqueeeのような）テキストをスクロールとの成分を有する、私はスクロール速度（秒あたりのピクセル）を指定するパラメータを有しています。

コンポーネントからメソッドを使用してアニメーションの長さを動的に指定するにはどうすればよいですか？

は、次のコンポーネントを想定します

import {Component, Input, ElementRef, trigger, state, style, transition, animate} from '@angular/core'; 
import * as $ from 'jquery'; 

const SCROLL_SPEED_DEFAULT = 25; 

@Component({ 
    selector: 'text-scroll', 
    template: '<span><ng-content></ng-content></span>', 
    animations: [ 
    trigger('hover', [ 
     state('idle', style({transformX: '0'})), 
     state('scrolled', style({transformX: '-100%'})), 
     transition('idle => scrolled', [ 
     animate(this.getAnimationSpeed()) 
     ]) 
    ]) 
    ] 
}) 
export class TextScrollComponent { 
    @Input('speed') speedTime: number = SCROLL_SPEED_DEFAULT; 
    private element: HTMLElement; 

    constructor(private el: ElementRef) { 
    this.element = this.el.nativeElement; 
    } 

    public getAnimationSpeed(): number { 
    let element = this.element; 
    let elementWidth = $(element).width(); 
    let difference = this.el.nativeElement.scrollWidth - elementWidth; 

    return (difference/Number(this.speedTime)) * 1000; 
    } 
} 

テンプレート：現在

<text-scroll>My very <b>loooong..</b> text</text-scroll> 

Answer 1

、私はこの使用して@Componentデコレータを行うための方法を見つけることはできませんが、多分Renderer.animateがします適切である