【免费】第34章项目1-博客前端：封装库--动画初探[下]1_css特效网站资源-CSDN文库

需积分: 0 47 浏览量 2022-08-03 19:48:25 上传评论收藏 137KB PDF 举报

资源详情

资源评论

资源推荐

第 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. 更好的解决多出几个像素或少出几个像素的方法。

if (step > 0 && Math.abs((getStyle(element, attr) - target)) < step) // 正值使用

if (step < 0 && (getStyle(element, attr) - target) < Math.abs(step)) // 负值使用

2. 使用 x 和 y 轴表示横纵方向，更加清晰。

var attr = obj['attr'] == 'x' ? 'left' : obj['attr'] == 'y' ? 'top' : 'left' //x,y 轴

3. 缓冲运动

var speed = obj['speed'] != undefined ? obj['speed'] : 6; // 缓冲值

var type = obj['type'] == 0 ? 'constant' : obj['type'] == 1 ? 'buffer' : 'buffer'; // 是否缓冲

if (type == 'buffer') {

var temp = (target - getStyle(element, attr)) / speed;

step = step > 0 ? Math.ceil(temp) : Math.floor(temp);

}

PS ：正值的使用 Math.ceil 取整，小数部分进一位。负值的时候使用 Math.floor ，小数部

分进一位。这样就不会导致结束运动的时候不流畅突兀的感觉。

4. 长高变换动画，只要加入 width 和 height 值即可。

var attr = obj['attr'] == 'x' ? 'left' : obj['attr'] == 'y' ? 'top' :

obj['attr'] == 'w' ? 'width' : obj['attr'] == 'h' ? 'height' : 'left';

5. 提供 alter 增量和 target 目标量两种方案

var alter = obj['alter'];

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论0

内容反馈

葡萄的眼泪

粉丝: 15
资源: 303

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip