js动画杂记
在画布上做动画
方法有
setIntervel(function(){},time);
setTimeout(function(){},time);
新方法
window.requestAnimationFrame(function(){});
动画一般是执行同一个绘画函数多遍(其中每一遍执行会有一些参数不同 代表透明度的,位置的,大小的等等的参数)
这意味着要实现函数的重复执行
setInterval本身就是每隔time执行一次function,可以直接用了
而setTimeout是过了time后执行一次function,也就是只执行一次
而window.requestAnimation是现在的新方法,我目前不是很了解它的意思,但是同样只执行一次
之前对于如何实现重复绘画,我百思不得其解,
现在想来真是太傻了...
setTimeout 和 window.requestAnimation是一样的,
直接调用函数,然后在函数末尾调用setTimeout 或window.requestAnimation
那么问题又来了,重复动画如何取消呢?
使用方法前先取个名字
var ID = setInterval();
要结束就用下面这个
clearInerval(ID);
setTimeout 和 window.requestAnimation 也同理,它们的取消方法如下:
clearTimeout(ID);
cancelAnimationFrame(ID);
reverse()和save()很重要
使用方法就是所有绘画开始之前先save()
每绘画完一帧就执行一次
ctx.reverse();save()
如果改变了画布参数,画下一个图形时就要进行一次ctx.reverse();save(),或者手动把参数改回来
js动画杂记的更多相关文章
- 【06-23】js动画学习笔记01
<html> <head> <style> * { margin:0; padding:0; } #div1{ width:200px; height:200px; ...
- css动画与js动画的区别
CSS动画 优点: (1)浏览器可以对动画进行优化. 1. 浏览器使用与 requestAnimationFrame 类似的机制,requestAnimationFrame比起setTimeout ...
- CSS VS JS动画,哪个更快[译]
英文原文:https://davidwalsh.name/css-js-animation 原作者Julian Shapiro是Velocity.js的作者,Velocity.js是一个高效易用的js ...
- JS动画理论
动画(Animation) 动画意味着随着时间而变化,尤其指视觉上的变化,包括位置.形态等的变化.运动基本上表现为物体随时间,发生位置上的变化:形态基本表现为大小.颜色.透明度.形状等随时间的变化. ...
- css与 js动画 优缺点比较
我们经常面临一个抉择:到底使用JavaScript还是CSS动画,下面做一下对比 JS动画 缺点:(1)JavaScript在浏览器的主线程中运行,而主线程中还有其它需要运行的JavaScript脚本 ...
- [学习笔记]js动画实现方法,作用域,闭包
一,js动画基本都是依靠setInterval和setTimeout来实现 1,setInterval是间隔执行,过一段时间执行一次代码 setInterval(function(){},500);即 ...
- css3动画与js动画的一些理解
http://zencode.in/19.CSS-vs-JS%E5%8A%A8%E7%94%BB%EF%BC%9A%E8%B0%81%E6%9B%B4%E5%BF%AB%EF%BC%9F.html 首 ...
- js动画(四)
终于到了最后了,这里要告一段落了,整了个js运动框架,咳咳咳,好冷 啊啊啊啊啊啊,这天气.妈的,工资怎么也不发,啊,说好的 人与人之间的信任呢?哎,气诶,不到150字啊,又是这个梗..怎么办?说些什么 ...
- css动画特效与js动画特效(一)------2017-03-24
1.用css做动画效果: 放鼠标才会发生 利用hover <head> <style> #aa{ background-color: red; width: 100px; he ...
随机推荐
- EL表达式的语法与应用
EL(是Expression Language的缩写),使用EL对JSP输出进行优化,可以使得页面结构更加清晰,代码可读性高,也更加便于维护. EL表达式的语法: 语法:$(EL 表达式) $ 和 ...
- iOS导入c++语言的静态库之后编译不过,先要检查是否导入了libstdc++
iOS项目中引入c++库,编译链接时报如下错: "std::string::_Rep::_M_destroy(std::allocator<char> const&)&q ...
- nodejs post 数据到php $_POST["content"]接收不到的问题
今天写了一段代码,要用到ajax调用php的接口,因为是https的,所以ajax不能跨域,于是使用nodejs调用接口,但是传输数据后 $_POST["content"]接收不到 ...
- ThinkPHP5.0中Request请求对象的使用和常用的操作
request的使用 第一种方法 在控制器头部添加request引用 然后在方法里调用 ‘instance’类 然后在调用方法: public function index($name='name') ...
- ES6问题记录--Promise
在读[阮一峰]的 ES6 入门文档的时候,有一段代码是这样的. 文章中,还有一段是这样写的 所以,Promise.resolve(3).finally(()=>{}),解析出来的resolve ...
- 【KMP】洛谷P2375 [NOI2014]动物园 题解
一开始的方向应该对了,但是没有想到合理的优化还是没写出来…… 题目描述 近日,园长发现动物园中好吃懒做的动物越来越多了.例如企鹅,只会卖萌向游客要吃的.为了整治动物园的不良风气,让动物们凭自己 ...
- webApi的控制台服务
1.新建console项目,引用 下面包 2.新建Controller public class UserController : ApiController { public IEnumerable ...
- Oracle 常用函数大全
Oracle 11g 常用函数(Functions)详解 目录 ABS. 3 ACOS. 3 ADD_MONTHS. 4 ASCII 4 ASCIISTR. 5 ASIN.. 5 ATAN.. 5 A ...
- 基于WebImage的图片上传工具类
支持缩略图和水印. using System; using System.IO; using System.Linq; using System.Web; using System.Web.Helpe ...
- 学习javscript函数笔记(二)
定义: 函数包含一组语句,他们是JavaScript的基础模块单元,用于代码复用.信息隐藏和组合调用.函数用于指定对象的行为. 1.函数对象 JavaScript中的函数就是对象,函数对象连接到Fun ...