Mojs 애니메이션 라이브러리 시작하기: Shapes 모듈 탐색

이전 튜토리얼에서는 mojs를 사용하여 웹 페이지의 다양한 HTML 요소에 애니메이션 효과를 추가했습니다. 우리는 이 라이브러리를 주로 정사각형이나 원처럼 보이는 div 元素进行动画处理。但是，您可以使用 Html 모듈과 함께 사용하여 이미지나 제목과 같은 다양한 요소에 애니메이션을 적용합니다. 기본 모양에 애니메이션을 적용하기 위해 mojs를 사용하려는 경우 아마도 라이브러리의 Shape 모듈을 사용해야 할 것입니다.

Shape 모듈을 사용하면 SVG를 사용하여 DOM에서 기본 모양을 만들 수 있습니다. 여러분이 해야 할 일은 만들고 싶은 모양의 유형을 지정하는 것뿐입니다. 그러면 mojs가 나머지를 처리해 줍니다. 이 모듈을 사용하면 생성한 다양한 모양에 애니메이션을 적용할 수도 있습니다.

이 튜토리얼에서는 Shape 모듈의 기본 사항과 이를 사용하여 다양한 모양을 만들고 애니메이션하는 방법을 다룹니다.

Mojs에서 모양 만들기

다른 모양을 만들려면 mojs Shape 개체를 인스턴스화해야 합니다. 개체는 생성한 모양의 색상, 크기, 각도 등을 제어하는 ​​데 사용할 수 있는 다양한 매개변수를 허용합니다.

기본적으로 생성하는 모든 도형은 문서 본문을 상위 항목으로 사용합니다. parent 属性将任何其他元素指定为其父元素。您还可以借助 className 속성을 사용하여 생성하는 모든 모양에 클래스를 할당할 수 있습니다. 이 속성을 건너뛰면 라이브러리는 기본 클래스를 할당하지 않습니다.

Mojs에는 8가지 모양이 내장되어 있으므로 shape 属性设置值来直接创建它们。您可以将其值设置为 circle 创建圆形，rect 创建矩形，polygon 创建多边形。您还可以通过将 shape 的值设置为 lines 来绘制直线。如果 shape 值为 cross，则库将绘制两条垂直线；如果 shape 值为 equal。同样，可以通过将属性值设置为 zigzag를 주어 지그재그 선을 만들 수 있습니다.

Shape 개체에도 points 属性，该属性对于不同的形状具有不同的含义。它确定 polygon 形状中的总边数和 equal 形状中的平行线总数。 points 属性也可用于设置 zigzag선의 구부러짐 정도가 있습니다.

앞서 언급했듯이 mojs는 SVG를 사용하여 이러한 모든 모양을 만듭니다. 즉, Shape 对象还将具有一些 SVG 特定属性来控制这些形状的外观。您可以使用 fill 属性设置 mojs 形状的填充颜色。当未指定颜色时，库将使用 deepink 颜色来填充形状。同样，您可以使用 Stroke 属性指定形状的描边颜色。当未指定描边颜色时，mojs 会保持描边透明。您可以使用 fillOpacity 和 StrokeOpacity 개체에는 이러한 모양의 모양을 제어하기 위한 일부 SVG 관련 속성도 있습니다. fill 속성을 ​​사용하여 mojs 도형의 채우기 색상을 설정할 수 있습니다. 색상이 지정되지 않으면 라이브러리는 deepink 색상을 사용하여 모양을 채웁니다. 마찬가지로 Stroke 속성을 ​​사용하여 모양의 획 색상을 지정할 수 있습니다. 획 색상을 지정하지 않으면 mojs는 획을 투명하게 유지합니다. fillOpacity 및 StrokeOpacity 속성을 ​​사용하여 모양의 채우기 및 획 불투명도를 제어할 수 있습니다. 0과 1 사이의 값이 될 수 있습니다.

Mojs를 사용하면 모양의 다른 획 관련 속성도 제어할 수 있습니다. 예를 들어 StrokeDasharray 属性指定笔划路径中的破折号和间隙的模式。此属性接受字符串和数字作为有效值。它的默认值为零，这意味着笔划将是实线。可以使用 StrokeWidth 属性指定笔画的宽度。默认情况下，所有笔画的宽度均为 2px。可以使用 StrokeLinecap 属性指定不同线条端点处的形状。 StrokeLinecap 的有效值为 butt、round 和 square를 사용할 수 있습니다.

기본적으로 생성하는 모든 모양은 상위 요소의 중앙에 배치됩니다. 이는 도형의 left 和 right 属性均设置为 50%。您可以更改这些属性的值以将元素放置在不同的位置。控制形状位置的另一种方法是借助 x 和 y 속성 때문입니다. 모양이 각각 수평 및 수직으로 얼마나 이동해야 하는지를 결정합니다.

radius 属性指定形状的半径。该值用于确定特定形状的大小。您还可以使用 radiusX 和 radiusY 指定形状在特定方向上的大小。控制形状大小的另一种方法是借助 scale 属性。 scale 的默认值为 1，但您可以将其设置为您喜欢的任何其他数字。您还可以使用 scaleX 和 scaleY 속성을 사용하여 특정 방향으로 모양의 크기를 조정할 수 있습니다.

기본적으로 이러한 모든 모양 변형의 원점은 중심입니다. 예를 들어 angle 属性的值来旋转任何形状，则该形状将绕其中心旋转。如果要围绕其他点旋转形状，可以使用 origin 属性指定它。此属性接受字符串作为其值。将其设置为 '0% 0%' 将围绕其左上角旋转、缩放或平移形状。同样，将其设置为 '50% 0%'를 지정하면 모양이 위쪽 가장자리 중심을 중심으로 회전, 크기 조정 또는 변환됩니다.

방금 논의한 이러한 모든 속성을 사용하여 다양한 모양을 만들 수 있습니다. 다음은 몇 가지 예입니다:

으아아아

위 코드로 생성된 모양은 아래 CodePen 데모에 나와 있습니다.

Mojs로 모양 애니메이션 만들기

이전 섹션에서 논의한 모양의 거의 모든 속성에 애니메이션을 적용할 수 있습니다. 예를 들어, 서로 다른 초기 값과 최종 값을 지정하여 다각형의 점 수에 애니메이션을 적용할 수 있습니다. 동일하게 동작하는 '50% 50%' 更改为任何其他值，例如 '75% 75%'。 angle 和 scale 等其他属性的行为与 Html 모듈에서 모양의 원점을 변경할 수도 있습니다.

다양한 애니메이션의 지속 시간, 지연 및 속도는 duration、delay 和 speed 属性来控制。 Repeat 属性的工作方式也与 Html 模块中的工作方式相同。如果只想播放一次动画，可以将其设置为 0。同样，您可以将其设置为3以播放动画4次。对 Html 模块有效的所有缓动值也对 Shape 모듈을 사용하여 별도로 사용할 수 있습니다.

이 두 모듈의 애니메이션 기능 간의 유일한 차이점은 Shape 모듈의 속성에 대해 애니메이션 매개변수를 개별적으로 지정할 수 없다는 것입니다. 애니메이션을 적용하는 모든 속성은 동일한 지속 시간, 지연, 반복 횟수 등을 갖습니다.

다음은 원의 x 위치, 크기 및 각도에 애니메이션을 적용하는 예입니다.

으아아아

다양한 애니메이션의 재생을 제어하는 ​​한 가지 방법은 .then() 方法来指定在第一个动画序列完全完成后要设置动画的一组新属性。您可以在 .then()를 사용하여 모든 애니메이션 속성에 대해 새로운 초기 및 최종 값을 지정하는 것입니다. 예는 다음과 같습니다.

으아아아

최종 생각

이 튜토리얼에서는 mojs를 사용하여 다양한 모양을 만드는 방법과 이러한 모양의 속성에 애니메이션을 적용하는 방법을 배웠습니다.

Shape 模块具有 Html 이 모듈에는 Html 모듈의 모든 애니메이션 기능이 있습니다. 유일한 차이점은 속성을 개별적으로 애니메이션화할 수 없다는 것입니다. 그룹으로만 애니메이션할 수 있습니다. 또한 언제든지 애니메이션을 재생, 일시 중지, 중지 및 다시 시작하는 다양한 방법을 사용하여 애니메이션 재생을 제어할 수 있습니다. 이 시리즈의 첫 번째 튜토리얼에서 이러한 방법을 자세히 설명했습니다.

이 튜토리얼에 대해 궁금한 점이 있으면 언제든지 댓글을 남겨주세요. 다음 튜토리얼에서는 mojs의 ShapeSwirl 和 stagger 모듈에 대해 배웁니다.

위 내용은 Mojs 애니메이션 라이브러리 시작하기: Shapes 모듈 탐색의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!