如何在Vue2.X/Vue3.X项目引入jQuery,以及增加jQuery.easing扩展?让你的动画效果更加丝滑!

本文涉及的产品
Redis 开源版,标准版 2GB
推荐场景:
搭建游戏排行榜
云数据库 Tair(兼容Redis),内存型 2GB
简介: 如何在Vue 2或Vue 3项目中引入jQuery及其动画扩展库jQuery.easing,以实现更丰富的动画效果。

前言

还记得在2015左右,网页开发依然是jQuery的天下,虽然Vue、React开始盛行,以及后面Angular也开始抢占市场,但是jQuery在市场上依然占有较大的比重。当时的html页面大多是用jQuery来写的,为jQuery设计的插件也是相当丰富的。比如,使用 jquery.js 结合 jquery.easing.js 来实现动画效果就挺方便的。之所以使用 jquery.easing.js 扩展库,是因为 jQuery 的 animate 动画方法中,预设的speed参数较少,而 jquery.easing.js 可帮你实现特殊的动画效果。

$(selector).animate({
   
   params},speed,callback)

// 参数说明:
// params:必需的,参数定义形成动画的 CSS 属性;
// speed:可选的,参数规定效果的时长,如:"swing""slow""fast""linear""normal" 或 毫秒数值;
// callback:可选的,参数是动画完成后所执行的函数名称;

缓动函数速查表https://easings.net/zh-cn

一、Vue 项目引入 jQuery

(1)导入依赖

npm i jquery

(2)使用方式

import $ from 'jquery'
import jQuery from 'jquery'

console.log($('body'))
console.log(jQuery ('body'))

二、增加 jQuery.easing 扩展

(1)任意下载一个 jquery.easing.js 文件

(2)格式化此文件的代码,方便提取代码

(3)若是Vue2项目,则在 vue 页面的 mounted 生命周期函数中加入以下代码即可,若是Vue3项目,则在 vue 页面的 onMounted 生命周期函数中加入以下代码即可

/*
 * jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/
 *
 * Uses the built in easing capabilities added In jQuery 1.1
 * to offer multiple easing options
 *
 * TERMS OF USE - EASING EQUATIONS
 * 
 * Open source under the BSD License. 
 * 
 * Copyright © 2001 Robert Penner
 * All rights reserved.
 *
 * TERMS OF USE - jQuery Easing
 * 
 * Open source under the BSD License. 
 * 
 * Copyright © 2008 George McGinley Smith
 * All rights reserved.
 *
 * Redistribution and use in source and binary forms, with or without modification, 
 * are permitted provided that the following conditions are met:
 * 
 * Redistributions of source code must retain the above copyright notice, this list of 
 * conditions and the following disclaimer.
 * Redistributions in binary form must reproduce the above copyright notice, this list 
 * of conditions and the following disclaimer in the documentation and/or other materials 
 * provided with the distribution.
 * 
 * Neither the name of the author nor the names of contributors may be used to endorse 
 * or promote products derived from this software without specific prior written permission.
 * 
 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY 
 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
 * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
 *  COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
 *  EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
 *  GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED 
 * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
 *  NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED 
 * OF THE POSSIBILITY OF SUCH DAMAGE. 
 *
*/
jQuery.easing.jswing = jQuery.easing.swing;
jQuery.extend(jQuery.easing, {
   
   
    def: "easeOutQuad",
    swing: function (e, f, a, h, g) {
   
    return jQuery.easing[jQuery.easing.def](e, f, a, h, g) },
    easeInQuad: function (e, f, a, h, g) {
   
    return h * (f /= g) * f + a },
    easeOutQuad: function (e, f, a, h, g) {
   
    return -h * (f /= g) * (f - 2) + a },
    easeInOutQuad: function (e, f, a, h, g) {
   
    if ((f /= g / 2) < 1) {
   
    return h / 2 * f * f + a } return -h / 2 * ((--f) * (f - 2) - 1) + a },
    easeInCubic: function (e, f, a, h, g) {
   
    return h * (f /= g) * f * f + a },
    easeOutCubic: function (e, f, a, h, g) {
   
    return h * ((f = f / g - 1) * f * f + 1) + a },
    easeInOutCubic: function (e, f, a, h, g) {
   
    if ((f /= g / 2) < 1) {
   
    return h / 2 * f * f * f + a } return h / 2 * ((f -= 2) * f * f + 2) + a },
    easeInQuart: function (e, f, a, h, g) {
   
    return h * (f /= g) * f * f * f + a },
    easeOutQuart: function (e, f, a, h, g) {
   
    return -h * ((f = f / g - 1) * f * f * f - 1) + a },
    easeInOutQuart: function (e, f, a, h, g) {
   
    if ((f /= g / 2) < 1) {
   
    return h / 2 * f * f * f * f + a } return -h / 2 * ((f -= 2) * f * f * f - 2) + a },
    easeInQuint: function (e, f, a, h, g) {
   
    return h * (f /= g) * f * f * f * f + a },
    easeOutQuint: function (e, f, a, h, g) {
   
    return h * ((f = f / g - 1) * f * f * f * f + 1) + a },
    easeInOutQuint: function (e, f, a, h, g) {
   
    if ((f /= g / 2) < 1) {
   
    return h / 2 * f * f * f * f * f + a } return h / 2 * ((f -= 2) * f * f * f * f + 2) + a },
    easeInSine: function (e, f, a, h, g) {
   
    return -h * Math.cos(f / g * (Math.PI / 2)) + h + a },
    easeOutSine: function (e, f, a, h, g) {
   
    return h * Math.sin(f / g * (Math.PI / 2)) + a },
    easeInOutSine: function (e, f, a, h, g) {
   
    return -h / 2 * (Math.cos(Math.PI * f / g) - 1) + a },
    easeInExpo: function (e, f, a, h, g) {
   
    return (f == 0) ? a : h * Math.pow(2, 10 * (f / g - 1)) + a },
    easeOutExpo: function (e, f, a, h, g) {
   
    return (f == g) ? a + h : h * (-Math.pow(2, -10 * f / g) + 1) + a },
    easeInOutExpo: function (e, f, a, h, g) {
   
    if (f == 0) {
   
    return a } if (f == g) {
   
    return a + h } if ((f /= g / 2) < 1) {
   
    return h / 2 * Math.pow(2, 10 * (f - 1)) + a } return h / 2 * (-Math.pow(2, -10 * --f) + 2) + a },
    easeInCirc: function (e, f, a, h, g) {
   
    return -h * (Math.sqrt(1 - (f /= g) * f) - 1) + a },
    easeOutCirc: function (e, f, a, h, g) {
   
    return h * Math.sqrt(1 - (f = f / g - 1) * f) + a },
    easeInOutCirc: function (e, f, a, h, g) {
   
    if ((f /= g / 2) < 1) {
   
    return -h / 2 * (Math.sqrt(1 - f * f) - 1) + a } return h / 2 * (Math.sqrt(1 - (f -= 2) * f) + 1) + a },
    easeInElastic: function (f, h, e, l, k) {
   
    var i = 1.70158; var j = 0; var g = l; if (h == 0) {
   
    return e } if ((h /= k) == 1) {
   
    return e + l } if (!j) {
   
    j = k * 0.3 } if (g < Math.abs(l)) {
   
    g = l; var i = j / 4 } else {
   
    var i = j / (2 * Math.PI) * Math.asin(l / g) } return -(g * Math.pow(2, 10 * (h -= 1)) * Math.sin((h * k - i) * (2 * Math.PI) / j)) + e },
    easeOutElastic: function (f, h, e, l, k) {
   
    var i = 1.70158; var j = 0; var g = l; if (h == 0) {
   
    return e } if ((h /= k) == 1) {
   
    return e + l } if (!j) {
   
    j = k * 0.3 } if (g < Math.abs(l)) {
   
    g = l; var i = j / 4 } else {
   
    var i = j / (2 * Math.PI) * Math.asin(l / g) } return g * Math.pow(2, -10 * h) * Math.sin((h * k - i) * (2 * Math.PI) / j) + l + e },
    easeInOutElastic: function (f, h, e, l, k) {
   
    var i = 1.70158; var j = 0; var g = l; if (h == 0) {
   
    return e } if ((h /= k / 2) == 2) {
   
    return e + l } if (!j) {
   
    j = k * (0.3 * 1.5) } if (g < Math.abs(l)) {
   
    g = l; var i = j / 4 } else {
   
    var i = j / (2 * Math.PI) * Math.asin(l / g) } if (h < 1) {
   
    return -0.5 * (g * Math.pow(2, 10 * (h -= 1)) * Math.sin((h * k - i) * (2 * Math.PI) / j)) + e } return g * Math.pow(2, -10 * (h -= 1)) * Math.sin((h * k - i) * (2 * Math.PI) / j) * 0.5 + l + e },
    easeInBack: function (e, f, a, i, h, g) {
   
    if (g == undefined) {
   
    g = 1.70158 } return i * (f /= h) * f * ((g + 1) * f - g) + a },
    easeOutBack: function (e, f, a, i, h, g) {
   
    if (g == undefined) {
   
    g = 1.70158 } return i * ((f = f / h - 1) * f * ((g + 1) * f + g) + 1) + a },
    easeInOutBack: function (e, f, a, i, h, g) {
   
    if (g == undefined) {
   
    g = 1.70158 } if ((f /= h / 2) < 1) {
   
    return i / 2 * (f * f * (((g *= (1.525)) + 1) * f - g)) + a } return i / 2 * ((f -= 2) * f * (((g *= (1.525)) + 1) * f + g) + 2) + a },
    easeInBounce: function (e, f, a, h, g) {
   
    return h - jQuery.easing.easeOutBounce(e, g - f, 0, h, g) + a },
    easeOutBounce: function (e, f, a, h, g) {
   
    if ((f /= g) < (1 / 2.75)) {
   
    return h * (7.5625 * f * f) + a } else {
   
    if (f < (2 / 2.75)) {
   
    return h * (7.5625 * (f -= (1.5 / 2.75)) * f + 0.75) + a } else {
   
    if (f < (2.5 / 2.75)) {
   
    return h * (7.5625 * (f -= (2.25 / 2.75)) * f + 0.9375) + a } else {
   
    return h * (7.5625 * (f -= (2.625 / 2.75)) * f + 0.984375) + a } } } },
    easeInOutBounce: function (e, f, a, h, g) {
   
    if (f < g / 2) {
   
    return jQuery.easing.easeInBounce(e, f * 2, 0, h, g) * 0.5 + a } return jQuery.easing.easeOutBounce(e, f * 2 - g, 0, h, g) * 0.5 + h * 0.5 + a }
});

(4)使用方式

$('body').animate(
  {
   
    'margin-top': '50%' }, {
   
    easing: 'easeOutExpo' }
)
相关实践学习
基于Redis实现在线游戏积分排行榜
本场景将介绍如何基于Redis数据库实现在线游戏中的游戏玩家积分排行榜功能。
云数据库 Redis 版使用教程
云数据库Redis版是兼容Redis协议标准的、提供持久化的内存数据库服务,基于高可靠双机热备架构及可无缝扩展的集群架构,满足高读写性能场景及容量需弹性变配的业务需求。 产品详情:https://www.aliyun.com/product/kvstore &nbsp; &nbsp; ------------------------------------------------------------------------- 阿里云数据库体验:数据库上云实战 开发者云会免费提供一台带自建MySQL的源数据库&nbsp;ECS 实例和一台目标数据库&nbsp;RDS实例。跟着指引,您可以一步步实现将ECS自建数据库迁移到目标数据库RDS。 点击下方链接,领取免费ECS&amp;RDS资源,30分钟完成数据库上云实战!https://developer.aliyun.com/adc/scenario/51eefbd1894e42f6bb9acacadd3f9121?spm=a2c6h.13788135.J_3257954370.9.4ba85f24utseFl
目录
相关文章
N..
|
6月前
|
JavaScript 前端开发 UED
jQuery动画特效
jQuery动画特效
N..
73 1
|
6月前
|
JavaScript
jquery动画与事件案例
jquery动画与事件案例
|
6月前
|
机器学习/深度学习 JavaScript
|
1月前
|
JavaScript 前端开发 UED
jQuery 动画
【10月更文挑战第8天】
109 55
|
5月前
|
移动开发 JavaScript 前端开发
老程序员分享:jQuery笔记(四)jQuery中的动画
老程序员分享:jQuery笔记(四)jQuery中的动画
48 0
|
2月前
|
JavaScript
jQuery 停止动画
jQuery 停止动画
19 4
|
2月前
|
缓存 JavaScript 前端开发
jQuery 效果- 动画
jQuery 效果- 动画
28 4
|
2月前
|
JavaScript 前端开发
jQuery 效果- 动画
jQuery 效果- 动画
41 11
|
2月前
|
JavaScript
jQuery 停止动画
jQuery 停止动画
25 11
|
5月前
|
JavaScript
jQuery 动画小练习
jQuery 动画小练习
33 0