angular - समझत - कोणीय संवेग का मात्रक क्या है




आप कोणीय 2 में पुन: प्रयोज्य एनिमेशन कैसे बनाते हैं (4)

मैं एनिमेशन एपीआई के साथ खेल रहा हूं, और मैं एक पुन: प्रयोज्य एनीमेशन बनाना चाहूंगा जैसे कि शीर्ष स्तर के राउटर दृश्यों के लिए सामग्री में स्लाइड करना। मैं फंकी मेटा डेटा सिंटैक्स के माध्यम से प्राप्त करने में कामयाब रहा (जो वास्तव में बहुत अच्छा है एक बार मेटाडेटा का उपयोग करने का पागल विचार प्राप्त करें) ज्यादातर एनिमेशन काम करने के लिए।

   @Component({
      //moduleId: module.id,
      selector: 'album-display',
      templateUrl: './albumDisplay.html',
      animations: [
        trigger('slideIn', [
          state('*', style({
            transform: 'translateX(100%)',
          })),
          state('in', style({
            transform: 'translateX(0)',
          })),
          state('out',   style({
            transform: 'translateX(-100%)',
          })),
          transition('* => in', animate('600ms ease-in')),
          transition('in => out', animate('600ms ease-in'))
        ])
      ]
  })
  export class AlbumDisplay implements OnInit {
      slideInState = 'in';
      ...
  }

और फिर घटक में मेरे शीर्ष स्तर तत्व को असाइन करना:

  <div  class="container" [@slideIn]="slideInState">

तो यह काम करता है, लेकिन मैं इसे कैसे पुन: उपयोग कर सकता हूं? मैं इस मेटा डेटा को हर दृश्य पर नहीं रखना चाहता। चूंकि यह मेटाडेटा है, मुझे यकीन नहीं है कि आप इस पुन: प्रयोज्य कैसे बना सकते हैं।


एक वर्ग के साथ और आप बढ़ाया जा सकता है,

import { trigger, style, state, animate, transition, AnimationMetadata } from "@angular/core";
export class MyAwesomeAnimations {

    /**
     * 
     * @param nameTrigger Name of triggers
     * @param setNewsStates add states for animations
     * @param setNewTransitions add transitions for states
     */
    SetTrigger(nameTrigger: string, setNewsStates?: AnimationMetadata[], setNewTransitions?: AnimationMetadata[]): any {
        let metaData: AnimationMetadata[] = [
            state('*', style({
                transform: 'translateX(100%)',
            })),
            state('in', style({
                transform: 'translateX(0)',
            })),
            state('out', style({
                transform: 'translateX(-100%)',
            })),
            transition('* => in', animate('600ms ease-in')),
            transition('in => out', animate('600ms ease-in'))
        ];
        if (setNewsStates)
            metaData.concat(setNewsStates);
        if (setNewTransitions)
            metaData.concat(setNewTransitions);


        return trigger(nameTrigger, metaData);
    }
}

उपयोग के लिए

    @Component({
        selector: "orden-detail-component",
        animations: [new MyAwesomeAnimations().SetTrigger("slideIn")],
        template:"<div  class="container" [@slideIn]="slideInState">"
    })
    export class OrdenDetailComponent {
       slideInState = 'in';
    }

मुझे उम्मीद है कि वह तरीका आपकी मदद कर सकता है


एक संभव तरीका यह है कि एनीमेशन ट्रिगर कोड को अलग फ़ाइल में रखा जाए और इसे const चर के रूप में निर्यात किया जाए और नीचे दिए गए घटक में इसका उपयोग किया जाए।

animations.ts

import { trigger, state, style, transition, animate } from '@angular/core';

export const slideIn = trigger('slideIn', [
  state('*', style({
    transform: 'translateX(100%)',
  })),
  state('in', style({
    transform: 'translateX(0)',
  })),
  state('out',   style({
    transform: 'translateX(-100%)',
  })),
  transition('* => in', animate('600ms ease-in')),
  transition('in => out', animate('600ms ease-in'))
]);

एल्बम-display.component.ts

import { slideIn } from './animations'; // path to your animations.ts file

@Component({
    //moduleId: module.id,
    selector: 'album-display',
    templateUrl: './albumDisplay.html',
    animations: [
      slideIn
    ]
})
export class AlbumDisplay implements OnInit {
    slideInState = 'in';
    ...
}

शायद थोड़ी देर हो गई है, लेकिन मैं अभी भी ट्रिगर के अधिक गतिशील संस्करण के लिए एक उत्तर देना चाहूंगा।

अलग फ़ाइल में एनीमेशन ट्रिगर कोड रखो और इसे function रूप में निर्यात करें।

translate.ts

import { AnimationEntryMetadata, trigger, state, style, transition, animate } from '@angular/core';

export function TranslateX( name: string, x: string, duration: number ): AnimationEntryMetadata {
    return trigger( name, [
            state('false', style({ transform: 'translateX(0)' }) ),
            state('true',  style({ transform: 'translateX(' + x + ')' }) ),
            transition('0 => 1', animate( duration + 'ms ease-in')),
            transition('1 => 0', animate( duration + 'ms ease-out')),
        ]);
}

इसलिए, घटक app.component.ts में

import { TranslateX } from './translate';

@Component({
    ...
    templateUrl: './app.component.html',
    animations:   [ 
                    TranslateX( 'trigger1Title','-100%', 200 ),
                    TranslateX( 'trigger2Title','20vw', 700 )
                  ]
    ...
})

और टेम्पलेट app.component.html में

...
<div [@trigger1Title]="token1"> ... </div>
<div [@trigger2Title]="token2"> ... </div>
...

आप अधिक इनपुट डेटा के साथ ट्रिगर को अनुकूलित कर सकते हैं, उदाहरण के लिए संक्रमण के समय को अलग करना, और इसी तरह।


एंगुलर 4 में राउटर एनीमेशन उदाहरण

मैंने राउटर एनिमेशन का उपयोग करते हुए अपने आप को एंगुलर 4 से निपटने के लिए तैयार कर लिया है, यहाँ कुछ उदाहरण ऐनिमेशन हैं जो मैं संक्रमण और फीचर्स इन / आउट ट्रांजिशन में फीका करने के लिए आया था।

अधिक जानकारी और लाइव डेमो के लिए इस पोस्ट को देखें।

कोणीय 4 स्लाइड इन / आउट एनीमेशन

// import the required animation functions from the angular animations module
import { trigger, state, animate, transition, style } from '@angular/animations';
 
export const slideInOutAnimation =
    // trigger name for attaching this animation to an element using the [@triggerName] syntax
    trigger('slideInOutAnimation', [
 
        // end state styles for route container (host)
        state('*', style({
            // the view covers the whole screen with a semi tranparent background
            position: 'fixed',
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            backgroundColor: 'rgba(0, 0, 0, 0.8)'
        })),
 
        // route 'enter' transition
        transition(':enter', [
 
            // styles at start of transition
            style({
                // start with the content positioned off the right of the screen,
                // -400% is required instead of -100% because the negative position adds to the width of the element
                right: '-400%',
 
                // start with background opacity set to 0 (invisible)
                backgroundColor: 'rgba(0, 0, 0, 0)'
            }),
 
            // animation and styles at end of transition
            animate('.5s ease-in-out', style({
                // transition the right position to 0 which slides the content into view
                right: 0,
 
                // transition the background opacity to 0.8 to fade it in
                backgroundColor: 'rgba(0, 0, 0, 0.8)'
            }))
        ]),
 
        // route 'leave' transition
        transition(':leave', [
            // animation and styles at end of transition
            animate('.5s ease-in-out', style({
                // transition the right position to -400% which slides the content out of view
                right: '-400%',
 
                // transition the background opacity to 0 to fade it out
                backgroundColor: 'rgba(0, 0, 0, 0)'
            }))
        ])
    ]);

एनीमेशन में कोणीय 4 फीका

// import the required animation functions from the angular animations module
import { trigger, state, animate, transition, style } from '@angular/animations';
 
export const fadeInAnimation =
    // trigger name for attaching this animation to an element using the [@triggerName] syntax
    trigger('fadeInAnimation', [
 
        // route 'enter' transition
        transition(':enter', [
 
            // css styles at start of transition
            style({ opacity: 0 }),
 
            // animation and styles at end of transition
            animate('.3s', style({ opacity: 1 }))
        ]),
    ]);

संक्रमण से जुड़े घटक

import { Component } from '@angular/core';
 
// import fade in animation
import { fadeInAnimation } from '../_animations/index';
 
@Component({
    moduleId: module.id.toString(),
    templateUrl: 'home.component.html',
 
    // make fade in animation available to this component
    animations: [fadeInAnimation],
 
    // attach the fade in animation to the host (root) element of this component
    host: { '[@fadeInAnimation]': '' }
})
 
export class HomeComponent {
}




angular2-animation