角4编程式动画
角4编程式动画
提问于 2017-09-11 22:11:05
如何通过编程添加动画？
@Component({
moduleId: module.id,
selector: 'my-toolbar',
templateUrl: './my-toolbar.component.html',
styleUrls: ['./my-toolbar.component.scss'],
encapsulation: ViewEncapsulation.None,
animations: [
trigger('myToolbarState', [
state('initial', style({top: '*'})),
state('up', style({top: '-50px')),
transition('initial => up, up => initial',
animate(HEADER_SHRINK_TRANSITION))
])
]
})如何在没有注释的情况下实现相同的功能？我的基本目标是创建一个动态触发器函数，该函数基于某些@Input使用不同的值。
需要注意的是，动画或触发器必须至少有一个变量。这使得这个问题不同于如何重用动画。
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-09-13 17:45:49
我最后得到了以下工厂类，如下所示，用于animations[]：
这一用途如下：
@Component({
selector: 'my-app-header',
moduleId: module.id,
templateUrl: './app-header.component.html',
styleUrls: ['./app-header.component.scss'],
animations: [
MyToolbarAnimator.createTrigger('appHeaderState', '50px', '0')
]
})用静态方法MyToolbarAnimator定义createTrigger，该方法返回AnimationTriggerMetadata，如下所示
MyToolbarAnimator
import {trigger, state, style, animate, transition, AnimationTriggerMetadata} from '@angular/animations';
export const HEADER_SHRINK_TRANSITION = '250ms cubic-bezier(0.4,0.0,0.2,1)';
export class MyToolbarAnimator {
static createTrigger(triggerName: string, initialTop: string, upTop: string): AnimationTriggerMetadata {
return trigger(triggerName, [
state('initial', style({top: initialTop})),
state('up', style({top: upTop})),
transition('initial => up, up => initial',
animate(HEADER_SHRINK_TRANSITION))
]);
}
}更新：
或者，如果您的动画参数非常动态，并且基于组件行为进行更改，则请使用https://angular.io/api/animations/AnimationBuilder#usage-notes
// import the service from BrowserAnimationsModule
import {AnimationBuilder} from '@angular/animations';
// require the service as a dependency
class MyCmp {
width = 100;
constructor(private _builder: AnimationBuilder) {}
changeWidth(aWidth:number) {
this.width = aWidth;
}
makeAnimation(element: any) {
// first define a reusable animation
const myAnimation = this._builder.build([
style({ width: 0 }),
animate(1000, style({ width: `${this.width}px` }))
]);
// use the returned factory object to create a player
const player = myAnimation.create(element);
player.play();
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46165023
复制相关文章
相似问题
腾讯云开发者
