没有合适的资源?快使用搜索试试~ 我知道了~
第34章 项目1-博客前端:封装库--动画初探[中]1
需积分: 0 0 下载量 191 浏览量
2022-08-03
19:06:58
上传
评论
收藏 167KB PDF 举报
温馨提示
试读
3页
一.问题所在最简单的动画已经可以运动,但还包含着一些问题,二.设置代码问题 1:如果目标长度并不等于移动到目标的长度,比如按照每 50 毫秒 7 像素,那么可能
资源推荐
资源详情
资源评论
第 34
34
34
34 章 项目 1-
1-
1-
1- 博客前端:封装库 --
--
--
-- 动画初探 [
[
[
[ 中 ]
]
]
]
学习要点:
1. 问题所在
2. 设置代码
主讲教师:李炎恢
官方博客: http://blog.yc60.com
http://blog.yc60.com
http://blog.yc60.com
http://blog.yc60.com
合作 网站: http://
http://
http://
http:// www.ibeifeng.com
www.ibeifeng.com
www.ibeifeng.com
www.ibeifeng.com
本节课,我们要讲一下 JavaScript 在动画中的实现,让大家了解动画是怎样形成的。
一. 问题所在
最简单的动画已经可以运动,但还包含着一些问题,
二. 设置代码
问题 1 :如果目标长度并不等于移动到目标的长度,比如按照每 50 毫秒 7 像素,那么
可能就达到不一个整数可能会多出一个或几个像素 , 所以我们判断的时候 , 用大于等于比较
妥当,否则会一直运动下去。
if (getStyle(element, attr) >= target) {}
问题 2 : 怎么才能让移动到目标值到达指定的目标值停止 , 而不是多出一个或几个像素 。
if (getStyle(element, attr) >= target) {
element.style[attr] = target + 'px';
clearInterval(timer);
} else {
element.style[attr] = getStyle(element, attr) + step + 'px';
}
问题 3 :虽然可以剪掉多余的像素,但剪掉的时候,会后退一下,很突兀。
element.style[attr] = getStyle(element, attr) + step + 'px';
if (getStyle(element, attr) >= target) {
element.style[attr] = target + 'px';
clearInterval(timer);
}
问题 4 :如果通过事件,比如点击等可能会导致创建多个定时器,速度就会翻倍变快 。
clearInterval(window.timer);
timer = setInterval(function () {
element.style[attr] = getStyle(element, attr) + step + 'px';
if (getStyle(element, attr) >= target) {
element.style[attr] = target + 'px';
资源评论
无能为力就要努力
- 粉丝: 16
- 资源: 332
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功