AngularJS 애플리케이션에서 일부 애니메이션 효과를 구현하는 코드_AngularJS

Angular에서 CSS와 JavaScript의 유일한 차이점은 정의입니다. 정의된 애니메이션이 사용되지 않는 데에는 차이가 없습니다. 먼저 ngAnimate 모듈을 애플리케이션의 루트 모듈에 로드해야 합니다.

angular.module('coursesApp', ['ngAnimate']);

처리될 모든 JavaScript 애니메이션 이벤트는 변경되지 않습니다. 다음은 직접 지원되는 애니메이션과 해당 동작의 목록입니다.

명령 이벤트 세트

• ng-view
• ng-포함
• ng 스위치
• ng-입력하면
• 떠나
• 반복 입력
• 떠나
• 이동
• ng쇼
• 숨기기
• ng-class 추가
• 제거

위 목록은 이전 글과 동일하지만 해당 CSS 클래스는 JavaScript 애니메이션을 정의하는 데 필요하지 않기 때문에 언급하지 않았습니다. 이러한 모든 이벤트는 애플리케이션 모듈이 ngAnimate 모듈을 로드한 후에만 생성됩니다. 이제 이러한 명령을 실행하는 방법을 살펴보겠습니다.
Angular 애니메이션 사용자 정의 구문

다음은 맞춤 JavaScript 애니메이션을 위한 기본 프레임워크입니다.

angular.module('coursesApp').animation('.name-of-animation', function(<injectables>) {
 return {
 event: function(elem, done){
  //logic of animation
  done();
 }
 };
});

AngularJS에서 JavaScript 애니메이션을 작성할 때 기억해야 할 몇 가지 핵심 사항은 다음과 같습니다.

• 애니메이션 이름이 점(.)으로 시작합니다
• 모든 애니메이션 동작은 두 가지 매개변수를 허용합니다:
• 애니메이션하려는 현재 DOM 요소의 객체는 AngularJS 이전에 jQuery가 로드되기 전에 로드된 jQlite 객체이거나 jQuery 객체입니다.
• 애니메이션 종료 시 콜백 함수. 콜백 함수가 호출될 때까지 명령에 해당하는 작업이 일시 중지됩니다.

우리는 애니메이션 작성을 쉽게 해주는 jQuery, Greensock, Anima 및 기타 여러 JavaScript 라이브러리를 보유하고 있습니다. 작업을 단순하게 유지하기 위해 이 게시물에서는 jQuery를 사용하여 애니메이션을 만듭니다. 다른 여러 도서관에 대해 알아보려면 해당 웹사이트를 방문하세요.

ng-view 이동

AngularJS 애플리케이션에서 보기를 전환할 때 ng-view 지시문에 사용되는 애니메이션이 실행됩니다.

뷰가 나타날 때 애니메이션으로 인한 시각적 효과는 다음과 같습니다.

courseAppAnimations.animation('.view-slide-in', function () {
 return {
 enter: function(element, done) {
  element.css({
  opacity: 0.5,
  position: "relative",
  top: "10px",
  left: "20px"
  })
  .animate({
  top: 0,
  left: 0,
  opacity: 1
  }, 1000, done);
 }
 };
});

위에서는 뷰가 화면에 들어올 때 슬라이드인 효과를 만듭니다. done 메소드는 콜백 함수로 전달됩니다. 이는 애니메이션이 종료되었으며 이제 AngularJS 프레임워크가 다음 작업을 계속할 수 있음을 나타냅니다.

animate() 메서드가 호출되는 메서드에 유의하세요. AngularJS가 로드되기 전에 jQuery가 로드되기 때문에 이 요소를 jQuery 객체로 변환할 필요가 없습니다.

이제 이 애니메이션 효과를 ng-view 지시문에 적용해야 합니다. 애니메이션이 JavaScript로 정의되어 있더라도 관례적으로 클래스 태그를 사용하여 이를 대상 지시문에 적용합니다.

<div ng-view class="view-slide-in"></div>

반복 애니메이션
사용하도록 선택할 수 있는 지침 중 ng-repeat는 매우 중요한 지침입니다. 필터링과 정렬이라는 두 가지 기본 작업 지침이 있습니다. 수행된 작업에 따라 해당 명령을 추가, 이동 또는 제거합니다.
다음 데모에서는 몇 가지 기본 애니메이션을 사용하여 변경이 발생하면 해당 애니메이션 효과를 볼 수 있습니다.

courseAppAnimations.animation('.repeat-animation', function () {
 return {
 enter : function(element, done) {
  console.log("entering...");
  var width = element.width();
  element.css({
  position: 'relative',
  left: -10,
  opacity: 0
  });
  element.animate({
  left: 0,
  opacity: 1
  }, done);
 },
 leave : function(element, done) {
  element.css({
  position: 'relative',
  left: 0,
  opacity: 1
  });
  element.animate({
  left: -10,
  opacity: 0
  }, done);
 },
 move : function(element, done) {
  element.css({
  left: "2px",
  opacity: 0.5
  });
  element.animate({
  left: "0px",
  opacity: 1
  }, done);
 }
 };
});

Ng-hide 애니메이션

ng-hide 지시문은 대상 요소의 ng-hide 스타일 클래스를 추가하거나 제거하는 데 사용됩니다. 애니메이션을 사용하려면 CSS 스타일을 추가하거나 제거해야 하는 경우가 많습니다. 이 효과를 얻으려면 클래스 이름을 애니메이션 클래스에 전달하세요. 이를 통해 클래스를 검사하고 코드를 적절하게 변경할 수 있습니다.

다음은 ng-hide 지시문을 사용하여 요소의 페이드 아웃 효과를 구현하는 애니메이션 샘플 코드입니다.

courseAppAnimations.animation('.hide-animation', function () {
 return {
 beforeAddClass : function(element, className, done) {
  if (className === 'ng-hide') {
  element.animate({
   opacity: 0
  },500, done);
  } else {
  done();
  }
 },
 removeClass : function(element, className, done) {
  if (className === 'ng-hide') {
  element.css('opacity',0);
  element.animate({
   opacity: 1
  }, 500, done);
  } else {
  done();
  }
 }
 };
});

사용자 정의 명령을 실행해 보세요

맞춤 지침을 애니메이션화하려면 $animate 서비스를 사용해야 합니다. $animate 서비스는 AngularJS의 핵심 프레임워크의 일부이지만 이 서비스가 완전한 역할을 수행하려면 ngAnimate를 로드해야 합니다.

이전 기사와 동일한 예를 사용하여 한 페이지 분량의 강좌 목록을 제시합니다. 코스의 세부 정보를 그리드에 표시하는 명령을 생성하고 "통계 보기" 링크를 클릭하면 그리드의 내용이 변경됩니다. 이 전환을 사용자에게 보여주기 위해 애니메이션을 추가해 보겠습니다.

전환 애니메이션이 시작되면 CSS 클래스 태그를 추가하고 종료되면 클래스 태그를 제거합니다. 이 지시문의 샘플 코드는 다음과 같습니다.

app.directive('courseDetails', function ($animate) {
  return {
  scope: true,
  templateUrl: 'courseDetails.html',
  link: function (scope, elem, attrs) {
   scope.viewDetails = true;
   elem.find('button').bind('click', function () {
   $animate.addClass(elem, "switching", function () {
    elem.removeClass("switching");
    scope.viewDetails =! scope.viewDetails;
    scope.$apply();
  });
  });
 }
 };
});

正如你所看到的，我们在动画结束时执行这个动作。在浏览器的开发者工具中，我们会在查看指令元素时发现switching-active和switching-add这两个类标记正被很快的添加随后被移除。我们可以通过定义一个CSS转换样式或者一个自定义的JavaScript动画来查看动画的效果。以下就是一个简单地CSS转换样式，可以被用于上面提到的指令，为了简洁性我们移去了特定的前缀：

.det-anim.switching {
 transition: all 1s linear;
 position: relative;
 opacity: 0.5;
 left: -20px;
}

又或者，这里有一个jQuery写的动画，可以用于同样的指令：

courseAppAnimations.animation('.js-anim', function () {
 return {
 beforeAddClass: function(element, className, done) {
  if (className === 'switching') {
  element.animate({
   opacity: 0
  },1000, function (){
   element.css({
   opacity: 1
   });
   done();
  });
  }
  else {
  done();
  }
 }
 }
});

这些动画当中，如果它可以应用于内建的指令上，它同样也可以被应用到自定义的指令上：

<div course-details 
  class="det-anim"
  title="{{course.title}}">
</div>

你可以在示例页面看到以上所有的动画运行时的效果。
 
结论

动画，当被适合并正常的运用时，将给应用程序带来生气。正如我们所看到的，AngularJS对CSS和JavaScript动画都提供各种支持。你可以根据团队的情况来挑选其中一种。

但是，使用太多的动画将会使得应用程序变得缓慢，而对于用户来，这将使应用程序看起来i不够人性化。所以，必须小心并最优化的使用这件利器。