插件 jquerykeyframes 中文API文档

🌙
手机阅读
本文目录结构

插件 jquerykeyframes 中文API文档

源码 & 下载

jQuery-Keyframes允许动态生成具有回调事件和其他优点的CSS3关键帧。

这个库是Keyframes.js的包装器,它是一个vanilla js库,允许动态生成带有回调事件和其他好处的CSS关键帧。

概观

CSS3引入了奇特的功能,如转换,平移,旋转和缩放。jQuery有一个非常好的内置$(选择器).animate()函数,可以轻松设置这些动画。但是,jQuery的animate()不支持多个关键帧。jQuery.Keyframes可以帮助您实现这一目标。

要求

<script src='http://code.jquery.com/jquery-3.3.1.slim.min.js'></script>

安装

使用以下行在文档中包含脚本:

<script src='/path/to/jquery.keyframes[.min].js'></script>

只有在页面加载后才能定义和播放动画window.onload。

用法

检测CSS动画支持

var supportedFlag = $.keyframe.isSupported();

添加新动画序列(关键帧)

$.keyframe.define([{
    name: 'trapdoor-sequence',
    '0%': {'height': '70px'},
    '30%': {'height': '10px'},
    '60%': {'height': '30px'},
    '100%': {'height': '10px'}
}]);

添加单帧样式

$.keyframe.define({
    name: 'ball-roll',
    from: {
        'transform': 'rotate(0deg)'
    },
    to: {
        'transform': 'rotate(360deg)'
    }
});

添加多个框架样式

$.keyframe.define([{
	name: 'roll-clockwise',
	'0%': {
	    'margin-left' : '0px',
	    'background-color' : 'red',
	    'transform' : 'rotate(0deg)'
	},
	'100%': {
	    'margin-left' : '600px',
	    'transform' : 'rotate(360deg)'
	}
    },{
	name: 'roll-anti-clockwise',
	'0%': {
	    'margin-left' : '0px',
	    'background-color' : 'red',
	    'transform' : 'rotate(0deg)'
	},
	'100%': {
	    'margin-left' : '600px',
	    'transform' : 'rotate(-360deg)'
	}
    }
]);

以数组方式添加样式和属性

给出了CSS样式定义的相似之处

var shake_start = {'transform': 'translate(0px)'};
var shake_odd1 = {'transform': 'translate(-10px, -10px)'};
var shake_even1 = {'transform': 'translate(10px, 10px)'};
var shake_odd2 = {'transform': 'translate(10px, -10px)'};
var shake_even2 = {'transform': 'translate(-10px, 10px)'};

$.keyframe.define([{
	name: 'crazy',
	'0%': shake_start,
	'10%': shake_odd2,
	'20%': shake_even1,
	'30%': shake_odd2,
	'40%': shake_even2,
	'50%': shake_odd2,
	'60%': shake_even1,
	'75.3%': shake_odd1,
	'80.45%': shake_even2,
	'91.6%': shake_odd1
    }
]);

请注意,您可以根据需要向阵列添加任意数量的属性

响应动画

$.keyframe.define([{
    name: 'roll-clockwise',
    media: 'screen and (max-width: 700px)',
    from: {
        'margin-left' : '0px'
    },
    to: {
        'margin-left' : '600px'
    }
    }
]);

播放动画

可用的css3动画方法在这里有更好的记录:http://www.w3schools.com/css/css3_animations.asp

$(selector).playKeyframe({
    name: 'trapdoor-sequence', // name of the keyframe you want to bind to the selected element
    duration: '1s', // [optional, default: 0, in ms] how long you want it to last in milliseconds
    timingFunction: 'linear', // [optional, default: ease] specifies the speed curve of the animation
    delay: '0s', //[optional, default: 0s]  how long you want to wait before the animation starts
    iterationCount: 'infinite', //[optional, default:1]  how many times you want the animation to repeat
    direction: 'normal', //[optional, default: 'normal']  which direction you want the frames to flow
    fillMode: 'forwards', //[optional, default: 'forward']  how to apply the styles outside the animation time, default value is forwards
    complete: function(){} //[optional] Function fired after the animation is complete. If repeat is infinite, the function will be fired every time the animation is restarted.
});

播放动画(速记)

$(selector).playKeyframe(
    'trapdoor-sequence 1s linear 0s infinite normal forwards',
    complete
);

播放多个动画

$(selector).playKeyframe([
    'trapdoor-sequence 1s linear 0s infinite',
    {
      name: 'ball-roll',
      duration: "3s",
      timingFunction: 'ease',
      iterationCount: 1
    }
], complete);

重置动画

$(selector).resetKeyframe(callback);

冻结关键帧动画并杀死回调

$(selector).pauseKeyframe();

恢复关键帧动画

$(selector).resumeKeyframe();

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了