Angular 애니메이션의 목적은 무엇입니까?

Angular 애니메이션의 목적은 무엇입니까?

저는 왜 CSS 애니메이션보다 Angular 애니메이션을 사용해야 하는지에 대해 오랫동안 생각해 왔습니다.사용하기 전에 고려해야 할 몇 가지 영역이 있습니다.

---

성능

첫 번째 단계에서 저는 일의 수행 측면만을 다루는 이 질문을 발견했습니다.다른 스레드에서 애니메이션을 실행하는 것과 같은 최적화가 적용될 수 있도록 가능한 한 CSS 애니메이션을 사용해야 한다고 명시되어 있기 때문에 수락된 답변은 저에게 만족스럽지 않습니다.이것은 사실이 아닌 것 같습니다. 앵글 문서에는 다음과 같이 나와 있습니다.

각진 애니메이션은 표준 웹 애니메이션 API 위에 구축되며 이를 지원하는 브라우저에서 기본적으로 실행됩니다.

(내 것이 아님)

그리고 웹 애니메이션 API 초안을 보면 시트에 명시된 CSS와 동일한 최적화가 웹 애니메이션에 적용될 수 있음을 알 수 있습니다.

ECMA 스크립트를 사용하여 requestAnimationFrame [HTML]을 사용하여 애니메이션을 수행할 수 있지만, 이러한 애니메이션은 CSS 캐스케이드에서 표현되는 방식과 별도의 스레드에서 애니메이션을 수행하는 것과 같은 성능 최적화 측면에서 선언형 애니메이션과 다르게 작동합니다.웹 애니메이션 프로그래밍 인터페이스를 사용하여 선언형 애니메이션과 동일한 동작 및 성능 특성을 가진 스크립트로 애니메이션을 만들 수 있습니다.

(내 것을 다시 확인)

IE와 같은 일부 브라우저가 웹 애니메이션을 지원하지 않는 것 외에도 Angular 애니메이션에 CSS 선언을 사용하거나 그 반대의 이유가 있습니까?저는 그것들이 성능 면에서 교환 가능하다고 봅니다.

---

애니메이션에 대한 통제력 강화

애니메이션을 일시 중지하거나 JS 변수를 사용할 수 있기 때문에 Angular 애니메이션에 대한 인수로 보일 수 있지만 CSS를 사용하는 동안에도 마찬가지입니다.animation-play-state: pause또는 JS에 지정된 CSS 변수를 사용하면 설명서를 참조하십시오.

이제 JS 코드에서 CSS 변수를 설정하는 것이 불편할 수 있다는 것을 알 수 있지만 Angular 애니메이션을 사용하는 동안에도 마찬가지입니다.으로 일적으로같선언다니됩이로 됩니다.@Component animationshave 속성을 통해 는 제외하고는 필드에 수 .AnimationBuilder물론, btw 또한 매우 편리하거나 아름답지 않습니다).

또 다른 요점은 웹 애니메이션 API를 사용하여 애니메이션을 검사, 디버그 또는 테스트할 수 있지만 Angular 애니메이션을 사용하여 어떻게 이것이 가능한지 모르겠습니다.만약 그렇다면, 어떻게 하는지 가르쳐 주시겠습니까?만약 그렇지 않다면, 저는 제어를 위해 CSS 애니메이션보다 앵귤러 애니메이션을 사용하는 이점도 전혀 없다고 생각합니다.

---

클리너 코드

예를 들어, 저는 여기서 애니메이션을 "정상적인" 스타일과 분리하는 것이 실제로 행동과 표현의 분리라는 단락을 읽었습니다.스타일 시트에 애니메이션을 선언하는 것은 정말로 그러한 책임을 혼합하는 것입니까?저는 특히 CSS 규칙을 보면서 항상 반대로 보았습니다.@Component애니메이션은 너무 많은 장소에서 CSS 선언을 하는 느낌을 주었습니다.

---

Angular 애니메이션은 어떻습니까?

• 나머지 스타일에서 애니메이션을 추출할 수 있는 편리한 유틸리티일까요, 아니면 기능적으로 가치 있는 것을 가져올 수 있을까요?
• Angular 애니메이션의 사용은 특별한 경우에만 효과가 있습니까? 아니면 팀이 끝까지 사용하기로 선택한 컨벤션입니까?

Angular 애니메이션을 사용할 때의 실질적인 이점에 대해 말씀드리고자 합니다.여러분, 먼저 감사드립니다!

그래서 저는 몇 가지 조사를 했고 비록 (위의 질문에서 이미 언급했듯이) 성능 면에서 Angular 애니메이션을 찬성하거나 반대하는 어떠한 주장도 찾지 못했지만, 적어도 특정 경우에는 CSS를 시트에서만 가지고 싶어하는 순수주의자들에게 충분히 좋을 Angular 애니메이션을 기능 면에서 사용할 수 있는 매우 좋은 주장이 있습니다.

각 애니메이션이 설득력 있는 사례가 될 수 있는 유용한 기능을 몇 가지 나열해 보겠습니다.대부분은 Angular 애니메이션 설명서에서 찾을 수 있습니다.

1. 전환 스타일 - 이러한 스타일은 요소가 애니메이션화되는 동안에만 한 상태에서 다른 상태로 전환되는 동안에만 적용되며 다음과 같이 사용됩니다.

   transition('stateA => stateB', [style({...}), animate(100)])
   

   CSS로만 동일한 작업을 시도하는 것은 이전 상태가 다음 상태로 이어졌다는 점에서 표현력이 부족할 수 있습니다.그리고 애니메이션이 초기 상태에 따라 달라져야 하지만 최종 상태가 동일한 경우에는 완전히 투박할 수 있습니다.

2. 및 별칭과 함께 상태(void documentation, :leave 및 :enter documentation) - DOM에서 추가하거나 제거할 요소를 애니메이션으로 만들 수 있습니다.

   transition('stateA => void', animate(...))
   

   이전에는 애니메이션을 추가할 수 있을 정도로 쉬웠지만 제거 작업이 더 복잡하고 애니메이션을 트리거해야 했기 때문에 JS를 사용하여 DOM에서 요소를 제거할 수 있었습니다.

3. '*'(문서) - 동적 높이를 가진 요소에 대해 높이 전환과 같은 전통적으로 어려운 애니메이션을 수행할 수 있습니다.이 문제는 요소에 고정 높이를 설정하거나(불변성), 튜닝된 전환 기능이 있는 최대 높이를 사용하거나(완벽하지 않음), JS를 사용하여 요소의 높이를 쿼리해야 합니다(불필요한 리플로우를 발생시킬 수 있음).그러나 Angular를 사용하면 다음과 같이 간단합니다.

   trigger('collapsible', [
     state('expanded', style({ height: '*' })),
     state('collapsed', style({ height: '0' })),
     transition('expanded <=> collapsed', animate(100))
   ])
   

   그리고 요소의 실제 높이가 전환에 사용되기 때문에 애니메이션은 부드럽고 "완전"합니다.

4. 애니메이션 콜백(문서) - 이것은 CSS 애니메이션으로는 가능하지 않은 것입니다(만약 그렇지 않다면 에뮬레이트할 수 있습니다).setTimeout디버깅 등에 편리합니다.

5. 질문에 명시된 것과 달리 Angular 애니메이션에서는 인스턴스 필드를 매개 변수로 사용할 수 있습니다. 이 질문을 참조하십시오.MDN에 표시된 것처럼 DOM API를 통해 CSS 변수를 조작하는 것보다 사용하기가 훨씬 쉽다는 것을 알게 되었습니다. 일부 브라우저에서 제한된 지원은 말할 것도 없습니다.

위에 나열된 기능이 필요한 경우 Angular가 작업에 더 적합한 도구가 될 수 있습니다.또한 구성 요소에 관리해야 할 애니메이션이 많고 이것이 제 개인적인 의견일 때, 저는 시트에 있는 것보다 Angular 방식으로 애니메이션을 구성하는 것이 더 쉽다는 것을 알게 되었습니다. 여기서 각 구성 요소와 다양한 요소 상태 간의 관계를 확인하는 것이 더 어렵습니다.

언급URL : https://stackoverflow.com/questions/49628726/what-is-the-purpose-of-angular-animations