1、首先双击打开HBuilderX工具，新建一个HTML5页面，并引入jquery文件，如下图所示。
2、在<body></body>标签元素内，插入一个label和button，如下图所示。
3、保存代码并打开浏览器，预览页面效果结果出现报错。
4、检查代码发现，按钮点击事件，调用animate，这里的样式属性需要使用驼峰结构。
5、再次保存代码并在浏览器查看打印结果，结果发现animated不是函数。
6、返回到HBuilderX工具，修改代码animate，这样就完成了。
以前用的多数是12，也就是每秒十二帧，现在都是每秒30帧 或者是25帧。
可以通过缩放帧跨度来管理动画速度，下面我们就来看看详细的设置教程。
首先我们打开我们的animate 软件在左上角点击文件。找到新建按钮 也可以使用快捷键ctrl +n 新建一个项目也可以直接点击，点击后会跳出d窗，我们可以在d窗中找到 帧速率 并且更改它，我们调整到适合自己的帧速率 创建文件就可以了。
但是创建文件后如何更改帧速率呢？我们首先到我们的创建页面右上角然后点属性。点击属性后我们找到属性子页面里的文档 并且点击。点击文档后我们会在 下面的文档设置中 看到FPS 25 这个就是我们要找的帧速率，点击并且修改该即可。
管理动画速度的技巧
缩放框架跨度:
您可以为动画更改每秒帧数（fps），而无需更改动画速度。更改fps时使用“ 缩放帧跨度”选项以保持时间不变。
基于时间间隔的动画:
将您的框架跨度转换为1s，2s，3s或任何所需的间隔。此功能适用于传统补间范围，补间形状范围，补间动画范围，关键帧范围或空白关键帧范围。
“ 修改”菜单中提供了“ 转换为逐帧动画”选项 。您还可以在键盘快捷方式对话框中指定所需的键以执行这些任务。
使用时间轴控件扩展或压缩动画:
您可以延长或缩短时间轴上所选范围的时间。选择帧跨度并在时间轴上向前或向后拖动所选跨度的右侧边缘。时间线内的帧会自动调整。
您可以通过拖动时间轴中的跨距来多次复制动画（x2，x3等）。在扩展框架后，您还可以将框架压缩到正常位置。
选择时间轴中的帧，单击，然后拖动选中的突出显示的右侧边缘。
在拖动时，您可以以x2，x3等多个视图查看动画 。您可以查看多个x2的扩展跨度。x2是所选范围的两倍。x3是跨度的原始大小的三倍。
jquery.easing.js--animate--easing--参数
animate() 方法执行 CSS 属性集的自定义动画。
该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。
只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。
注释：使用 "+=" 或 "-=" 来创建相对动画（relative animations）。
语法 1
$(selector).animate(styles,speed,easing,callback)
参数描述
styles
必需。规定产生动画效果的 CSS 样式和值。
可能的 CSS 样式值（提供实例）：
backgroundPosition
borderWidth
borderBottomWidth
borderLeftWidth
borderRightWidth
borderTopWidth
borderSpacing
margin
marginBottom
marginLeft
marginRight
marginTop
outlineWidth
padding
paddingBottom
paddingLeft
paddingRight
paddingTop
height
width
maxHeight
maxWidth
minHeight
minWidth
font
fontSize
bottom
left
right
top
letterSpacing
wordSpacing
lineHeight
textIndent
注释：CSS 样式使用 DOM 名称（比如 "fontSize"）来设置，而非 CSS 名称（比如 "font-size"）。
speed
可选。规定动画的速度。默认是 "normal"。
可能的值：
毫秒 （比如 1500）
"slow"
"normal"
"fast"
easing
可选。规定在不同的动画点中设置动画速度的 easing 函数。
内置的 easing 函数：
swing
linear
扩展插件中提供更多 easing 函数。
callback
可选。animate 函数执行完之后，要执行的函数。
如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。
语法 2
$(selector).animate(styles,options)
参数描述
styles必需。规定产生动画效果的 CSS 样式和值（同上）。
options
可选。规定动画的额外选项。
可能的值：
speed - 设置动画的速度
easing - 规定要使用的 easing 函数
callback - 规定动画完成之后要执行的函数
step - 规定动画的每一步完成之后要执行的函数
queue - 布尔值。指示是否在效果队列中放置动画。如果为 false，则动画将立即开始
specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射，以及它们的对应 easing 函数
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）