Fabri c js animateColor функция не найдена ошибка

Question

Fabri c 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>