读Zepto源码之fx_methods模块

fx 模块提供了 animate 动画方法,fx_methods 利用 animate 方法,提供一些常用的动画方法。所以 fx_methods 模块依赖于 fx 模块,在引入 fx_methods 前必须引入 fx 模块。

读 Zepto 源码系列文章已经放到了github上,欢迎star: reading-zepto

源码版本

本文阅读的源码为 zepto1.2.0

GitBook

reading-zepto

内部方法

anim

function anim(el, speed, opacity, scale, callback) {
  if (typeof speed == 'function' && !callback) callback = speed, speed = undefined
  var props = { opacity: opacity }
  if (scale) {
    props.scale = scale
    el.css($.fx.cssPrefix + 'transform-origin', '0 0')
  }
  return el.animate(props, speed, null, callback)
}

如果 speed 的参数类型为函数,并且 callback 没有传递,则认为 speed 位置的参数为 callback

props 是过渡的属性, fx_fethods 主要实现 showhidefadeInfadeOut 等动画,用到的过渡属性为 opecityscale

当为 scale 时,将转换的原点设置为 0 0

最后调用的是 fx 模块中的 animate 方法。

hide

var document = window.document, docElem = document.documentElement,
    origShow = $.fn.show, origHide = $.fn.hide, origToggle = $.fn.toggle
function hide(el, speed, scale, callback) {
  return anim(el, speed, 0, scale, function(){
    origHide.call($(this))
    callback && callback.call(this)
  })
}

hide 方法其实就是将 opacity 的属性设置为 0 。在动画完成后,调用 origHide 方法,即原有的 hide 方法,将元素的 display 设置为 none。原有的 hide 方法分析见《读Zepto源码之样式操作

.show()

$.fn.show = function(speed, callback) {
  origShow.call(this)
  if (speed === undefined) speed = 0
  else this.css('opacity', 0)
  return anim(this, speed, 1, '1,1', callback)
}

show 方法首先调用原有的 hide 方法,将元素显示出来,这是实现动画的基本条件。

如果没有设置 speed, 表示不需要动画,则过渡时间 speed 设置为 0。立即显示元素。

否则,先将 opactity 设置为 0, 再调用 anim 方法执行动画。opacity 设置为 0 也是执行动画的关键,从 0 变为 1 才有过渡的效果。

.hide()

$.fn.hide = function(speed, callback) {
  if (speed === undefined) return origHide.call(this)
  else return hide(this, speed, '0,0', callback)
}

如果 speed 没有传递,简单调用原有的 hide 方法即可,因为不需要过渡效果。

否则调用内部方法 hide

.toggle()

$.fn.toggle = function(speed, callback) {
  if (speed === undefined || typeof speed == 'boolean')
    return origToggle.call(this, speed)
  else return this.each(function(){
    var el = $(this)
    el[el.css('display') == 'none' ? 'show' : 'hide'](speed, callback)
  })
}

toggle 方法是 showhide 方法的切换。

如果 speed 没有传递,或者为 boolean 值,则表示不需要动画,调用原有的 toggle 方法即可。为什么要有一个 boolean 值的判断呢,这要看回 《读Zepto源码之样式操作》关于 toggle 方法的分析了,原有的 toggle 方法接收一个参数,如果为 true,则指定调用 show 方法,否则调用 hide 方法。

否则,判断每个元素的 display 属性值,如果为 none,则调用 show 方法显示,否则调用 hide 方法隐藏。

.fadeTo()

$.fn.fadeTo = function(speed, opacity, callback) {
  return anim(this, speed, opacity, null, callback)
}

fadeTo 可以其实是通过调节过渡时间 speed 和透明度 opacity 来实现动画效果。

showhide 不同的是,fadeToopacity 不一定为 1 或者 0, 可以由调用者指定。

.fadeIn()

$.fn.fadeIn = function(speed, callback) {
  var target = this.css('opacity')
  if (target > 0) this.css('opacity', 0)
  else target = 1
  return origShow.call(this).fadeTo(speed, target, callback)
}

淡入效果。

fadeIn 其实调用的是 fadeTo ,跟 show 有点类似,最终将 opacity 变为 1 。只是不处理 scale 变形。

.fadeOut()

$.fn.fadeOut = function(speed, callback) {
  return hide(this, speed, null, callback)
}

淡出。

fadeOut 调用的是 hide 方法,只是不处理 scale 变形。

.fadeToggle()

$.fn.fadeToggle = function(speed, callback) {
  return this.each(function(){
    var el = $(this)
    el[
      (el.css('opacity') == 0 || el.css('display') == 'none') ? 'fadeIn' : 'fadeOut'
    ](speed, callback)
  })
}

切换淡入淡出效果。

如果 displaynode 时,调用 fadeIn 方法显示,否则调用 fadeOut 方法隐藏。

系列文章

  1. 读Zepto源码之代码结构
  2. 读Zepto源码之内部方法
  3. 读Zepto源码之工具函数
  4. 读Zepto源码之神奇的$
  5. 读Zepto源码之集合操作
  6. 读Zepto源码之集合元素查找
  7. 读Zepto源码之操作DOM
  8. 读Zepto源码之样式操作
  9. 读Zepto源码之属性操作
  10. 读Zepto源码之Event模块
  11. 读Zepto源码之IE模块
  12. 读Zepto源码之Callbacks模块
  13. 读Zepto源码之Deferred模块
  14. 读Zepto源码之Ajax模块
  15. 读Zepto源码之Assets模块
  16. 读Zepto源码之Selector模块
  17. 读Zepto源码之Touch模块
  18. 读Zepto源码之Gesture模块
  19. 读Zepto源码之IOS3模块
  20. 读Zepto源码之Fx模块

参考

License

署名-非商业性使用-禁止演绎 4.0 国际 (CC BY-NC-ND 4.0)

作者:对角另一面

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏老马寒门IT

05-老马jQuery教程-动画

jQuery的动画系统做的非常出色,而且把最常用的显示、隐藏、淡入淡出、滑动显示和折叠凳效果都做了很好的封装。跟jQuery的选择器和事件配合起来,可以实现很多...

2020
来自专栏逆向技术

32位汇编第二讲,编写窗口程序,加载资源,响应消息,以及调用C库函数

       32位汇编第二讲,编写窗口程序,加载资源,响应消息,以及调用C库函数 一丶32位汇编编写Windows窗口程序 首先我们知道32位汇编是可以调...

2018
来自专栏菜鸟前端工程师

JavaScript学习笔记027-BOM0window0location

653
来自专栏Java技术分享

Intellij IDEA调试功能使用总结

这段时间一直在使用Intellij IDEA, 今天把调试区工具的使用方法记录于此。 先编译好要调试的程序。 1.设置断点 ? 选定要设置断点的代码行,在行号的...

1809
来自专栏企鹅号快讯

PHP实现定时任务的几种方式

关于定时任务,之前以前认识了一种最常用的:crontab定时任务。通过linux的定时任务去实现。今天又认识了一下php实现定时方式的其它方式,总结一下。 ? ...

2617
来自专栏C/C++基础

g++入门教程

g++是GNU开发的C++编译器,是GCC(GNU Compiler Collection)GNU编译器套件的组成部分。另外,gcc是GNU的C编译器。

481
来自专栏Linux驱动

makefile使用.lds链接脚本以及 $@ ,$^, $,< 解析

先来分析一个简单的.lds链接脚本 例1,假如现在有head.c init.c nand.c main.c这4个文件: 1.1 首先创建链接脚本nand.lds...

20110
来自专栏源码之家

WORD中一次性删除所有图片

1935
来自专栏潇涧技术专栏

Head First Stanford NLP (4)

(深入浅出Stanford NLP 深入篇) 本文介绍与Stanford CoreNLP源码相关的内容。

632
来自专栏精讲JAVA

14个你可能不知道的JavaScript调试技巧

以更快的速度和更高的效率来调试JavaScript 熟悉工具可以让工具在工作中发挥出更大的作用。尽管江湖传言 JavaScript 很难调试,但如果你掌握了几个...

1926

扫码关注云+社区