javascript - Fabric js animateColor函数未找到错误

Question

Fabric js animateColor 函数未发现错误。我的动画文本颜色代码

var canvas = new fabric.Canvas('mycanvas');
var text = new fabric.Text('text', {
    left: 10,
    top: 12,
    textAlign: 'center',
    fontSize: 15,
        fontFamily: 'Helvetica Nue, Helvetica, Sans-Serif, Arial, Trebuchet MS'
    });

canvas.add(text);
canvas.renderAll();

text.animateColor('#000000','#ffffff',100);
canvas.renderAll();

Answer 1

animateColor 是一个实用程序，位于 fabric.util 命名空间中。您可以在这里阅读更多相关信息:http://fabricjs.com/docs/fabric.util.html#.animateColor .

使用fabric.util.animateColor设置文本颜色动画的示例:

const ANIMATION_DURATION = 1000;
const colors = ['red', 'aqua'];

const canvas = new fabric.Canvas('mycanvas');
const text = new fabric.Text('Animate Color', {
    fill: colors[0],
    fontSize: 35,
    fontWeight: 'bold',
    fontFamily: 'Helvetica Nue'
});

canvas.add(text);

const swapColors = () => colors.push(colors.shift());
const toRgba = (val) => Array.isArray(val) 
  ? fabric.Color.fromSource(val).toRgba() 
  : new fabric.Color(val).toRgba();
const demoColorAnimation = () => {
  fabric.util.animateColor(
    colors[0], 
    colors[1], 
    ANIMATION_DURATION, 
    {
      onChange: (val) => {
        text.setColor(toRgba(val));

        canvas.renderAll();
      },
      onComplete: () => {
        swapColors();
        demoColorAnimation();
      }
    }
  );
};

demoColorAnimation();

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"></script>

<canvas id="mycanvas"></canvas>