[JS思路]运动框架思路
匀速运动的思路一:
1、先清除动画,再加载动画
2、方向dir有正值和负值,可以通过
目标值 > 当前值 往右移动,即正数
目标值 < 当前值 往右移动,即负数
来进行判断:dir = 目标值>当前值 ? dir : -dir;
speed = 当前值+方向dir
3、如果speed>=目标点,可以将speed=目标点,并清除动画。
speed>=目标点 && dir>0 || speed<=目标点 && dir<0 来判断
4、如果需要做opacity的动画,需要设定一个变量进行操作(方向同上)
opacity:1;
filter:alpha(opacity:100); IE9以下不支持
匀速运动的思路二:
1、速度有正有负,可以通过
目标值>当前值,向右移动,为正数
目标值<当前值,向左移动,为负数
来进行判断:
var speed = 7;
speed =目标值>当前值 ? speed : -speed;
2、判断是否到达目标点
如果到达目标点(在附近),停止动画并把当前值赋值目标点 =>判断取绝对值,即Math.abs(当前值-目标值)<7
没到目标点:当前值+ speed +'px'
缓冲运动:
1、当前值离目标值越近,速度越慢
当前值离目标值越远,速度越快
speed = (目标值-当前值)/10
2、与目标点相差一点,需要进行判断
目标值>当前值,需要对速度向上取整,即speed = Math.ceil(speed)
目标值<当前值,需要对速度向下取整,即speed = Math.floor(speed)
3、如果当前值=目标值,清除动画
4、潜在问题,BOX在屏幕的中间的情况,会产生来回抖动,原因是:目标值/2,取个整数就可以解决问题parseInt。
[JS思路]运动框架思路的更多相关文章
- JS完美运动框架
这套框架实现了多物体,任意值,链式运动,多值运动,基本满足常见的需求. /* 功能:完美运动框架,可以实现多物体,任意值,链式运动,多值运动 版本:V1.0 兼容性:Chrome,FF,IE8+ (o ...
- JS完美运动框架【利用了Json】
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 纯js写“运动”框架
所谓“运动”不一定真的是运动,在连续的一段时间内改变某一样式都可以成为“运动”. 先写几个会用到的函数 //获取某一元素的指定样式 function getstyle (element, target ...
- js中运动框架的封装
//获取非行间样式的封装 function setStyle(obj,name){ // 考虑兼容性问题 if(obj.currentStyle){//不兼容火狐和谷歌 return obj.curr ...
- JS封装运动框架(另一种写法)
function animate(obj, json, interval, sp, fn) { clearInterval(obj.timer); //var k = 0; //var j = 0; ...
- js 完美运动框架
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js 渐变运动框架
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS封装动画框架,网易轮播图,旋转轮播图
JS封装动画框架,网易轮播图,旋转轮播图 1. JS封装运动框架 // 多个属性运动框架 添加回调函数 function animate(obj,json,fn) { clearInterval(ob ...
- 面向UI编程框架:ui.js框架思路详细设计
由于上一次的灵光一闪,萌生了对面向UI编程的思想实现.经过一段时间的考虑和设计,现在将思想和具体细节记录下来: 具体思路描述: 在UI.config文件中,配置所有参数,比如页面模板.所有组件.组件控 ...
随机推荐
- openstack私有云布署实践【8.2 身份认证keystone的API创建(办公网环境)】
其中一台controller上面加入环境变量,我选controller1,关注的是endpoint的名称不一样,其它创建的参数与生产环境一致 export OS_TOKEN=venicchina ex ...
- 苹果也要开发AR眼镜,正与蔡司联手打造
近日,知名博主Robert Scoble在Facebook上称,苹果正在与德国卡尔蔡司公司合作研发一副增强现实智能眼镜,而且最快将在今年发布.据Scoble称,通过和蔡司的雇员在上周的CES展会上进行 ...
- 消息推送之androidpn部署
androidpn客户端的部署在eclipse上,要记住两点: 1.直接导入的项目是上个世纪的lib这个文件夹,要改为libs.否则会报错找不到云云类. 2.如果在虚拟器上测试,要将res/raw/a ...
- oracle数据库一些用户管理语句
查询所有数据库用户 select * from dba_users 查看数据库名称 select name from v$database 查看权限 select * from user_sys_pr ...
- dev gridcontrol 绑定int型及日期型的列默认当值为0时显示空白及格式化日期显示方式
xmlns:sys="clr-namespace:System;assembly=mscorlib" 如只显示日期的时间部分 <dxg:GridColumn Header=& ...
- 通过file文件选择图片预览功能
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- usaco 2.2.4 生日派对灯(最近写题碰到的,虽然知道现在写这个有点晚了)
经过分析,他看似很多的开灯的方法其实合并起来就只有八个. 首先,一个开关在执行的时候只能按一次(因为你就算按了两次就相当于一次也没有按). 当一个都不按的时候 当然就只有一种:不按. 当按一下的时候 ...
- PHP检测文件能否下载
用php代码检测一个文件是否可以下载,网上没有找到合适的代码,自己实现了一个还挺好用的,分享给有需要的朋友. 基本原理:使用http的HEAD方法,检测报文的头里httpcode是否为200. pub ...
- 【IE6的疯狂之九】li在IE中底部空行的BUG
曾经写过[IE6的疯狂之六]li在IE中底部3像素的BUG(增加浮动解决问题),原文地址:http://www.css88.com/archives/421: IE6 BUG大全: http://ww ...
- Python Data Visualization Cookbook 2.9.2
import numpy as np import matplotlib.pyplot as plt def is_outlier(points, threshold=3.5): if len(poi ...