时间戳

首页 > 解决方案 > Paperjs Tween 不适用于属性半径

javascript - Paperjs Tween 不适用于属性半径

问题描述

补间不适用于paperjs Circle的半径，它适用于fillColor但不适用于半径

    var path = new Path.Circle({
    radius: 100,
    fillColor: 'blue',
    center: view.center
});

path.tween(
    { radius: 100, fillColor: 'blue' },
    { radius: 200, fillColor : 'red'},
    2000
);

JSBin 代码在这里：https ://jsbin.com/zixarupixe/edit?html,js,output

标签： javascripthtml5-canvaspaperjs

解决方案

问题在于，它radius实际上并不是可以获取或设置的圆的属性，它只是一个构造函数参数。
为了做你想做的事，你可以在路径上禁用矩阵应用程序item.applyMatrix = false并使用它的scaling属性。这是一个演示可能解决方案的草图。

var path = new Path.Circle({
    radius: 100,
    fillColor: 'blue',
    center: view.center,
    applyMatrix: false
});

path.tween(
    { scaling: 1, fillColor: 'blue' },
    { scaling: 2, fillColor: 'red' },
    2000
);

推荐阅读