美文网首页
fabric.js 动画自定义缓动函数(匀速等)

fabric.js 动画自定义缓动函数(匀速等)

作者: 此情不渝_zz | 来源:发表于2022-02-12 16:57 被阅读0次

    fabric.js 动画简介:http://fabricjs.com/fabric-intro-part-2
    fabric.js的缓动函数来自于gizmahttp://gizma.com/easing/,默认使用的缓动函数为easeInSine

    官方文档提到的缓动函数

    自定义函数

    fabric.js默认缓动函数不满足需求时,可根据gizma中说明,自定义想要的函数
    如匀速过渡(gizma中第一个simple linear tweening就是匀速)

    Math.linearTween = function (t, b, c, d) {
        return c*t/d + b;
    };
    
    // 使用时自定义函数即可
    let linear = (t, b, c, d) => {
        return c*t/d + b;
    }
    canvas.animate('left', '+=500', { 
        onChange: canvas.renderAll.bind(canvas), 
        duration: 1000, // 动画时间
        easing: linear, // 指定缓动函数
    });
    

    相关资料

    缓动函数速查表: https://www.xuanfengge.com/easeing/easeing/

    相关文章

      网友评论

          本文标题:fabric.js 动画自定义缓动函数(匀速等)

          本文链接:https://www.haomeiwen.com/subject/rdntlrtx.html