회전하는 다섯개 별을 예로 들어 JS 캔버스 기반 Konva의 실용적인 3D 개발을 공유합니다.

php是最好的语言
풀어 주다: 2018-07-23 17:46:55
원래의
2880명이 탐색했습니다.

이 글은 캔버스 기반의 Konva 개발입니다. Konva에서는 Tween 객체를 주로 사용합니다. Tween은 Konva 객체의 애니메이션을 제어하는 ​​핵심 객체입니다. 이 경우 애니메이션은 일종의 트윈 애니메이션인 회전 애니메이션입니다. 시작 각도는 0이고 끝 각도는 360도입니다. 동시에 6초의 애니메이션 시간이 주어지며, 동시에 루프 효과를 얻기 위해 각 애니메이션이 실행된 후 애니메이션이 재설정(즉, 0도로 돌아감)되고 다시 애니메이션이 실행됩니다.

1. 효과


회전하는 다섯개 별을 예로 들어 JS 캔버스 기반 Konva의 실용적인 3D 개발을 공유합니다.

2.

Konva에서는 주로 Tween 객체를 사용합니다.

tween은 영어로 둘 사이라는 뜻인데, 실제로는 Tweened Animation(둘 사이의 애니메이션, 즉 트윈 애니메이션)입니다. 트윈 애니메이션이란 무엇입니까? 직설적으로 말하면 초기 상태를 제공하고 점차적으로 다른 상태로 변경할 수 있도록 해줍니다. 예를 들어 초기(0, 0) 좌표와 끝점 좌표(100, 100)를 지정하고 시작점에서 끝점까지 이동하는 방법은 무엇입니까? 컴퓨터가 스스로 계산하도록 하세요. 이동 프로세스는 일종의 트윈 애니메이션인 변위 애니메이션을 생성합니다.

  • Tween은 애니메이션용 Konva 객체를 제어하는 ​​핵심 객체입니다. 트윈은 모든 숫자 유형을 제어할 수 있습니다. x, y, 회전, 너비, 높이, 반경, 스트로크 폭, 불투명도, 배율과 같은 속성의 애니메이션 처리 애니메이션은 트윈 애니메이션의 한 유형인 회전 애니메이션입니다. 시작 각도는 0이고 끝 각도는 360도입니다. 동시에 6초의 애니메이션 시간이 주어지며, 동시에 루프 효과를 얻기 위해 각 애니메이션이 실행된 후 애니메이션이 재설정(즉, 0도로 돌아감)되고 다시 애니메이션이 실행됩니다.

    3. 코드

    <!DOCTYPE html>
    <html lang="zh-cmn-Hans">
    <head>
        <meta charset="UTF-8">
        <title>使用js canvas库konva创建补间动画 楚士岩 2018年7月19日</title>
    </head>
    <body>
    <p id="container"></p>
    <script type="text/javascript" src="js/konva/konva2.1.7/konva.js"></script>
    
    <script type="text/javascript">
        var stage = new Konva.Stage({
            container: "container",
            width: window.innerWidth,
            height: window.innerHeight
        });
        var layer = new Konva.Layer();
    
        var star = new Konva.Star({
            x: stage.getWidth() / 2,
            y: stage.getHeight() / 2,
            numPoints: 5, // 设置为五角形
            innerRadius: 40,  // innerRadius和outerRadius都必须设置
            outerRadius: 100,
            fill: &#39;red&#39;,
        });
        layer.add(star);
    
        var tween = new Konva.Tween({
            node: star,   // 需要添加补间动画的组件
            duration: 6,  // 持续时间
            draggable: true, // 设置可以拖拽
            easing: Konva.Easings.Linear, // 线性速度,即匀速
            rotation: 360,  // 6秒内旋转360度
    
            onFinish: function () {  // 动画完成时的回调函数
                this.reset();// 重置动画
                this.play(); // 重新播放动画
            }
            /* 不能使用yoyo:true代替onFinish中的代码
               因为使用yoyo,执行一圈后(6秒360度),会旋转回到原始状态,
               然后再执行下一圈动画。这样就无法实现五角星循环不停的朝一个方向旋转
             */
        });
        tween.play();
        stage.add(layer);
    </script>
    </body>
    </html>
    로그인 후 복사

    관련 권장 사항:
  • canvas 및 JS를 사용하여 동적 시계 애니메이션 구현
    #🎜🎜 #

  • JS+캔버스로 회전 애니메이션 만들기

위 내용은 회전하는 다섯개 별을 예로 들어 JS 캔버스 기반 Konva의 실용적인 3D 개발을 공유합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿