Animationsübungen für Winkelanimationen

Das Animationssystem von Angular2 bietet Ihnen die Möglichkeit, verschiedene Animationseffekte zu erstellen, und ist bestrebt, Animationen mit der gleichen Leistung wie native CSS-Animationen zu erstellen.
Angular2-Animationen werden hauptsächlich mit @Component kombiniert.
Das Animationsmetadatenattribut wird in der @Component-Dekoration definiert. Genau wie das Metadatenattribut der Vorlage! Dadurch kann die Animationslogik eng in den Anwendungscode integriert werden, was das Starten und Steuern von Animationen erleichtert.

Rückruffunktion

Die Rückrufmethode ist ebenfalls sehr einfach und lautet wie folgt:

Die Verwendung von

  <p *ngIf="Group" style="height: 100px;width: 100px;background-color: black; border-radius: 50px;"
       [@GroupAnimate]="boxState" (@GroupAnimate.done)="Callback(false)" (@GroupAnimate.start)="Callback(true)">
  </p>


  Callback(f:boolean){
    if(f){
      console.log("动画开始");
    }else {
      console.log("动画结束");
    }
  }

Abfrage

entspricht in etwa der Verwendung von CSS-Selektoren. Durch Abfragen können verschiedene Elemente unterschiedliche Animationseffekte erzielen.

/*
query选择器演示
用法和css选择器大致相同
 */
export const QueryAnimate = trigger('QueryAnimate',[
    transition('off=>on', [
      // 先全部隐藏
      query('p', style({ opacity: 0 })),
      // 再执行动画
      query('.box-top', animate('500ms',keyframes([
        style({opacity: 0, transform: 'translateY(-400%)', offset: 0}),
        style({opacity: 1, transform: 'translateY(0)',     offset: 1.0})
      ]) )),
      query('.box-center', animate('500ms',keyframes([
        style({opacity: 0, transform: 'translateX(-400%)', offset: 0}),
        style({opacity: 1, transform: 'translateX(0)',     offset: 1.0})
      ]) )),
      query('.box-foot', animate('500ms',keyframes([
        style({opacity: 0, transform: 'translateY(400%)', offset: 0}),
        style({opacity: 1, transform: 'translateY(0)',     offset: 1.0})
      ]) )),
      query('h2', animate('500ms',keyframes([
        style({transform:'scale(0.5)'}),
        style({transform: 'scale(1)'})
      ]) )),
    ]),
    transition('on=>off', [
      query('.box-top', animate('500ms',keyframes([
        style({opacity: 1, transform: 'translateY(0)'}),
        style({opacity: 0, transform: 'translateY(-400%)'})
      ]) )),
      query('.box-center', animate('500ms',keyframes([
        style({opacity: 1, transform: 'translateX(0)'}),
        style({opacity: 0, transform: 'translateX(-400%)'})
      ]) )),
      query('.box-foot', animate('500ms',keyframes([
        style({opacity: 1, transform: 'translateY(0)'}),
        style({opacity: 0, transform: 'translateY(400%)'})
      ]) )),
      query('h2', animate('500ms',keyframes([
        style({transform:'scale(1)'}),
        style({transform: 'scale(0.5)'})
      ]) )),
    ])
  ]);

Verwandte Empfehlungen;

Transformation, Übergang in CSS3 Detaillierte Beispiele für den Unterschied zwischen Animationen und Animationen

Tutorial zur Verwendung von CSS-Animationsanimationen

Animation zur Realisierung der Animation schwebender Wolken Beispiel

Das obige ist der detaillierte Inhalt vonAnimationsübungen für Winkelanimationen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!