javascript帧动画(实例讲解)


Posted in Javascript onSeptember 02, 2017

前面的话

帧动画就是在“连续的关键帧”中分解动画动作,也就是在时间轴的每帧上逐帧绘制不同的内容,使其连续播放而成的动画。由于是一帧一帧的画,所以帧动画具有非常大的灵活性,几乎可以表现任何想表现的内容。本文将详细介绍javascript帧动画

概述

【分类】

常见的帧动画的方式有三种,包括gif、CSS3 animation和javascript

git和CSS3 animation不能灵活地控制动画的暂停和播放、不能对帧动画做更加灵活地扩展。另外,gif图不能捕捉动画完成的事件。所以,一般地,使用javascript来实现帧动画

【原理】

js实现帧动画有两种实现方式

1、如果有多张帧动画图片,可以用一个image标签去承载图片,定时改变image的src属性(不推荐)

2、把所有的动画关键帧都绘制在一张图片里,把图片作为元素的background-image,定时改变元素的background-position属性(推荐)

因为第一种方式需要使用多个HTTP请求,所以一般地推荐使用第二种方式

【实例】

下面是使用帧动画制作的一个实例

<div id="rabbit" ></div> 
<button id="btn">暂停运动</button> 
<script>
var url = 'rabbit-big.png';
var positions = ['0,-854','-174 -852','-349 -852','-524 -852','-698 -852','-873 -848'];
var ele = document.getElementById('rabbit');
var oTimer = null;
btn.onclick = function(){
 if(btn.innerHTML == '开始运动'){
  frameAnimation(ele,positions,url);
  btn.innerHTML = '暂停运动';
 }else{
  clearTimeout(oTimer);
  btn.innerHTML = '开始运动';
 } 
}
frameAnimation(ele,positions,url);
function frameAnimation(ele,positions,url){
 ele.style.backgroundImage = 'url(' + url + ')';
 ele.style.backgroundRepeat = 'no-repeat'; 
 var index = 0;
 function run(){
  var pos = positions[index].split(' ');
  ele.style.backgroundPosition = pos[0] + 'px ' + pos[1] + 'px';
  index++;
  if(index >= positions.length){
   index = 0;
  }
  oTimer = setTimeout(run,80);
 }
 run();
} 
</script>

通用帧动画

下面来设计一个通用的帧动画库

【需求分析】

1、支持图片预加载

2、支持两种动画播放方式,及自定义每帧动画

3、支持单组动画控制循环次数(可支持无限次)

4、支持一组动画完成,进行下一组动画

5、支持每个动画完成后有等待时间

6、支持动画暂停和继续播放

7、支持动画完成后执行回调函数

【编程接口】

1、loadImage(imglist)//预加载图片

2、changePosition(ele,positions,imageUrl)//通过改变元素的background-position实现动画

3、changeSrc(ele,imglist)//通过改变image元素的src

4、enterFrame(callback)//每一帧动画执行的函数,相当于用户可以自定义每一帧动画的callback

5、repeat(times)//动画重复执行的次数,times为空时表示无限次

6、repeatForever()//无限重复上一次动画,相当于repeat()

7、wait(time)//每个动画执行完成后等待的时间

8、then(callback)//动画执行完成后的回调函数

9、start(interval)//动画开始执行,interval表示动画执行的间隔

10、pause()//动画暂停

11、restart()//动画从上一交暂停处重新执行

12、dispose()//释放资源

【调用方式】

支持链式调用,用动词的方式描述接口

【代码设计】

1、把图片预加载 -> 动画执行 -> 动画结束等一系列操作看成一条任务链。任务链包括同步执行和异步定时执行两种任务

2、记录当前任务链的索引

3、每个任务执行完毕后,通过调用next方法,执行下一个任务,同时更新任务链索引值

javascript帧动画(实例讲解)

【接口定义】

'use strict';
/* 帧动画库类
 * @constructor
 */
function FrameAnimation(){}

/* 添加一个同步任务,去预加载图片
 * @param imglist 图片数组
 */
FrameAnimation.prototype.loadImage = function(imglist){}

/* 添加一个异步定时任务,通过定时改变图片背景位置,实现帧动画
 * @param ele dom对象
 * @param positions 背景位置数组
 * @param imageUrl 图片URL地址
 */
FrameAnimation.prototype.changePosition = function(ele,positions,imageUrl){}

/* 添加一个异步定时任务,通过定时改变image标签的src属性,实现帧动画
 * @param ele dom对象
 * @param imglist 图片数组
 */
FrameAnimation.prototype.changeSrc = function(ele,imglist){}

/* 添加一个异步定时任务,自定义动画每帧执行的任务函数
 * @param tastFn 自定义每帧执行的任务函数
 */
FrameAnimation.prototype.enterFrame = function(taskFn){}

/* 添加一个同步任务,在上一个任务完成后执行回调函数
 * @param callback 回调函数
 */
FrameAnimation.prototype.then = function(callback){}

/* 开始执行任务,异步定时任务执行的间隔
 * @param interval
 */
FrameAnimation.prototype.start = function(interval){}

/* 添加一个同步任务,回退到上一个任务,实现重复上一个任务的效果,可以定义重复的次数
 * @param times 重复次数
 */
FrameAnimation.prototype.repeat = function(times){}

/* 添加一个同步任务,相当于repeat(),无限循环上一次任务
 * 
 */
FrameAnimation.prototype.repeatForever = function(){}

/* 设置当前任务执行结束后到下一个任务开始前的等待时间
 * @param time 等待时长
 */
FrameAnimation.prototype.wait = function(time){}

/* 暂停当前异步定时任务
 * 
 */
FrameAnimation.prototype.pause = function(){}

/* 重新执行上一次暂停的异步定时任务
 * 
 */
FrameAnimation.prototype.restart = function(){}

/* 释放资源
 * 
 */
FrameAnimation.prototype.dispose = function(){}

图片预加载

图片预加载是一个相对独立的功能,可以将其封装为一个模块imageloader.js

'use strict';
/**
 * 预加载图片函数
 * @param  images  加载图片的数组或者对象
 * @param  callback 全部图片加载完毕后调用的回调函数
 * @param  timeout 加载超时的时长
 */
function loadImage(images,callback,timeout){
 //加载完成图片的计数器
 var count = 0;
 //全部图片加载成功的标志位
 var success = true;
 //超时timer的id
 var timeoutId = 0;
 //是否加载超时的标志位
 var isTimeout = false;
 //对图片数组(或对象)进行遍历
 for(var key in images){
  //过滤prototype上的属性
  if(!images.hasOwnProperty(key)){
   continue;
  }
  //获得每个图片元素
  //期望格式是object:{src:xxx}
  var item = images[key];
  if(typeof item === 'string'){
   item = images[key] = {
    src:item
   };
  }
  //如果格式不满足期望,则丢弃此条数据,进行下一次遍历
  if(!item || !item.src){
   continue;
  }
  //计数+1
  count++;
  //设置图片元素的id
  item.id = '__img__' + key + getId();
  //设置图片元素的img,它是一个Image对象
  item.img = window[item.id] = new Image();
  doLoad(item);
 }
 //遍历完成如果计数为0,则直接调用callback
 if(!count){
  callback(success);
 }else if(timeout){
  timeoutId = setTimeout(onTimeout,timeout);
 }

 /**
  * 真正进行图片加载的函数
  * @param  item 图片元素对象
  */
 function doLoad(item){
  item.status = 'loading';
  var img = item.img;
  //定义图片加载成功的回调函数
  img.onload = function(){
   success = success && true;
   item.status = 'loaded';
   done();
  }
  //定义图片加载失败的回调函数
  img.onerror = function(){
   success = false;
   item.status = 'error';
   done();
  }
  //发起一个http(s)请求
  img.src = item.src;
  /**
   * 每张图片加载完成的回调函数
   */
  function done(){
   img.onload = img.onerror = null;
   try{
    delete window[item.id];
   }catch(e){

   }
   //每张图片加载完成,计数器减1,当所有图片加载完成,且没有超时的情况,清除超时计时器,且执行回调函数
   if(!--count && !isTimeout){
    clearTimeout(timeoutId);
    callback(success);
   }
  }
 }
 /**
  * 超时函数
  */
 function onTimeout(){
  isTimeout = true;
  callback(false);
 }
}
var __id = 0;
function getId(){
 return ++__id;
}
module.exports = loadImage;

时间轴

在动画处理中,是通过迭代使用setTimeout()实现的,但是这个间隔时间并不准确。下面,来实现一个时间轴类timeline.js

'use strict';

var DEFAULT_INTERVAL = 1000/60;

//初始化状态
var STATE_INITIAL = 0;
//开始状态
var STATE_START = 1;
//停止状态
var STATE_STOP = 2;

var requestAnimationFrame = (function(){
 return window.requestAnimationFrame || window.webkitRequestAnimationFrame|| window.mozRequestAnimationFrame || window.oRequestAnimationFrame || function(callback){
     return window.setTimeout(callback,(callback.interval || DEFAULT_INTERVAL));
    }
})();

var cancelAnimationFrame = (function(){
 return window.cancelAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame || window.oCancelAnimationFrame  || function(id){
     return window.clearTimeout(id);
    } 
})();
/**
 * 时间轴类
 * @constructor
 */
function Timeline(){
 this.animationHandler = 0;
 this.state = STATE_INITIAL;
}
/**
 * 时间轴上每一次回调执行的函数
 * @param  time 从动画开始到当前执行的时间
 */
Timeline.prototype.onenterframe = function(time){

}
/**
 * 动画开始
 * @param interval 每一次回调的间隔时间
 */
Timeline.prototype.start = function(interval){
 if(this.state === STATE_START){
  return;
 }
 this.state = STATE_START;
 this.interval = interval || DEFAULT_INTERVAL;
 startTimeline(this,+new Date());
}

/**
 * 动画停止
 */
Timeline.prototype.stop = function(){
 if(this.state !== STATE_START){
  return;
 }
 this.state = STATE_STOP;
 //如果动画开始过,则记录动画从开始到现在所经历的时间
 if(this.startTime){
  this.dur = +new Date() - this.startTime;
 }
 cancelAnimationFrame(this.animationHandler);
}

/**
 * 重新开始动画
 */
Timeline.prototype.restart = function(){
 if(this.state === STATE_START){
  return;
 }
 if(!this.dur || !this.interval){
  return;
 }
 this.state = STATE_START;
 //无缝连接动画
 startTimeline(this,+new Date()-this.dur);
}

/**
 * 时间轴动画启动函数
 * @param  timeline 时间轴的实例
 * @param  startTime 动画开始时间戳     
 */
function startTimeline(timeline,startTime){
 //记录上一次回调的时间戳
 var lastTick = +new Date();
 timeline.startTime = startTime;
 nextTick.interval = timeline.interval;
 nextTick();
 /**
  * 每一帧执行的函数
  */
 function nextTick(){
  var now = +new Date();
  timeline.animationHandler = requestAnimationFrame(nextTick);
  //如果当前时间与上一次回调的时间戳大于设置的时间间隔,表示这一次可以执行回调函数
  if(now - lastTick >= timeline.interval){
   timeline.onenterframe(now - startTime);
   lastTick = now;
  }
 }
}
module.exports = Timeline;

动画类实现

下面是动画类animation.js实现的完整代码

'use strict';

var loadImage = require('./imageloader');
var Timeline = require('./timeline');
//初始化状态
var STATE_INITIAL = 0;
//开始状态
var STATE_START = 1;
//停止状态
var STATE_STOP = 2;
//同步任务
var TASK_SYNC = 0;
//异步任务
var TASK_ASYNC = 1;

/**
 * 简单的函数封装,执行callback
 * @param  callback 执行函数
 */
function next(callback){
 callback && callback();
}
/* 帧动画库类
 * @constructor
 */
function FrameAnimation(){
 this.taskQueue = [];
 this.index = 0;
 this.timeline = new Timeline();
 this.state = STATE_INITIAL;
}

/* 添加一个同步任务,去预加载图片
 * @param imglist 图片数组
 */
FrameAnimation.prototype.loadImage = function(imglist){
 var taskFn = function(next){
  loadImage(imglist.slice(),next);
 };
 var type = TASK_SYNC;
 return this._add(taskFn,type);
}

/* 添加一个异步定时任务,通过定时改变图片背景位置,实现帧动画
 * @param ele dom对象
 * @param positions 背景位置数组
 * @param imageUrl 图片URL地址
 */
FrameAnimation.prototype.changePosition = function(ele,positions,imageUrl){
 var len = positions.length;
 var taskFn;
 var type;
 if(len){
  var me = this;
  taskFn = function(next,time){
   if(imageUrl){
    ele.style.backgroundImage = 'url(' + imageUrl + ')';
   }
   //获得当前背景图片位置索引
   var index = Math.min(time/me.interval|0,len);
   var position = positions[index-1].split(' ');
   //改变dom对象的背景图片位置
   ele.style.backgroundPosition = position[0] + 'px ' + position[1] + 'px';
   if(index === len){
    next();
   }
  }
  type = TASK_ASYNC;
 }else{
  taskFn = next;
  type = TASK_SYNC;
 }
 return this._add(taskFn,type);
}

/* 添加一个异步定时任务,通过定时改变image标签的src属性,实现帧动画
 * @param ele dom对象
 * @param imglist 图片数组
 */
FrameAnimation.prototype.changeSrc = function(ele,imglist){
 var len = imglist.length;
 var taskFn;
 var type;
 if(len){
  var me = this;
  taskFn = function(next,time){
   //获得当前背景图片位置索引
   var index = Math.min(time/me.interval|0,len);
   //改变image对象的背景图片位置
   ele.src = imglist[index-1];
   if(index === len){
    next();
   }
  }
  type = TASK_ASYNC;
 }else{
  taskFn = next;
  type = TASK_SYNC;
 }
 return this._add(taskFn,type); 
}

/* 添加一个异步定时任务,自定义动画每帧执行的任务函数
 * @param tastFn 自定义每帧执行的任务函数
 */
FrameAnimation.prototype.enterFrame = function(taskFn){
 return this._add(taskFn,TASK_ASYNC);
}

/* 添加一个同步任务,在上一个任务完成后执行回调函数
 * @param callback 回调函数
 */
FrameAnimation.prototype.then = function(callback){
 var taskFn = function(next){
  callback(this);
  next();
 };
 var type = TASK_SYNC;
 return this._add(taskFn,type);
}

/* 开始执行任务,异步定义任务执行的间隔
 * @param interval
 */
FrameAnimation.prototype.start = function(interval){
 if(this.state === STATE_START){
  return this; 
 }
 //如果任务链中没有任务,则返回
 if(!this.taskQueue.length){
  return this;
 }
 this.state = STATE_START;
 this.interval = interval;
 this._runTask();
 return this;
  
}

/* 添加一个同步任务,回退到上一个任务,实现重复上一个任务的效果,可以定义重复的次数
 * @param times 重复次数
 */
FrameAnimation.prototype.repeat = function(times){
 var me = this;
 var taskFn = function(){
  if(typeof times === 'undefined'){
   //无限回退到上一个任务
   me.index--;
   me._runTask();
   return;
  }
  if(times){
   times--;
   //回退
   me.index--;
   me._runTask();
  }else{
   //达到重复次数,跳转到下一个任务
   var task = me.taskQueue[me.index];
   me._next(task);
  }
 }
 var type = TASK_SYNC;
 return this._add(taskFn,type);
}

/* 添加一个同步任务,相当于repeat(),无限循环上一次任务
 * 
 */
FrameAnimation.prototype.repeatForever = function(){
 return this.repeat();
}

/* 设置当前任务执行结束后到下一个任务开始前的等待时间
 * @param time 等待时长
 */
FrameAnimation.prototype.wait = function(time){
 if(this.taskQueue && this.taskQueue.length > 0){
  this.taskQueue[this.taskQueue.length - 1].wait = time;
 }
 return this;
}

/* 暂停当前异步定时任务
 * 
 */
FrameAnimation.prototype.pause = function(){
 if(this.state === STATE_START){
  this.state = STATE_STOP;
  this.timeline.stop();
  return this;
 }
 return this;
}

/* 重新执行上一次暂停的异步定时任务
 * 
 */
FrameAnimation.prototype.restart = function(){
 if(this.state === STATE_STOP){
  this.state = STATE_START;
  this.timeline.restart();
  return this;
 }
 return this; 
}

/* 释放资源
 * 
 */
FrameAnimation.prototype.dispose = function(){
 if(this.state !== STATE_INITIAL){
  this.state = STATE_INITIAL;
  this.taskQueue = null;
  this.timeline.stop();
  this.timeline = null;
  return this;
 }
 return this;  
}

/**
 * 添加一个任务到任务队列
 * @param taskFn 任务方法
 * @param type  任务类型
 * @private
 */
FrameAnimation.prototype._add = function(taskFn,type){
 this.taskQueue.push({
  taskFn:taskFn,
  type:type
 });
 return this;
}

/**
 * 执行任务
 * @private
 */
FrameAnimation.prototype._runTask = function(){
 if(!this.taskQueue || this.state !== STATE_START){
  return;
 }
 //任务执行完毕
 if(this.index === this.taskQueue.length){
  this.dispose();
  return;
 }
 //获得任务链上的当前任务
 var task = this.taskQueue[this.index];
 if(task.type === TASK_SYNC){
  this._syncTask(task);
 }else{
  this._asyncTask(task);
 }
}

/**
 * 同步任务
 * @param task 执行的任务对象
 * @private
 */
FrameAnimation.prototype._syncTask = function(task){
 var me = this;
 var next = function(){
  //切换到下一个任务
  me._next(task);
 }
 var taskFn = task.taskFn;
 taskFn(next);
}

/**
 * 异步任务
 * @param task 执行的任务对象
 * @private
 */
FrameAnimation.prototype._asyncTask = function(task){
 var me = this;
 //定义每一帧执行的回调函数
 var enterframe = function(time){
  var taskFn = task.taskFn;
  var next = function(){
   //停止当前任务
   me.timeline.stop();
   //执行下一个任务
   me._next(task);
  };
  taskFn(next,time);
 }
 this.timeline.onenterframe = enterframe;
 this.timeline.start(this.interval);
}

/**
 * 切换到下一个任务,支持如果当前任务需要等待,则延时执行
 * @private
 */
FrameAnimation.prototype._next = function(task){
 this.index++;
 var me = this;
 task.wait ? setTimeout(function(){
  me._runTask();
 },task.wait) : this._runTask();
}

module.exports = function(){
return new FrameAnimation();
}

webpack配置

由于animation帧动画库的制作中应用了AMD模块规范,但由于浏览器层面不支持,需要使用webpack进行模块化管理,将animation.js、imageloader.js和timeline.js打包为一个文件

module.exports = {
 entry:{
  animation:"./src/animation.js"
 },
 output:{
  path:__dirname + "/build",
  filename:"[name].js",
  library:"animation",
  libraryTarget:"umd",
 }
}

下面是一个代码实例,通过创建的帧动画库实现博客开始的动画效果

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
<div id="rabbit" ></div> 
<script src="../build/animation.js"></script> 
<script>var imgUrl = 'rabbit-big.png';
var positions = ['0,-854','-174 -852','-349 -852','-524 -852','-698 -852','-873 -848'];
var ele = document.getElementById('rabbit');
var animation = window.animation;
var repeatAnimation = animation().loadImage([imgUrl]).changePosition(ele,positions,imgUrl).repeatForever();
repeatAnimation.start(80); 
</script>
</body>
</html>

更多实例

除了可以实现兔子推车的效果,还可以使用帧动画实现兔子胜利和兔子失败的效果

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{position:absolute;width:102px;height:80px;background-repeat:no-repeat;} 
</style>
</head>
<body>
<div id="rabbit1" ></div>
<div id="rabbit2" ></div>
<div id="rabbit3" ></div> 
<script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/animation.js"></script>
<script>
var baseUrl = 'http://7xpdkf.com1.z0.glb.clouddn.com/runjs/img/';
var images = ['rabbit-big.png','rabbit-lose.png','rabbit-win.png'];
for(var i = 0; i < images.length; i++){
 images[i] = baseUrl + images[i];
}
var rightRunningMap = ["0 -854", "-174 -852", "-349 -852", "-524 -852", "-698 -851", "-873 -848"];
var leftRunningMap = ["0 -373", "-175 -376", "-350 -377", "-524 -377", "-699 -377", "-873 -379"];
var rabbitWinMap = ["0 0", "-198 0", "-401 0", "-609 0", "-816 0", "0 -96", "-208 -97", "-415 -97", "-623 -97", "-831 -97", "0 -203", "-207 -203", "-415 -203", "-623 -203", "-831 -203", "0 -307", "-206 -307", "-414 -307", "-623 -307"];
var rabbitLoseMap = ["0 0", "-163 0", "-327 0", "-491 0", "-655 0", "-819 0", "0 -135", "-166 -135", "-333 -135", "-500 -135", "-668 -135", "-835 -135", "0 -262"];

var animation = window.animation;
function repeat(){
 var repeatAnimation = animation().loadImage(images).changePosition(rabbit1, rightRunningMap, images[0]).repeatForever();
 repeatAnimation.start(80); 
}
function win() {
 var winAnimation = animation().loadImage(images).changePosition(rabbit2, rabbitWinMap, images[2]).repeatForever();
 winAnimation.start(200);
}
function lose() {
 var loseAnimation = animation().loadImage(images).changePosition(rabbit3, rabbitLoseMap, images[1]).repeatForever();
 loseAnimation.start(200);
}
repeat();
win();
lose();
</script>
</body>
</html>

以上这篇javascript帧动画(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
科讯商业版中用到的ajax空间与分页函数
Sep 02 Javascript
JS实现self的resend
Jul 22 Javascript
JavaScript的类型转换(字符转数字 数字转字符)
Aug 30 Javascript
淘宝搜索框效果实现分析
Mar 05 Javascript
基于jPlayer三分屏的制作方法
Dec 21 Javascript
微信小程序 五星评分的实现实例
Aug 04 Javascript
EasyUI在Panel上动态添加LinkButton按钮
Aug 11 Javascript
详谈DOM简介及节点、属性、查找节点的方法
Nov 16 Javascript
JavaScript实现多态和继承的封装操作示例
Aug 20 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
Jan 19 Javascript
JS面试题中深拷贝的实现讲解
May 07 Javascript
Node 使用express-http-proxy 做api网关的实现
Oct 15 Javascript
浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
Sep 02 #Javascript
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
Sep 02 #Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
Sep 02 #Javascript
使用vue-resource进行数据交互的实例
Sep 02 #Javascript
jquery tmpl模板(实例讲解)
Sep 02 #jQuery
自制简易打赏功能的实例
Sep 02 #Javascript
Vue使用vue-cli创建项目
Sep 01 #Javascript
You might like
ThinkPHP CURD方法之table方法详解
2014/06/18 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
使用隐藏的new来创建对象
2011/03/29 Javascript
5秒后跳转效果(setInterval/SetTimeOut)
2013/05/03 Javascript
JS实现Enter键跳转及控件获得焦点
2013/08/12 Javascript
用box固定长宽实现图片自动轮播js代码
2014/06/09 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
2015/06/05 Javascript
Bootstrap精简教程
2015/11/27 Javascript
学习JavaScript设计模式之装饰者模式
2016/01/19 Javascript
vue实现可增删查改的成绩单
2016/10/27 Javascript
浅谈nodejs中的类定义和继承的套路
2017/07/26 NodeJs
基于Vuejs的搜索匹配功能实现方法
2018/03/03 Javascript
vue实现微信二次分享以及自定义分享的示例
2019/03/20 Javascript
vue动画—通过钩子函数实现半场动画操作
2020/08/09 Javascript
[01:14]英雄,所敬略同——2018完美盛典宣传视频4K
2018/12/05 DOTA
使用Python脚本操作MongoDB的教程
2015/04/16 Python
详解在Python中处理异常的教程
2015/05/24 Python
pip matplotlib报错equired packages can not be built解决
2018/01/06 Python
python中将字典形式的数据循环插入Excel
2018/01/16 Python
Python实现二叉树前序、中序、后序及层次遍历示例代码
2019/05/18 Python
浅谈python多进程共享变量Value的使用tips
2019/07/16 Python
详解python 利用echarts画地图(热力图)(世界地图,省市地图,区县地图)
2019/08/06 Python
Numpy 中的矩阵求逆实例
2019/08/26 Python
django 模型字段设置默认值代码
2020/07/15 Python
微信端html5页面调用分享接口示例
2018/03/14 HTML / CSS
Shopee马来西亚:随拍即卖,最佳行动电商拍卖平台
2017/06/05 全球购物
阿联酋彩妆品牌:OUD MILANO
2019/10/06 全球购物
销售总监岗位职责
2014/01/04 职场文书
小区门卫岗位职责范本
2014/08/24 职场文书
节能环保家庭事迹材料
2014/08/27 职场文书
2014小学数学教研组工作总结
2014/12/06 职场文书
财务负责人岗位职责
2015/02/03 职场文书
英文慰问信范文
2015/03/24 职场文书
合理缓解职场压力,让你随时保持最佳状态!
2019/06/21 职场文书
pygame面向对象的飞行小鸟实现(Flappy bird)
2021/04/01 Python
HTML页面中使两个div并排显示的实现
2022/05/15 HTML / CSS