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

php是最好的语言

풀어 주다： 2018-07-23 17:46:55

원래의

2919명이 탐색했습니다.

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

1. 효과

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

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>

로그인 후 복사