当前位置:Gxlcms > JavaScript > 分享js中konva基于canvas的3d实战开发,以旋转五角星为例

分享js中konva基于canvas的3d实战开发,以旋转五角星为例

时间:2021-07-01 10:21:17 帮助过:4人阅读

本文是konva基于canvas的开发,主要使用到konva中的Tween对象,Tween是控制Konva对象进行动画的核心对象。 本案例中的动画就是补间动画的一种:旋转动画。给定了起始角度0和终点角度360度。还给定了6秒的动画时间,同时为了实现循环效果,在执行完每一次动画后,重设动画(即回到0度)和再次执行动画。

一、效果


gif

二、思路

主要使用到konva中的Tween对象。tween,英文意思时两者之间,其实就是Tweened Aniamation(两者之间的动画,即补间动画)。何为补间动画?说白了就是给你一个初始状态,让你逐渐变到另一个状态。比如,指定初始(0,0)坐标和终点坐标(100,100),从起点移动到终点,至于怎么移动?让计算机自己计算。移动过程就会产生位移动画,这种位移动画就是一种补间动画。

  • Tween是控制Konva对象进行动画的核心对象。


  • Tween可以控制所有数字类型的属性进行动画处理,比如:x, y, rotation, width, height, radius, strokeWidth, opacity, scaleX等

本案例中的动画就是补间动画的一种:旋转动画。给定了起始角度0和终点角度360度。还给定了6秒的动画时间,同时为了实现循环效果,在执行完每一次动画后,重设动画(即回到0度)和再次执行动画。

三、代码

<!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: 'red',
    });
    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+canvas做出围绕旋转动画

以上就是分享js中konva基于canvas的3d实战开发,以旋转五角星为例的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行