ZRender显示对象添加围绕中心点循环旋转动画的方法

2023-11-13

ZRender添加动画，使用接口：zrender.Animatable.animate(path, loop)

本文介绍一个简单示例：一个圆形显示对象，围绕中心点顺时针循环旋转。如图：

完整代码：

const opt = {
    shape: {
        cx: 0, // 圆环中心点
        cy: 0,
        r: 30  // 半径
    },
    style: {
        stroke: '#3f94ef',
        lineDash: [5, 8],
        lineWidth: 2,
        fill: 'none'
    },
};

const circle = new zrender.Circle(opt);
circle.__t = 0;
circle.animate('', true)
.when(5000, { __t: 1 })
.during((obj, i) => {
    circle.attr('rotation', -Math.PI * i * 2);
})
.start();

// 添加到父容器中
this.wrap.add(circle);
  • 圆环显示对象用的是虚线边框（lineDash），便于观察旋转效果。
  • 围绕中心点旋转，需要设置cx和cy为0。
  • i取值范围是（0，1），那么-Math.PI * i * 2就代表旋转角度变换范围是（0，-360），即旋转一周。

原理：circle.animate创建动画对象，在关键帧when(5000, { __t: 1 })的时候，修改自定义属性__t = 1，也就是说在每5秒内，借助during回调函数，不断更新circle的旋转角度属性rotation，注意要用弧度值。

参考资料：https://zhuanlan.zhihu.com/p/632481601

WEB开发