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 ...
随机推荐
- SDUT OJ 顺序表应用3:元素位置互换之移位算法
顺序表应用3:元素位置互换之移位算法 Time Limit: 1000 ms Memory Limit: 570 KiB Submit Statistic Discuss Problem Descri ...
- upsource代码审查
upsource 从零搭建代码审查平台,需要的不仅是把代码审查的工具搭起来,还要结合公司情况制定一系列的代码审查规范.下面是对选择的upsource web端代码审查工具的安装及介绍.详细的请看这篇文 ...
- 深入解析Close()和Dispose()的区别
很多人都认为Close()方法内部会调用Dispose()方法,所以并没有本质的区别!实际上这个看法不是很准确,对有 些类来说,的确Close()和Dispose()没有本质区别,但是对有些类来说并非 ...
- Wormholes 虫洞 BZOJ 1715 spfa判断负环
John在他的农场中闲逛时发现了许多虫洞.虫洞可以看作一条十分奇特的有向边,并可以使你返回到过去的一个时刻(相对你进入虫洞之前).John的每个农场有M条小路(无向边)连接着N (从1..N标号)块地 ...
- 4,JavaScript数据类型
学习要点:1.typeof 操作符2.Undefined 类型3.Null 类型4.Boolean 类型5.Number 类型6.String 类型7.Object 类型 ECMAScript 中有 ...
- 【算法笔记】B1032 挖掘机技术哪家强
1032 挖掘机技术哪家强 (20 分) 为了用事实说明挖掘机技术到底哪家强,PAT 组织了一场挖掘机技能大赛.现请你根据比赛结果统计出技术最强的那个学校. 输入格式: 输入在第 1 行给出不超过 1 ...
- 洛谷 P2577 [ZJOI2005]午餐
这道题目比较难想. 题解: 算法:贪心+dp 容易想到贪心:吃饭慢的先打饭节约时间, 所以先将人按吃饭时间从大到小排序. 然后就是dp了: 首先,应该想到f[i][j][k]:前i个人,在1号窗口打饭 ...
- 修改TrustedInstaller权限文件
我们在删除文件的时候有可能出现无法删除,并且需要TrustedInstaller提供的权限,所以我们主要修改该文件的拥有者(修改为本机用户)即可.下文举例哦,方法如下: 总结起来:修改文件的所有着为本 ...
- 2019.03.26 读书笔记 关于for与foreach
for 是索引器,foreach是迭代器 foreach在movenext()中增加了对集合版本(一个整数,每次对集合修改都+1)的验证,另外反编译后的效果是使用了using(是try finally ...
- 【问题记录】 Linux 安装 apache 遇到的一些问题
以下为linux上安装apache时自己遇到的一些问题,记录在这,以后遇到时也会不定时更新... 一.安装Apache提示APR not found的解决办法 解决方法: 1. 网站 http://a ...