docs

场景

bezier.js的使用场景分为两部分。

• 浏览器端

  • dom环境

    针对dom环境，浏览器已经有比较好的解决方案。简单动画可以利用css3的transition属性；复杂动画依赖animation属性，并配合animation的三个事件进行动画的控制。美中不足的是，animation的兼容性受限，有些浏览器环境不支持或者支持的不够好。因此在实现一些复杂动画的时候，bezier.js就派上用场了。

  • canvas环境

    针对canvas环境，由于css3的属性无法应用在canvas中的图元上，所以依赖原生js的动画库就显得尤为重要。因此，bezier.js的使用场景主要还是在canvas环境中。

• node

  node环境中更加无法利用css3的各种属性，所以如果您想在node环境中，实现缓动效果的回调，建议您使用该库。

使用

bezier的UMD格式库名为bezierAnimation。

bezierAnimation(duration,timeFunction,handler,delay?,playNum?)

• duration 动画播放时间，以秒为单位。

• timeFunction

  动画缓动方式，支持五种常规方式，'linear','ease','easeIn','easeOut','easeInOut'。 也可以自定义，自定义格式如下，[0.25,1,0.25,1]

• handler

  浏览器渲染时执行的回调函数，支持多个函数以数组的方式传入。该函数接收两个参数，i1,i2。

  • i1为时间占比。
  • i2为时间进行到i1时的进度占比。
  • 格式如下 function(i1,i2){}

• delay，可选参数，设置动画延迟多久执行，以秒为单位

• playNum,可选参数，设置动画播放次数，默认为1，若设置为'infinite'，代表无限循环播放。 距离

让小球飞一会

            var start = 0,
                end = 300;
            //此处构造函数名称为 bezier，是因为通过require.js引入的，模块名是bezier。
            var animation = new bezier(5, [0.25, 1, 0.25, 1], function(i1, i2) {
                ball.style.transform = "translateX(" + i2 * (end - start) + "px)";
                ball.style.opacity = "" + (1 - i2);
                hint.innerHTML=animation.getStatus()+"..."
            }, 0).end(function() {
                ball.style.transform = "";
                ball.style.opacity = "1";
                hint.innerHTML=animation.getStatus()+"..."
            });
            animation.play();

demo

play()

开始动画

            startBtn.addEventListener("click", function() {
                cssBall.className = "ball ani";
                this.style.visibility = "";
                cssBall.style.cssText = "";
                animation.play();
            })

stop()

暂停动画。

            pauseBtn.addEventListener("click", function() {
                animation.stop();
                hint.innerHTML=animation.getStatus()+"..."
            })

end(handler)

动画结束事件

            var animation = new bezier(5, [0.25, 1, 0.25, 1], function(i1, i2) {
                ball.style.transform = "translateX(" + i2 * (end - start) + "px)";
                ball.style.opacity = "" + (1 - i2);
            }, 0).end(function() {
                ball.style.transform = "";
                ball.style.opacity = "1";
            });

getStatus()

获取动画状态

• RUNNING,播放中
• PAUSING,暂停中
• OVER，动画结束

            animation.getStatus();