요즘 많은 웹사이트에서는 랜딩 페이지를 더욱 매력적으로 만들기 위해 일종의 애니메이션을 사용합니다. 다행히도 처음부터 모든 작업을 수행하지 않고도 웹 페이지의 요소에 애니메이션을 적용할 수 있는 라이브러리가 많이 있습니다. 이 튜토리얼에서는 mojs라는 라이브러리에 대해 배웁니다.
이 라이브러리는 간단한 선언적 API로 인해 사용이 매우 쉽습니다. mojs를 사용하여 만들 수 있는 애니메이션은 부드럽고 망막 친화적이므로 모든 것이 전문적으로 보입니다.
Mojs 설치
프로젝트에 mojs를 포함하는 방법은 다양합니다. GitHub 저장소에서 라이브러리를 얻을 수 있습니다. 또는 다양한 CDN의 최신 리포지토리에 대한 링크를 프로젝트에 직접 포함할 수 있습니다.
으아아아개발자는 다음 명령을 실행하여 npm 및 Bower와 같은 패키지 관리자를 사용하여 mojs를 설치할 수도 있습니다.
으아아아라이브러리를 프로젝트에 포함시킨 후에는 다양한 모듈을 사용하여 흥미로운 애니메이션을 만들 수 있습니다.
Mojs의 HTML 모듈
이 튜토리얼은 mojs 라이브러리의 HTML 모듈에 중점을 둡니다. 이 모듈은 웹 페이지의 다양한 HTML 요소에 애니메이션을 적용하는 데 사용할 수 있습니다.
DOM 요소에 애니메이션을 적용하려면 가장 먼저 해야 할 일은 mojs Html
개체를 만드는 것입니다. 이 개체 내에서 애니메이션을 적용하려는 요소 및 해당 속성에 대한 선택기를 지정할 수 있습니다.
el
값을 설정하면 mojs를 사용하여 애니메이션을 적용하려는 요소를 식별할 수 있습니다. 해당 값을 선택기 또는 DOM 노드로 설정할 수 있습니다.
HTML 모듈에는 DOM 요소의 다양한 변환 관련 속성에 애니메이션을 적용하는 데 사용할 수 있는 사전 정의된 속성이 있습니다. 예를 들어 x
、y
和 z
属性。您还可以使用 angleX
、angleY
和 angleZ
属性沿不同轴旋转任何元素。这类似于 CSS 中相应的 rotateX()
、rotateY()
和 rotateZ()
转换。您还可以借助 skewX
和 skewY
속성을 지정하여 X 또는 Y축을 따라 요소를 기울일 수 있습니다.
다양한 요소에 스케일링 애니메이션을 적용하는 것도 마찬가지로 쉽습니다. 요소의 크기를 양방향으로 조정하려면 scale
属性设置一个值即可。同样,您可以通过为 scaleX
和 scaleY
속성에 적절한 값을 설정하여 다른 축을 따라 요소의 크기 조정에 애니메이션을 적용하면 됩니다.
애니메이션의 초기 및 최종 값을 설정할 수 있는 이러한 모든 속성 외에도 애니메이션 재생을 제어하는 몇 가지 다른 속성이 있습니다. 값이 숫자일 것으로 예상하는 duration
属性指定动画的持续时间。提供的值需要一个数字,它将设置动画持续时间(以毫秒为单位)。如果您想在延迟一段时间后开始动画,可以使用 delay
属性设置延迟值。就像 duration
一样,delay
를 사용할 수도 있습니다.
값은 repeat
属性,可以多次重复动画。它的默认值为零,这意味着动画只会播放一次。设置为1将播放动画两次,设置为2将播放动画3次。动画完成第一次迭代后,元素将返回到其初始状态并再次开始动画(如果您已为 repeat
속성을 사용하여 설정됩니다. 최종 상태에서 초기 상태로의 급격한 점프는 모든 상황에서 이상적이지 않을 수 있습니다.
최종 상태에 도달한 후 애니메이션을 뒤로 재생하려면 isYoyo
属性的值设置为 true
。默认设置为 false
。最后,您可以使用 speed
속성을 설정하여 애니메이션이 재생되는 속도를 설정할 수 있습니다. 기본값은 1입니다. 2로 설정하면 애니메이션이 두 배 빠르게 재생됩니다. 마찬가지로 0.5로 설정하면 애니메이션이 절반 속도로 재생됩니다.
당신이 만든 mojs Html
对象不会自行为各个元素设置动画。您必须在要播放的每个 mojs Html
动画上调用 play()
개체는 개별 요소 자체에 애니메이션을 적용하지 않습니다. 재생하려는 모든 mojs
play()
메서드를 호출해야 합니다. 다음은 세 가지 다른 상자에 애니메이션을 적용하기 위해 방금 논의한 모든 속성을 사용하는 예입니다. 으아아아
🎜您不仅限于为元素的变换属性设置动画。 mojs 动画库还允许您对所有其他可动画化的 CSS 属性进行动画处理。您只需确保为它们提供有效的初始值和最终值即可。例如,您可以通过为 background
指定有效值来设置元素的背景颜色动画。
如果要设置动画的 CSS 属性包含连字符,则在 mojs camelCase
>Html 对象。这意味着您可以通过为 borderRadius
属性设置有效值来对 border-radius
进行动画处理。下面的例子应该可以让一切变得清晰:
var htmlA = new mojs.Html({ el: ".a", x: { 0: 400 }, angleZ: { 0: 360 }, background: { red: 'black' }, borderWidth: { 10: 20 }, borderColor: { 'black': 'red' }, borderRadius: { 0: '50%' }, duration: 2000, repeat: 4, isYoyo: true }); document.querySelector(".play").addEventListener("click", function() { htmlA.play(); });
在上面的示例中,边框颜色从黑色变为红色,同时边框半径从 0 变化到 50%。您应该注意,无单位的数字将被视为像素值,而带单位的数字应指定为“50%”等字符串。
到目前为止,我们已经使用了一组补间属性来控制不同动画的播放。这意味着一个元素从 x:0
移动到 x:200
所需的时间与从 scale 进行缩放所需的时间相同: 1
到 规模:2
。
这可能不是一个理想的行为,因为您可能希望延迟 延迟
某些属性的动画并控制它们的 duration
。在这种情况下,您可以在属性对象本身内部指定每个属性的动画播放参数。
var htmlA = new mojs.Html({ el: ".a", x: { 0: 400, duration: 1000, repeat: 8, isYoyo: true }, angleY: { 0: 360, delay: 500, duration: 1000, repeat: 4, isYoyo: true }, angleZ: { 0: 720, delay: 1000, duration: 1000, repeat: 4, isYoyo: true } }); document.querySelector(".play").addEventListener("click", function() { htmlA.play(); });
Mojs 中可用的缓动功能
默认情况下,您创建的每个动画都会应用 sin.out
缓动。如果您希望使用不同的缓动函数进行动画播放,可以使用 easing
属性指定其值。默认情况下,当动画向后播放时,也会使用为 easing
指定的值。如果您想对向后动画应用不同的缓动,可以为 backwardEasing
属性设置一个值。
mojs 库有 11 种不同的内置缓动函数。这些是 linear
、ease
、sin
、quad
、cubic
、quart
、quint
、expo
、circ
、back
和 elastic
。线性缓动只有一种变体,名为 linear.none
。这是有道理的,因为动画在不同阶段将以相同的速度进行。所有其他缓动函数都具有三种不同的变体,其中 in
、out
和 inout
添加在末尾。
有两种方法可以指定动画的缓动函数。您可以使用 elastic.in
这样的字符串,也可以使用 mojs.easing
对象直接访问缓动函数,例如 mojs.easing。 elastic.inout
。在嵌入式 CodePen 演示中,我在每个条形上应用了不同的缓动函数,因此其宽度将以不同的速度变化。这将使您了解每次缓动时动画速度有何不同。
var allBoxes = document.querySelectorAll(".box"); var animations = new Array(); var easings = ['ease.in', 'sin.in', 'quad.in', 'cubic.in', 'quart.in', 'quint.in', 'expo.in', 'circ.in', 'back.in', 'elastic.in']; allBoxes.forEach(function(box, index) { var animation = new mojs.Html({ el: box, width: { 0: 550, duration: 4000, repeat: 8, isYoyo: true, easing: easings[index] } }); animations.push(animation); }); document.querySelector(".play").addEventListener("click", function() { animations.forEach(function(anim) { anim.play(); }); });
由于我们只想更改应用于每个框的缓动函数,因此我创建了一个循环来迭代它们,然后应用从 easings
数组中选取的缓动函数。这可以防止不必要的代码重复。您可以使用相同的技术为多个元素设置动画,其中属性值根据模式而变化。
控制动画播放
Mojs 提供了很多方法,允许我们在动画开始后控制不同元素的动画播放。您可以随时通过调用 pause()
方法暂停动画。同样,您可以通过调用 resume()
方法来恢复任何暂停的动画。
使用 pause()
暂停的动画将始终从您调用 pause()
的位置恢复。如果您希望动画在暂停后从头开始,您应该使用 stop()
方法。
您还可以使用 playBackward()
方法向后播放动画。之前,我们使用 speed
属性来控制 mojs 播放动画的速度。 Mojs 还有一个 setSpeed()
方法,可以在动画仍在进行时设置动画速度。在下面的示例中,我使用了所有这些方法来控制基于按钮点击的动画播放。
var speed = 1; var htmlA = new mojs.Html({ el: ".a", angleZ: { 0: 720 }, borderRadius: { 0: '50%' }, borderWidth: { 10: 100 }, duration: 2000, repeat: 9999, isYoyo: true }); document.querySelector(".play").addEventListener("click", function() { htmlA.play(); }); document.querySelector(".pause").addEventListener("click", function() { htmlA.pause(); }); document.querySelector(".stop").addEventListener("click", function() { htmlA.stop(); }); document.querySelector(".faster").addEventListener("click", function() { speed = speed + 1; htmlA.setSpeed(speed); document.querySelector(".data").innerHTML = "Speed: " + speed; }); document.querySelector(".slower").addEventListener("click", function() { speed = speed/2; htmlA.setSpeed(speed); document.querySelector(".data").innerHTML = "Speed: " + speed; });
在下面的演示中,当前动画播放速度显示在左下角的黑框中。点击更快会将当前速度提高 1,点击更慢会将当前速度减半。
最终想法
在本教程中,我们学习了如何使用 mojs 中的 HTML 模块为网页上的不同 DOM 元素设置动画。我们可以使用选择器或 DOM 节点指定要设置动画的元素。该库允许您使用 mojs Html
对象的内置属性对不同的变换属性和任何元素的不透明度进行动画处理。但是,您还可以通过使用 camelCase
表示法指定名称来对其他 CSS 属性进行动画处理。
JavaScript 并非没有学习曲线,而且还有大量的框架和库可以让您忙碌起来。如果您正在寻找其他资源来学习或在工作中使用,请查看我们在 Envato 市场中提供的资源。
如果您希望我在本教程中澄清任何内容,请告诉我。我们将在下一个教程中介绍 mojs 库中的 Shape 模块。
위 내용은 Mojs 애니메이션 라이브러리로 시작하기: HTML 구성요소의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

실제 세계에서 JavaScript의 응용 프로그램에는 서버 측 프로그래밍, 모바일 애플리케이션 개발 및 사물 인터넷 제어가 포함됩니다. 1. 서버 측 프로그래밍은 Node.js를 통해 실현되며 동시 요청 처리에 적합합니다. 2. 모바일 애플리케이션 개발은 재교육을 통해 수행되며 크로스 플랫폼 배포를 지원합니다. 3. Johnny-Five 라이브러리를 통한 IoT 장치 제어에 사용되며 하드웨어 상호 작용에 적합합니다.

일상적인 기술 도구를 사용하여 기능적 다중 테넌트 SaaS 응용 프로그램 (Edtech 앱)을 구축했으며 동일한 작업을 수행 할 수 있습니다. 먼저, 다중 테넌트 SaaS 응용 프로그램은 무엇입니까? 멀티 테넌트 SAAS 응용 프로그램은 노래에서 여러 고객에게 서비스를 제공 할 수 있습니다.

이 기사에서는 Contrim에 의해 확보 된 백엔드와의 프론트 엔드 통합을 보여 주며 Next.js를 사용하여 기능적인 Edtech SaaS 응용 프로그램을 구축합니다. Frontend는 UI 가시성을 제어하기 위해 사용자 권한을 가져오고 API가 역할 기반을 준수하도록합니다.

JavaScript는 현대 웹 개발의 핵심 언어이며 다양성과 유연성에 널리 사용됩니다. 1) 프론트 엔드 개발 : DOM 운영 및 최신 프레임 워크 (예 : React, Vue.js, Angular)를 통해 동적 웹 페이지 및 단일 페이지 응용 프로그램을 구축합니다. 2) 서버 측 개발 : Node.js는 비 차단 I/O 모델을 사용하여 높은 동시성 및 실시간 응용 프로그램을 처리합니다. 3) 모바일 및 데스크탑 애플리케이션 개발 : 크로스 플랫폼 개발은 개발 효율을 향상시키기 위해 반응 및 전자를 통해 실현됩니다.

JavaScript의 최신 트렌드에는 Typescript의 Rise, 현대 프레임 워크 및 라이브러리의 인기 및 WebAssembly의 적용이 포함됩니다. 향후 전망은보다 강력한 유형 시스템, 서버 측 JavaScript 개발, 인공 지능 및 기계 학습의 확장, IoT 및 Edge 컴퓨팅의 잠재력을 포함합니다.

JavaScript는 현대 웹 개발의 초석이며 주요 기능에는 이벤트 중심 프로그래밍, 동적 컨텐츠 생성 및 비동기 프로그래밍이 포함됩니다. 1) 이벤트 중심 프로그래밍을 사용하면 사용자 작업에 따라 웹 페이지가 동적으로 변경 될 수 있습니다. 2) 동적 컨텐츠 생성을 사용하면 조건에 따라 페이지 컨텐츠를 조정할 수 있습니다. 3) 비동기 프로그래밍은 사용자 인터페이스가 차단되지 않도록합니다. JavaScript는 웹 상호 작용, 단일 페이지 응용 프로그램 및 서버 측 개발에 널리 사용되며 사용자 경험 및 크로스 플랫폼 개발의 유연성을 크게 향상시킵니다.

Python은 데이터 과학 및 기계 학습에 더 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 더 적합합니다. 1. Python은 간결한 구문 및 풍부한 라이브러리 생태계로 유명하며 데이터 분석 및 웹 개발에 적합합니다. 2. JavaScript는 프론트 엔드 개발의 핵심입니다. Node.js는 서버 측 프로그래밍을 지원하며 풀 스택 개발에 적합합니다.

JavaScript는 이미 최신 브라우저에 내장되어 있기 때문에 설치가 필요하지 않습니다. 시작하려면 텍스트 편집기와 브라우저 만 있으면됩니다. 1) 브라우저 환경에서 태그를 통해 HTML 파일을 포함하여 실행하십시오. 2) Node.js 환경에서 Node.js를 다운로드하고 설치 한 후 명령 줄을 통해 JavaScript 파일을 실행하십시오.


핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

DVWA
DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는

MinGW - Windows용 미니멀리스트 GNU
이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.

안전한 시험 브라우저
안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.

Atom Editor Mac 버전 다운로드
가장 인기 있는 오픈 소스 편집기

mPDF
mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.
