动效解决方案 Shifty

一、Shifty 是一款性能优异，速度够快且足够灵活的补间动画引擎，它是公认的 GreenSock 替代方案。

• 官网 http://jeremyckahn.github.io/shifty/doc/index.html

二、功能介绍

shifty号称是最快的JavaScript补间动画引擎，其追求实现最大化的动画性能和最少的内存消耗，shifty可以通过其非独立的API轻松构建和扩展，并且不执行任何渲染，言而简之，简而言之，就是一个字 快 就完事。

三、安装使用

npm install --save shifty

下载完毕后，可以看到dist目录下的文件，shifty.js 就是我们接下来要用到的，项目中导入即可开始使用

四、场景实践

1、 友好反馈的按钮

2、数字累加

   <h1 class="count-to-1000-custom-ease"></h1>
    </div>
    <script>
        shifty.setBezierFunction('myAwesomeCurve', 1, .3, .179, .882)
        const output = document.querySelector('.count-to-1000-custom-ease');

        shifty.tween({
            from: { x: 0 },
            to:   { x: 1000 },
            duration: 3000,
            easing: 'myAwesomeCurve',
            step: state => output.innerHTML = Math.round(state.x)
        });
    </script>

感兴趣的童鞋可以去尝试下，喜欢的看官可以麻烦您点点星星吗，后续会更新更多好玩的~~