H5+JS 2차원 애니메이션 제작 사례

오늘은 인터넷에서 흔히 사용되지 않는 플러그인 two.js를 소개합니다. 처음 학습을 시작했을 때 인터넷에 적합한 튜토리얼이 없다는 것을 알게 됐습니다. 여기에 기본적인 작업을 게시하겠습니다.

two.js 는 지정된 영역에서 자체 디자인한 다양한 애니메이션 효과를 제작할 수 있는 웹 2차원 드로잉 소프트웨어입니다

다운로드 URL은 다음과 같습니다.

class1:

One: 사용 방법:

먼저 js 파일을 에 도입합니다. 페이지:

    <script src="js/two.js" type="text/javascript" charset="utf-8"></script>

웹 콘솔 콘솔을 열고 Enter Two를 입력하고 배열이 반환되면 그림과 같이 적용되었음을 증명합니다.

선택 항목으로 div 만들기

<div id="draw-shapes"></div>
        <style type="text/css">
            #draw-shapes{
                border: 1px  solid blue;
                width: 400px;
                height: 300px;
                background-color: green;
            }            </style>

JS에서 위 div를 선택

var elem = document.getElementById('draw-shapes');//选中页面上的div

2: 공간 생성 및 공간 모양:

위 작업을 완료한 후 2차원 공간 작업 생성

  = { width: , height:  }; 

 two =  Two().appendTo(elem);

그래픽 생성:

var circle = two.makeCircle(72, 100, 50);//创建圆形（x坐标，y坐标，半径）var rect = two.makeRectangle(213, 100, 100, 100);//创建矩形（x，y，宽，高）

3: 그래픽 속성 조정:

circle.fill = ;circle.stroke = ; circle.linewidth = ;circle.opacity = ;= = = = ;
　　　　 rect.noStroke();//去掉边线

4: 웹 페이지에 투영:

생성된 공간과 그래픽을 웹 페이지에 투영하려면 다음 명령을 입력해야 합니다:

two.update();

효과 웹 페이지의 그림은 그림과 같습니다

다섯 가지: 그룹의 역할과 설정:

그룹은 여러 그래픽을 결합할 수 있습니다. 그룹으로 병합하면 그룹은 동일한 속성과 효과를 설정할 수 있습니다

그룹을 만든 후 그래픽의 경우 다음 코드를 실행할 수 있습니다.

var group = two.makeGroup(circle, rect);

두 개의 그래픽을 그룹에 넣습니다

// 可以对组内所有形状进行属性设定group.translation.set(two.width / 2, two.height / 2);//让一个组内所有的形状位移，使中心保持在二维空间的什么位置group.rotation = Math.PI;//旋转group.scale = 0.75;//缩放        
        group.linewidth = 7;//统一设置线宽

위 명령을 통해 그룹의 모든 도형에 대해 동일한 작업을 수행합니다

위 그림 수술 후 두 가지 모양의 효과를 보여줍니다.

오늘은 여기까지입니다. 다음에는 애니메이션 효과를 만드는 방법을 자세히 설명하겠습니다.

알아본 친구들은 꼭 좋아요를 눌러주세요!

위 내용은 H5+JS 2차원 애니메이션 제작 사례의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!