animate相关知识
-
jquery笔记 animate动画语法1 .animate( properties ,[ duration ], [ easing ], [ complete ] ) .animate({ left: 50, width: '50px' opacity: 'show', fontSize: "10em", }, 500); .animate({ fontSize: "5em" }, 2000, function() { alert("动画 fontSize执行完毕!"); }); .animate({ width: "toggle" }); .animate({ width : "+=100px", height : "+=100px" }); =============================================== 语法2 .animate( properties, options ) opti
-
jQuery animate()与stop()用法animate()方法的用法w3cshool介绍基本语法:(selector).animate(style(必选),speed(可选),easing(可选),callback(可选))style:带有数字值的css样式 单一动作写法:animate({"width":"100px"},600) 组合动作:animate({"width":"100px","height":"100px"},600)speed:毫秒级时间easing:jq的一个插件函数(暂时不理解是干啥用的)callback:动画执行
-
CSS3 animate,transform,and transitionanimate CSS animations make it possible to animate transitions from one CSS style configuration to another. Animations consist of two components, a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation's style, as well as possible intermediate waypoints. CSS animations 让CSS样式间的配置渐变成为可能。包含两部分:一个描述CSS动画的样式和一个指示动画
-
x-animate屏幕滚动加载动画插件x-animate是通过屏幕滚动控制动画执行的插件,可以完美配合animate.css使用。 <p align="center"> <img width="300" src="https://github.com/codexu/_images/blob/master/x-animate/animate.gif?raw=true"> </p> 起步 通过npm安装 npm install animate.css x-animate --save 通过import引入x-animate,通过new操作符创建一个新的Animate对象。 // javascript import 'animate.css' import Animate from 'x-animate' new Animate(); <!-- html --> <div animate="b
animate相关课程
animate相关教程
- 3. 调节雪碧图尺寸 不过感觉最后这个跳动的卡通小人还是有点大,像素颗粒感明显,所以我们绝定缩小一下加载动画最后一帧给定的宽高:/* 清除浏览器默认边距 */* { padding: 0; margin: 0; }body { /* 这段代码是为了居中显示,不是重点,看不懂的话可以无视 */ height: 100vh; display: flex; align-items: center; justify-content: center; /* 添加背景图 */ background: url(../img/bg.jpg) center / cover;}.animate { width: 130px; height: 130px; background: url(../img/rect.png); /* 动画: 动画名(loading) 时长(0.6秒) 运行方式(step-end) 动画次数(3次) 填充模式(双向) */ animation: loading .6s step-end 3 both, /* 动画可以定义多个,每个动画用逗号分隔。*/ /* 第二个动画的动画名(animate) 时长(0.8秒) 运行方式(step-end) 延时(1.8秒) 动画次数(无限) */ animate .8s steps(12) 1.8s infinite;}/* 定义动画:动画名(loading) */@keyframes loading { from { background-position: 0 0 } /* 第一个数字代表x轴坐标,第二个数字代表y轴坐标 */ 10% { background-position: -130px 0 } /* x坐标:-130 y坐标:0 */ 20% { background-position: -260px 0 } /* x坐标:-260 y坐标:0 */ 30% { background-position: -390px 0 } /* x坐标:-390 y坐标:0 */ 40% { background-position: -520px 0 } /* x坐标:-520 y坐标:0 */ 50% { background-position: 0 -130px } /* x坐标:0 y坐标:-130 */ 60% { background-position: -130px -130px } /* x坐标:-130 y坐标:-130 */ 70% { background-position: -260px -130px } /* x坐标:-260 y坐标:-130 */ 80% { background-position: -390px -130px } /* x坐标:-390 y坐标:-130 */ 90% { background-position: -520px -130px } /* x坐标:-520 y坐标:-130 */ /* 修改最后一帧,以便动画结束后盒子就应用最后一帧的样式 */ to { /* 下一个动画的宽高 */ width: 108px; height: 150px; /* 下一个动画的雪碧图 */ background-image: url(../img/animate.png); }}/* 定义动画:动画名(animate) */@keyframes animate { from { background-position: 0 } to { background-position: -2600px }}注意:宽高一定要按比例缩小,不能宽缩小三分之一,高缩小一半。要宽和高都同时缩小一半才能保持住比例。运行结果:看起来怎么和咱们预想中的效果不太一样呢?因为盒子缩小了一半,但是雪碧图却并没有缩小,那么大家还记得之前的章节中我们讲过的如果雪碧图尺寸不吻合时怎么办吗?对没错!(大概率是不记得了)就是background-size: cover;/* 清除浏览器默认边距 */* { padding: 0; margin: 0; }body { /* 这段代码是为了居中显示,不是重点,看不懂的话可以无视 */ height: 100vh; display: flex; align-items: center; justify-content: center; /* 添加背景图 */ background: url(../img/bg.jpg) center / cover;}.animate { width: 130px; height: 130px; background: url(../img/rect.png); /* 动画: 动画名(loading) 时长(0.6秒) 运行方式(step-end) 动画次数(3次) 填充模式(双向) */ animation: loading .6s step-end 3 both, /* 动画可以定义多个,每个动画用逗号分隔。*/ /* 第二个动画的动画名(animate) 时长(0.8秒) 运行方式(step-end) 延时(1.8秒) 动画次数(无限) */ animate .8s steps(12) 1.8s infinite;}/* 定义动画:动画名(loading) */@keyframes loading { from { background-position: 0 0 } /* 第一个数字代表x轴坐标,第二个数字代表y轴坐标 */ 10% { background-position: -130px 0 } /* x坐标:-130 y坐标:0 */ 20% { background-position: -260px 0 } /* x坐标:-260 y坐标:0 */ 30% { background-position: -390px 0 } /* x坐标:-390 y坐标:0 */ 40% { background-position: -520px 0 } /* x坐标:-520 y坐标:0 */ 50% { background-position: 0 -130px } /* x坐标:0 y坐标:-130 */ 60% { background-position: -130px -130px } /* x坐标:-130 y坐标:-130 */ 70% { background-position: -260px -130px } /* x坐标:-260 y坐标:-130 */ 80% { background-position: -390px -130px } /* x坐标:-390 y坐标:-130 */ 90% { background-position: -520px -130px } /* x坐标:-520 y坐标:-130 */ /* 修改最后一帧,以便动画结束后盒子就应用最后一帧的样式 */ to { /* 下一个动画的宽高 */ width: 108px; height: 150px; /* 下一个动画的雪碧图 */ background-image: url(../img/animate.png); /* 雪碧图的最短边(这里是高)刚好能够覆盖住盒子 */ background-size: cover; }}/* 定义动画:动画名(animate) */@keyframes animate { from { background-position: 0 } to { background-position: -2600px }}运行结果:
- 4. 重新调整速度 尺寸的问题是解决了,怎么速度又不对了?原来是因为雪碧图缩小了一半,所以现在的宽只有 1300 px了。可是我们定义的动画是 -2600 px,于是乎动画在相同的时间移动了 2 倍的距离,看起来就会导致速度加快。解决办法也很简单,把定义的动画距离也同比例缩小:/* 清除浏览器默认边距 */* { padding: 0; margin: 0; }body { /* 这段代码是为了居中显示,不是重点,看不懂的话可以无视 */ height: 100vh; display: flex; align-items: center; justify-content: center; /* 添加背景图 */ background: url(../img/bg.jpg) center / cover;}.animate { width: 130px; height: 130px; background: url(../img/rect.png); /* 动画: 动画名(loading) 时长(0.6秒) 运行方式(step-end) 动画次数(3次) 填充模式(双向) */ animation: loading .6s step-end 3 both, /* 动画可以定义多个,每个动画用逗号分隔。*/ /* 第二个动画的动画名(animate) 时长(0.8秒) 运行方式(step-end) 延时(1.8秒) 动画次数(无限) */ animate .8s steps(12) 1.8s infinite;}/* 定义动画:动画名(loading) */@keyframes loading { from { background-position: 0 0 } /* 第一个数字代表x轴坐标,第二个数字代表y轴坐标 */ 10% { background-position: -130px 0 } /* x坐标:-130 y坐标:0 */ 20% { background-position: -260px 0 } /* x坐标:-260 y坐标:0 */ 30% { background-position: -390px 0 } /* x坐标:-390 y坐标:0 */ 40% { background-position: -520px 0 } /* x坐标:-520 y坐标:0 */ 50% { background-position: 0 -130px } /* x坐标:0 y坐标:-130 */ 60% { background-position: -130px -130px } /* x坐标:-130 y坐标:-130 */ 70% { background-position: -260px -130px } /* x坐标:-260 y坐标:-130 */ 80% { background-position: -390px -130px } /* x坐标:-390 y坐标:-130 */ 90% { background-position: -520px -130px } /* x坐标:-520 y坐标:-130 */ /* 修改最后一帧,以便动画结束后盒子就应用最后一帧的样式 */ to { /* 下一个动画的宽高 */ width: 108px; height: 150px; /* 下一个动画的雪碧图 */ background-image: url(../img/animate.png); /* 雪碧图的最短边(这里是高)刚好能够覆盖住盒子 */ background-size: cover; }}/* 定义动画:动画名(animate) */@keyframes animate { from { background-position: 0 } to { background-position: -1300px }}运行结果:911
- 2. 调用两个动画 重点是如何进行调用,先来看一下语法:/* 清除浏览器默认边距 */* { padding: 0; margin: 0; }body { /* 这段代码是为了居中显示,不是重点,看不懂的话可以无视 */ height: 100vh; display: flex; align-items: center; justify-content: center; /* 添加背景图 */ background: url(../img/bg.jpg) center / cover;}.animate { width: 130px; height: 130px; background: url(../img/rect.png); /* 动画: 动画名(loading) 时长(0.6秒) 运行方式(step-end) 动画次数(3次) 填充模式(双向) */ animation: loading .6s step-end 3 both, /* 动画可以定义多个,每个动画用逗号分隔。*/ /* 第二个动画的动画名(animate) 时长(0.8秒) 运行方式(step-end) 延时(1.8秒) 动画次数(无限) */ animate .8s steps(12) 1.8s infinite;}/* 定义动画:动画名(loading) */@keyframes loading { from { background-position: 0 0 } /* 第一个数字代表x轴坐标,第二个数字代表y轴坐标 */ 10% { background-position: -130px 0 } /* x坐标:-130 y坐标:0 */ 20% { background-position: -260px 0 } /* x坐标:-260 y坐标:0 */ 30% { background-position: -390px 0 } /* x坐标:-390 y坐标:0 */ 40% { background-position: -520px 0 } /* x坐标:-520 y坐标:0 */ 50% { background-position: 0 -130px } /* x坐标:0 y坐标:-130 */ 60% { background-position: -130px -130px } /* x坐标:-130 y坐标:-130 */ 70% { background-position: -260px -130px } /* x坐标:-260 y坐标:-130 */ 80% { background-position: -390px -130px } /* x坐标:-390 y坐标:-130 */ 90% { background-position: -520px -130px } /* x坐标:-520 y坐标:-130 */ /* 修改最后一帧,以便动画结束后盒子就应用最后一帧的样式 */ to { /* 下一个动画的宽高 */ width: 216px; height: 300px; /* 下一个动画的雪碧图 */ background-image: url(../img/animate.png); }}/* 定义动画:动画名(animate) */@keyframes animate { from { background-position: 0 } to { background-position: -2600px }}运行结果:这是怎么个原理呢?原来调用动画的时候可以一次性调用多个动画,动画与动画直接用逗号进行分隔。第一个加载动画我们让他重复运行 3 次,由于下一个动画的背景图和宽高都和加载动画不同,所以调用第一个动画时用填充模式将最后一帧定义的样式应用到下个动画上。
- 1. 定义条形雪碧图动画 /* 清除浏览器默认边距 */* { padding: 0; margin: 0; }body { /* 这段代码是为了居中显示,不是重点,看不懂的话可以无视 */ height: 100vh; display: flex; align-items: center; justify-content: center; /* 添加背景图 */ background: url(../img/bg.jpg) center / cover;}.animate { width: 130px; height: 130px; background: url(../img/rect.png); /* 动画: 动画名(loading) 时长(0.6秒) 运行方式(step-end) 动画次数(无限) */ animation: loading .6s step-end infinite;}/* 定义动画:动画名(loading) */@keyframes loading { from { background-position: 0 0 } /* 第一个数字代表x轴坐标,第二个数字代表y轴坐标 */ 10% { background-position: -130px 0 } /* x坐标:-130 y坐标:0 */ 20% { background-position: -260px 0 } /* x坐标:-260 y坐标:0 */ 30% { background-position: -390px 0 } /* x坐标:-390 y坐标:0 */ 40% { background-position: -520px 0 } /* x坐标:-520 y坐标:0 */ 50% { background-position: 0 -130px } /* x坐标:0 y坐标:-130 */ 60% { background-position: -130px -130px } /* x坐标:-130 y坐标:-130 */ 70% { background-position: -260px -130px } /* x坐标:-260 y坐标:-130 */ 80% { background-position: -390px -130px } /* x坐标:-390 y坐标:-130 */ 90% { background-position: -520px -130px } /* x坐标:-520 y坐标:-130 */ to { background-position: 0 } /* 最后一帧不显示,可以随便写 */}/* 定义动画:动画名(animate) */@keyframes animate { from { background-position: 0 } to { background-position: -2600px }}咦?条形图只需要定义两行?一个from一个to???是的,这就是为什么推荐制作雪碧图的时候做成一行的原因。你只需要定义一开始的时候图像在原点,然后最后的时候图像有多宽,你就写负多少:这个图是2600像素,所以to里面的background-position就是 -2600px。数了一下这张雪碧图里面一共有 12 个元素,所以 steps() 括号里面要写12。div 盒子的宽高应该正好和雪碧图里面的一个元素的宽高相对应:用雪碧图的 宽 2600 除以 12 等于 216.666… 无限循环。咱们取一个近似值,就 216px 吧。所以宽高设置为 216 * 300,怎么设置呢?要让加载动画结束之后(也就是定义加载动画的最后一帧)div 就变成这个宽高。/* 清除浏览器默认边距 */* { padding: 0; margin: 0; }body { /* 这段代码是为了居中显示,不是重点,看不懂的话可以无视 */ height: 100vh; display: flex; align-items: center; justify-content: center; /* 添加背景图 */ background: url(../img/bg.jpg) center / cover;}.animate { width: 130px; height: 130px; background: url(../img/rect.png); /* 动画: 动画名(loading) 时长(0.6秒) 运行方式(step-end) 动画次数(无限) */ animation: loading .6s step-end infinite;}/* 定义动画:动画名(loading) */@keyframes loading { from { background-position: 0 0 } /* 第一个数字代表x轴坐标,第二个数字代表y轴坐标 */ 10% { background-position: -130px 0 } /* x坐标:-130 y坐标:0 */ 20% { background-position: -260px 0 } /* x坐标:-260 y坐标:0 */ 30% { background-position: -390px 0 } /* x坐标:-390 y坐标:0 */ 40% { background-position: -520px 0 } /* x坐标:-520 y坐标:0 */ 50% { background-position: 0 -130px } /* x坐标:0 y坐标:-130 */ 60% { background-position: -130px -130px } /* x坐标:-130 y坐标:-130 */ 70% { background-position: -260px -130px } /* x坐标:-260 y坐标:-130 */ 80% { background-position: -390px -130px } /* x坐标:-390 y坐标:-130 */ 90% { background-position: -520px -130px } /* x坐标:-520 y坐标:-130 */ /* 修改最后一帧,以便动画结束后盒子就应用最后一帧的样式 */ to { /* 下一个动画的宽高 */ width: 216px; height: 300px; /* 下一个动画的雪碧图 */ background-image: url(../img/animate.png); }}/* 定义动画:动画名(animate) */@keyframes animate { from { background-position: 0 } to { background-position: -2600px }}
- 1. 项目结构 首先我们新建一个文件夹,代表我们此次的项目,这个文件夹只要符合操作系统的叫什么名字都可以。在这里我们为这个项目起名为animate:文件夹里面新建一个index.html文件:然后再新建一个文件夹叫img,这个文件夹用来存放项目图片:再新建一个文件夹叫做css,这个文件夹用来存放我们的样式文件:我们需要两张雪碧图,一张矩形的:和一张条形的:然后还需要一张背景图,主要是为了让页面更美观:将这三张图片放入img文件夹里。然后用编辑器打开index.html:用英文输入法输入一个叹号:!接着按下Tab键,就快速会生成一个 HTML5 的模板:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> </body></html>如果你生成的代码与上述代码不完全一致的话,请不要担心,因为每款编辑器生成的模板都不太一样,并不影响编码。但是如果你用英文输入法输入了叹号:!并且按了Tab键,可是页面并没有出现一些看起来像 HTML 结构的标签,那么很可能是你用的编辑器不适合编码,比如记事本。除了可以复制我上面的代码之外,还建议你下载一个 VSCode,这是目前前端界最流行的一款编辑器,经(mian)济(fei)实用。接下来我们来修改一下index.html:<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>动画实战</title> <link rel="stylesheet" href="css/css.css"></head><body> <div class="animate"></div></body></html>主要是改变了一下 title,然后引入了一个 css 文件,接着加入了一个 class为 animate 的 div。虽然引入了 css 文件,但实际上我们还没创建这个 css 文件呢,那么接下来咱们就在 css 文件夹里创建一个css.css文件:/* 清除浏览器默认边距 */* { padding: 0; margin: 0; }body { /* 这段代码是为了居中显示,不是重点,看不懂的话可以无视 */ height: 100vh; display: flex; align-items: center; justify-content: center; /* 添加背景图 */ background: url(../img/bg.jpg) center / cover;}.animate { width: 130px; height: 130px;}这时候刷新页面,如果你的浏览器窗口出现了背景图,那么恭喜你,我们的项目已经搭建成功!
- 2. 字符串字面量类型 字符串字面量类型允许你指定字符串必须的固定值。let protagonist: 'Sherlock'protagonist = 'Sherlock'protagonist = 'Watson' // Error, Type '"Watson"' is not assignable to type '"Sherlock"'代码解释: 变量 protagonist 被声明为 'Sherlock' 字面量类型,就只能赋值为 'Sherlock'。type Easing = 'ease-in' | 'ease-out' | 'ease-in-out'class UIElement { animate(dx: number, dy: number, easing: Easing) { if (easing === 'ease-in') {} else if (easing === 'ease-out') {} else if (easing === 'ease-in-out') {} else { // Error, 不应该传递 null 或 undefined } }}let button = new UIElement()button.animate(0, 0, 'ease-in')button.animate(0, 0, 'uneasy') // Error, 'uneasy' 不被允许代码解释:第 1 行,通过类型别名,声明了类型 Easing 为 'ease-in' | 'ease-out' | 'ease-in-out'这样三个字符串字面量构成的联合类型。第 4 行,你只能从三种允许的字符中选择其一来做为参数传递,传入其它值则会产生错误。字符串字面量类型还可以用于区分函数重载:function createElement(tagName: 'img'): HTMLImageElementfunction createElement(tagName: 'input'): HTMLInputElementfunction createElement(tagName: string): Element {}代码解释:如果参数 tagName 为 'img' 类型,返回值类型为 HTMLImageElement; 如果参数 tagName 为 'input' 类型,返回值类型为 HTMLInputElement。
animate相关搜索
-
ajax
android
a href
abap
abap开发
abort
absolutelayout
abstractmethoderror
abstracttablemodel
accept
access
access教程
accordion
accumulate
acess
action
actionform
actionlistener
activity
addeventlistener