Animation对象
作为一个对象,可以通过new Animation()
来获取
而实例化时,可以接收一个KeyFrameEffect
对象
//实例化Animation对象
const animation = new Animation(new KeyframeEffect(
document.querySelector("div"),
{
background: 'red',
},
5000,
));
对于KeyFrameEffect
对象,接受三个参数
- 目标 – 唯一,执行动画的元素
- CSS属性 – 以键值对形式加入
- 时间 | 配置 – 可以传入一个对象定制更多属性
在创建完成之后并不会立刻执行,而是通过对象使用play()
来启动,最主要是解决几个问题
- 动画完成之后的回调函数‘
- 动画可以刹车
这些,都有对象对应的方法来完成
基础动画
在jQuery
动画函数系统中,只要实现了animate()这一个,其他只是外层套壳的简写形式
参数解析
参数 | 说明 |
---|---|
prop | 一个对象,以键值对展示的CSS属性,表示动画结束时的样式 |
speed | 速度,关键词或者以毫秒为单位的纯数字,并不接受1s这一类带单位的时间,当未填写时默认为400 |
easing | 速度曲线 |
callback | 结束时的回调函数 |
先完成一个骨架
const animate = function(prop, speed, easing, callback) {
//循环法,给匹配元素都加上
this.each(function() {
//创建动画对象,初始化相应属性
const animation = new Animation(new KeyframeEffect(
this,
prop,
{
//速度曲线
easing,
//执行时间
duration: speed ? speed : 400,
}
));
//设置动画结束时的回调函数
animation.onfinish = () => {
//修改回调函数this
callback.bind(this)();
};
//启动动画
animation.play();
});
//返回对象,继续链式
return this;
};
可以尝试其他几个现成动画是否可以达到效果,如hide()
与show()
注意,方法要添加至原型上
//单位暂时不能省略
$("div").animate({
height: 0,
width: 0,
opacity: 0,
}, 5000, "ease", function() {
$(this).animate({
height: "100px",
width: "100px",
opacity: 1,
}, 1000, "linear", () => {
console.log("动画完成");
});
});
回调稳定没有问题,但是并没有将最后动画完成的状态给保留下来,与CSS
中的动画表现一致,需要设置配置Animation
对象属性
const animation = new Animation(new KeyframeEffect(
this,
prop,
{
//速度曲线
easing,
//执行时间
duration: speed ? speed : 400,
//动画结束时保持最后一帧状态
fill: 'forwards',
}
));
至此,基础的使用便能畅通,再对参数做好相应的处理做好判断
//优化
const animate = function(prop, speed, easing, callback) {
//关键参数需要有保证
if ($.type(prop) === "object") {
//如果第二参数就是函数,那么时间参数调整为默认值
if (typeof speed === "function") {
callback = speed;
speed = 400;
easing = "ease";
}
//或者说曲线参数省略
else if (typeof easing === "function") {
callback = easing;
easing = "ease";
}
//对于漏缺的单位进行检查补充,使用之前包装的函数unit
$.each(prop, (key, value) => {
prop[key] = unit(value, key);
});
$("div").each(function() {
const animation = new Animation(
new KeyframeEffect(
this,
prop,
{
//速度曲线
easing,
//防止只有一个参数时,时间默认为空
duration: speed ? speed : 400,
//动画结束时保持最后一帧状态
fill: "forwards",
},
),
);
//结束回调
animation.onfinish = () => {
//防止并没有传递函数参数
if (typeof callback === "function") {
callback.bind(this)();
}
};
animation.play();
});
}
//返回对象,继续链式
return this;
};
因为多个参数都可以省略不写,使用默认参数并不能解决问题