学习blus老师js(6)--js运动基础-白红宇

学习blus老师js(6)--js运动基础

阅读量：4315 次

发布时间：2019-06-06

本文共 615 字，大约阅读时间需要 2 分钟。

运动基础

一、匀速运动

运动框架

在开始运动时，关闭已有定时器

把运动和停止隔开(if/else)


       无标题文档

View Code

运动框架实例

例子1：“分享到”侧边栏

　　通过目标点，计算速度值


        无标题文档
            
         分享到

View Code

例子2：淡入淡出的图片

　　用变量存储透明度


        无标题文档

View Code

二、缓冲运动

逐渐变慢，最后停止

距离越远速度越大

速度由距离决定

速度=(目标值-当前值)/缩放系数


       无标题文档

例子：缓冲菜单

Bug：速度取整

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

跟随页面滚动的缓冲侧边栏

潜在问题：目标值不是整数时

解决方法是让它传进来的就是个整数就完了。

例子：对联悬浮框：


         无标题文档

View Code

三、匀速运动的停止条件

运动终止条件

匀速运动：距离足够近

缓冲运动：两点重合


        无标题文档

View Code

------------

转载于:https://www.cnblogs.com/tenWood/p/7679001.html

你可能感兴趣的文章

js自动补全实例

查看>>

VS无法启动调试：“生成下面的模块时,启用了优化或没有调试信息“

查看>>

npm 安装 sass=-=-=

查看>>

WINFORM中加入WPF控件并绑定数据源实现跨线程自动更新

关于select @@IDENTITY的初识

查看>>

ASP.NET MVC ajax提交防止CSRF攻击

Part 2 - Fundamentals（4-10）

（转））iOS App上架AppStore 会遇到的坑