我们可以先看代码
图片显示代码的结构
<!DOCTYPE HTML> <html> <head> <title>timeline脚本</title> <script type="text/javascript" src="sea.js"></script> <script type="text/javascript"> seajs.use("main",function(main){ main.start(); }); </script> </head> <body> <canvas id="myview">您的浏览器不支持,请更换现代浏览器</canvas> </body> </html>
这里使用sea.js调用程序的入口,不是重点
define("main",function(require, exports, module){ var timeline = require("timeline"); exports.start = function(){ timeline.init(); //this.show(); this.hide(); }; exports.anims = []; exports.show = function( start ){ timeline.createTask({ start: start, duration: 1000, data: [ 1e-5, 1, "show" ], object: this, onTimeUpdate: this.onZooming, onTimeStart: this.onZoomStart, onTimeEnd: this.onZoomEnd, recycle: this.anims }); }; exports.hide = function( start ){ timeline.createTask({ start: start, duration: 500, data: [ 1, 1e-5, "hide" ], object: this, onTimeUpdate: this.onZooming, onTimeStart: this.onZoomStart, onTimeEnd: this.onZoomEnd, recycle: this.anims }); }; // 显示/隐藏 相关 exports.onZoomStart = function(){ console.info("开始缩放"); }; exports.onZooming = function(){ console.info("正在缩放"); }; exports.onZoomEnd = function(){ console.info("结束缩放"); }; });
这里面只是做了一个方法的调用
define("timeline",function(require, exports, module){ //初始化,使用timeline就必须进行初始化操作 exports.init = function(){ var me = this; me.startTime = now(); me.count = 0; var time = 1; //这里每隔1毫秒进行一次更新操作 setInterval(function(){ me.count++; //这里的更新方法是关键,就好比是汽车的发动机 update(now()); }, time); }; exports.createTask = function(conf){ /* e.g. createTask({ start: 500, duration: 2000, data: [a, b, c,..], object: module, onTimeUpdate: fn(time, a, b, c,..), onTimeStart: fn(a, b, c,..), onTimeEnd: fn(a, b, c,..), recycle: [] }); */ var task = createTask(conf); addingTasks.unshift(task); adding = 1; if(conf.recycle){ this.taskList(conf.recycle, task); } return task; }; //当前模块运行的任务,以及停止并清除所有正运行的任务 exports.taskList = function(queue, task){ if(!queue.clear){ queue.clear = function(){ for(var task, i = this.length - 1; i >= 0; i--){ task = this[i]; task.stop(); this.splice(i, 1); return this; } } } if(task){ queue.unshift(task); } return queue; }; exports.getFPS = function(){ var t = now(); var fps = this.count / ( t - this.startTime ) * 1e3; if(this.count > 1e3){ this.count = 0; this.startTime = t; } return fps; }; var tasks = []; var addingTasks = []; var adding = 0; var now = function(){ return new Date().getTime(); }; var createTask = function(conf){ var object = conf.object || {}; conf.start = conf.start || 0; return { start: conf.start + now(), duration: conf.duration == -1 ? 864000000 : conf.duration, data: conf.data ? [0].concat(conf.data) : [0], started: 0, object: object, onTimeStart: conf.onTimeStart || object.onTimeStart || function(){ return null; }, onTimeUpdate: conf.onTimeUpdate || object.onTimeUpdate || function(){ return null; }, onTimeEnd: conf.onTimeEnd || object.onTimeEnd || function(){ return null; }, stop: function(){ this.stopped = 1; } }; }; //进行任务的更新操作, var updateTask = function(task, time){ var data = task.data; data[0] = time; //运行更新方法,更新方法的作用域是task.object,参数是data task.onTimeUpdate.apply(task.object, data); }; var checkStartTask = function(task){ if(!task.started){ task.started = 1; //运行开始方法,开始方法的作用域是task.object,参数是task.data数组删除第一个元素,因为第一个元素是动态添加的 task.onTimeStart.apply(task.object, task.data.slice(1)); updateTask(task, 0); } }; var update = function(time){ var i = tasks.length, t, task, start, duration, data; while(i--){ task = tasks[i]; start = task.start; duration = task.duration; if(time >= start){ if(task.stopped){ tasks.splice(i, 1); continue; } checkStartTask(task); if((t = time - start ) < duration){ updateTask(task, t); }else{ updateTask(task, duration); task.onTimeEnd.apply(task.object, task.data.slice(1)); tasks.splice(i, 1); } } } //任务的添加 if(adding){ tasks.unshift.apply(tasks, addingTasks); addingTasks.length = adding = 0; } }; });
相关推荐
Android-Timeline-View Android timeline to display horizontal sliding cards in recycler view, group by Day, Month or Year. Demo Video Apps using the library: Gourmet (http://thegourmet.app) Play...
利用vue-element的步骤组件el-steps实现横向时间轴,实现点击时间轴的时间节点动态的加载订单数据列表进行展示
react-calendar-timeline的中文文档翻译 来自google翻译,主要是为了方便自己了解api,大神勿喷 版本0.27.0 React日历时间表 一个现代化的响应式React时间轴组件。 在查看! 内容 入门 # via yarn yarn add react-...
react-visjs-timeline, vis.js 时间轴模块的响应组件 响应 Vis.js-时间轴Vis.js 时间轴模块的响应组件。Vis.js 时间轴文档安装npm install --save visnpm install --save react-visjs-timeline
Android-react-native-timeline-listview.zip,React本机应用程序的时间线组件,安卓系统是谷歌在2008年设计和制造的。操作系统主要写在爪哇,C和C 的核心组件。它是在linux内核之上构建的,具有安全性优势。
React日历时间表 一个现代化的响应式React时间轴组件...// make sure you include the timeline stylesheet or the timeline will not be styled import 'react-calendar-timeline/lib/Timeline.css' import moment fro
$ npm install vue-horizontal-timeline --save 纱线(推荐) $ yarn add vue-horizontal-timeline 快速开始 Vue.js 您可以导入main.js文件 import Vue from "vue" ; import VueHorizontalTimeline from "vue-...
前端项目-d3kit-timeline,基于d3kit和labella.js的时间轴组件
Vue-light-Timeline vue2的轻量级时间表组件安装yarn add vue-light-timeline 如果您更喜欢npm: npm i vue-light-timeline用法import Vue from 'vue' ;import LightTimeline from 'vue-light-timeline' ;Vue . use ...
Timeline-View Android Timeline View Library (Using RecyclerView) is simple implementation used to display view like Tracking of shipment/order, steppers etc. Specs Badges/Featured In Sample ...
npm $ npm install vue-awesome-timeline -D CDN CDN: https : //unpkg.com/vue-awesome-timeline/vue-awesome-timeline.js < script src =" ...
React-timeline-gantt是一个用于显示和管理日历甘特图的组件。 它使用虚拟渲染来有效地做出React。 该组件具有以下功能: 可以处理十万条记录。 无限日历滚动 三种缩放级别:日,周,月 完全可定制。 支持所有...
安装npm install --save visnpm install --save react-visjs-timeline入门注意:传递给组件的数据应为Immutable 。 如果您不熟悉不可变数据,那么和是一个不错的起点。 import Timeline from 'react-visjs-timeline'...
现在不再使用该角度包装器组件,因为它不需要与gstc一起使用。 要在角度环境中使用gantt-schedule-timeline-calendar,请看。
该React包装器组件现在已被放弃,因为它不需要与gstc一起使用。 要在react环境中使用gantt-schedule-timeline-calendar,请看。
gantt-schedule-timeline-calendar是可以在不同场景中使用的多合一组件。 关键字:[甘特图,javascript甘特图,打字稿甘特图,项目经理,js甘特图,js计划程序,js时间轴,javascript时间线,javascript计划,js...
GNULinux-Distribution-Timeline
The video-editing-timeline repo contains three packages: video-editing-timeline (native version), video-editing-timeline-react (react version), and video-editing-timelinevue (vue version). You can ...
react-vertical-timeline-component-React.js的垂直时间线 完整的文档和演示 安装 $ npm i react-vertical-timeline-component 用法 --- import { VerticalTimeline, VerticalTimelineElement } from 'react-...
TimeLineView Android Timeline View Library demonstrate the the power of ConstraintnLayout and RecyclerView. Showcase Quick Setup 1. Include library Using Gradle TimelineView is currently...