章节
问答
课签
笔记
评论
占位
占位

动画接口

jQuery 动画其实原理上本身是不复杂的。量变产生质变,参杂了大量的设计技巧,同时通过扩展大量的便捷方式加大了逻辑上的难度,我们这章深入的认识下 jQuery 的 API 的具体的含义以及实现上的一些细节。

jQuery 动画是通过 animate 这个 API 设置执行的,其内部也是按照每一个 animate 的划分封装了各自动画组的行为,包括数据过滤、缓动公式、一些动画默认参数的设置、元素状态的调整、事件的处理通知机制、执行等等,换句话说,我们可以把 animate 看作一个对象,对象封装自己的一系列属性与方法,jQuery 可以支持连续动画,那么 animate 与 animate 之间的切换就是通过队列 queue,这个之前就已经详细的解释过了。

动画的参数

jQuery的内部的方法都是针对 API 的处理范围设计的,我们看看 Animation 方法的支持情况:

.animate( properties [, duration ] [, easing ] [, complete ] )
.animate( properties, options )
  • 区别就与第二组数据的传递,options 是支持对象传参
  • properties 参数就是写一个 CSS 属性和值的对象,动画都是涉及变化的,那么什么值才能变化?
  • 理论上来说有数值的属性都是可以变化的,width, height 或者 left 可以执行动画,但是 background-color 不能,但是也不是绝对的,主要看数据的解析度,可以用插件支持
  • 除了样式属性, 一些非样式的属性,如 scrollTop 和 scrollLeft,以及自定义属性,也可应用于动画
  • 除了定义数值,每个属性能使用'show', 'hide', 和 'toggle'。这些快捷方式允许定制隐藏和显示动画用来控制元素的显示或隐藏。为了使用 jQuery 内置的切换状态跟踪,'toggle'关键字必须在动画开始前给定属性值

简单的来说,就是把一对的参数丢到 animate 方法里面,然后 animate 就开始执行你参数规定的动画了,那么动画每执一次就会通过回调通知告诉开发者,具体有 complete/done/fail/always/step 接口等。

理解定义(代码参考右边)

book.animate({
    opacity: 0.25,
    left: '50',
    height: 'toggle'
}, {
    duration :1000,
    specialEasing: {
        height: 'linear'
    },
    step: function(now, fx) {
        console.log('step')
    },
    progress:function(){
        console.log('progress')
    },
    complete:function(){
        console.log('动画完成')
    }
})

首先,动画的参数都是最终值,都是相对数据。

如上 div 元素的起始:

  • opacity: 是 1,那么通过动画改成 0.25
  • left: 是 500,那么通过动画改成 50
  • height: 为'toggle' 意味着如果是隐藏与显示的自动切换
  • step:是针对 opacity/left/height 各自动画,每次改变通知三次
  • progress: 是把 opacity/left/height 看成一组了,每次改变只通知一次

初步理解 API 的一些设置后,我们下一节研究下动画的变换算法。

任务

?不会了怎么办
||

提问题

写笔记

截图
提交
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

举报

0/150
提交
取消
全部 精华 我要发布
全部 我要发布
最新 点赞
只看我的

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?