모션 UI로 애니메이션과 트랜지션을 만드는 법
애니메이션과 영상 효과를 통해 디자이너는 변화를 시각화하고 컨텐츠를 차별화 할 수 있습니다. 애니메이션과 전환 효과는 사용자가 무언가가 변경되면이를 인식하도록 돕는다. 사이트에서 예를 들어 버튼을 클릭하면 새로운 정보가 화면에 나타납니다. 앱 및 웹 사이트에 움직임을 추가하면 사용자가 더 쉽게 보다 직관적 인 방식으로 내용을 이해한다..
애니메이션이나 장면 전환을 처음부터 만들거나 라이브러리 나 프레임 워크를 사용하여 만들 수 있습니다. 프론트 엔드 여러분, 좋은 소식은 Foundation의 창시자 인 Zurb, 지난 10 월 오픈 소스 Motion UI, Sass를 기반으로 한 애니메이션 및 전환 라이브러리.
원래 Foundation for Apps에 번들로 제공되었으며 독립형 릴리스의 경우에는 애니메이션 큐잉 시스템 과 유연한 CSS 패턴. Motion UI는 또한 Orbit 슬라이더, Toggler 스위처 및 Reveal 모달과 같은 Foundation 프레임 워크의 일부 구성 요소에 강력한 기능을 제공하기 때문에 강력한 도구입니다.
시작하기
Motion UI는 Sass 라이브러리이지만 Zurb은 컴파일 된 CSS 만 포함하는 편리한 시작 키트를 개발자에게 제공하므로 반드시 Sass와 함께 사용할 필요는 없습니다. Motion UI의 홈 페이지에서 다운로드 할 수 있으며 미리 정의 된 CSS 애니메이션 및 전환 클래스를 사용하여 프로토 타입을 빨리 시작할 수 있습니다..
스타터 키트에는 모션 UI가 포함되어있을뿐만 아니라 Foundation 프레임 워크도 포함되어 있습니다. 즉, 원하는 경우 재단 그리드 및 사이트의 Foundation의 다른 모든 기능을 사용할 수 있습니다..
시동기 키트는 또한 index.html 프레임 워크를 빠르게 테스트 할 수있는 파일.
보다 정교한 조정이 필요하고 Motion UI의 강력한 Sass 믹스 인을 활용하려는 경우 소스가 포함 된 정식 버전을 설치할 수 있습니다 .scss npm 또는 Bower가있는 파일.
모션 UI의 문서는 현재 절반 정도 굽어 있습니다. 당신은 Github에 그것을 여기에서 발견 할 수 있거나, 원한다면 그것에 공헌 할 수있다..
빠른 프로토 타이핑
프로토 타이핑을 시작하려면 index.html 파일을 시작하거나 자신의 HTML 파일을 만들 수 있습니다. Foundation 그리드를 사용하여 레이아웃을 만들 수 있지만 Motion UI는 Foundation 프레임 워크가없는 독립형 라이브러리로도 사용할 수 있습니다..
모션 UI에는 미리 정의 된 CSS 클래스의 세 가지 주요 유형이 있습니다.
- 전환 클래스 - 슬라이딩, 페이딩 및 힌지 효과와 같은 전환을 HTML 요소에 추가 할 수 있습니다..
- 애니메이션 클래스 - 다양한 떨림, 흔들기 및 회전 효과를 사용할 수 있습니다.
- 수정 자 클래스 - 전환 및 애니메이션 클래스와 함께 작동하며 속도, 타이밍 및 이동 지연을 조정할 수 있습니다.
HTML 작성하기
미리 정의 된 CSS 클래스의 가장 큰 장점은 클래스로 사용할 수있을뿐 아니라 다른 HTML 속성으로도 사용할 수 있다는 것입니다. 예를 들어, 그들을에 추가 값 의 속성 꼬리표, 또는 당신은 할 수있다. 자신의 풍습에서 사용하십시오. 데이터-* 속성 게다가.
아래 코드 스 니펫에서이 후자의 옵션을 선택했습니다. 별도의 비헤이비어 및 수정 자 클래스. 나는 느린 과 용이함 수정 자 속성을 클래스로 사용하고 사용자 정의 데이터 - 애니메이션 에 대한 속성 스케일 인 - 업 전이. 그만큼 클릭 해주세요 버튼은 효과를 트리거하기위한 것입니다..
jQuery로 애니메이션과 트랜지션 재생하기
모션 UI에는 특정 이벤트가 발생할 때 전환 및 애니메이션을 재생할 수있는 작은 JavaScript 라이브러리가 포함됩니다..
라이브러리 자체는 시동기 키트에서 찾을 수 있습니다. motion-ui-startter> js> 공급 업체> motion-ui.js 통로.
그것은 MotionUI 두 가지 방법이있는 객체 : animateIn () 과 animateOut (). 특정 HTML 요소에 연결된 전환 또는 애니메이션 (
MotionUI.animateIn ($ ( "# boom")) $ (function () $ ( ". button") , $ animation);););
위의 코드 스 니펫에서 데이터 - 애니메이션 jQuery에 내장 된을 사용하여 특성 데이터() 메서드를 호출 한 다음 animateIn () 방법 MotionUI 목적.
다음은 전체 코드와 결과입니다. Foundation 프레임 워크에 내장 된 버튼 클래스를 사용하여 클릭 해주세요 버튼을 추가하고 기본 CSS도 추가했습니다..
모션 UI는 매우 유연하므로 많은 다른 방법으로 전환 및 애니메이션을 추가하고 트리거 할 수 있습니다.
예를 들어 위의 예에서 우리는 반드시 데이터 - 애니메이션 맞춤 속성을 추가 할 수 있지만 간단히 행동 클래스를 addClass () jQuery 메소드를
$ ( '# boom'). addClass ( 'scale-in-up');
Sass로 사용자 정의
모션 UI의 사전 제작 된 CSS 클래스는 Sass의 도움을 받아 쉽게 사용자 정의 할 수있는 기본값을 사용합니다. 각 전환 및 애니메이션 뒤에서는 Sass 믹스 인 이펙트 설정을 변경할 수 있습니다. 이렇게하면 완전히 사용자 정의 된 애니메이션 또는 전환을 쉽게 만들 수 있습니다..
사용자 정의는 스타터 키트와 함께 작동하지 않지만 자신의 필요에 따라 효과를 구성하려면 Sass 버전을 설치해야합니다.
전환이나 애니메이션을 맞춤 설정하려면 먼저 관련 믹스를 찾는다.. 그만큼 _classes.scss file은 컴파일 된 CSS 클래스의 이름과 각각의 mixin을 포함합니다..
이 예에서는 .스케일 인 - 업 속성을 살펴보고 _classes.scss, 우리는 신속하게 그것이 mui-zoom 믹스 인 :
// 전환 @mixin motion-ui-transitions ... // 축척 .scale-in-up @include mui-zoom (in, 0.5, 1); ...
모션 UI는 뮤- 접두어는 mixin에, 각 mixin에는 고유 한 파일이 있습니다. 모션 UI는 자체적으로 설명하는 명명 규칙을 사용하므로 mui-zoom 믹스 인 _zoom.scss 파일:
@mixin mui-zoom ($ state : in, $ from : 1.5, $ to : 1, $ fade : map-get ($ motion-ui-settings, 스케일 & 페이드), $ duration : null, $ timing : null, $ delay : null) ...
같은 기술을 사용하면 각 Sass 변수의 값을 변경하여 애니메이션 또는 전환의 모든 기능을 쉽게 제어 할 수 있습니다.
수정 자 클래스 구성
애니메이션 및 전환의 동작 (속도, 타이밍 및 지연)을 제어하는 수정 자 클래스는 Sass를 사용하여 _settings.scss 파일.
변경 한 후에는 Motion UI가 새 값을 기본값으로 사용하십시오. 모든 애니메이션 및 전환에서 관련 믹스를 하나씩 구성 할 필요가 없습니다..
