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(),或者手动把参数改回来
最新文章
- Ubuntu 16.10 虚拟机安装记录
- Android Studio 常用快捷键及如何沿用Eclipse的快捷键
- Laravel教程 三:视图变量传递和Blade
- How to deploy JAVA Application on Azure Service Fabric
- PHP接口的声明与引用
- WPF:构建应用程序
- linux-Centos6.5中nginx1.63源码安装
- 【思维】【水】 南阳oj 喷水装置(一)
- 20.DOM
- sublime安装配置
- bzoj 3680 吊打xxx 模拟退火
- kali权限提升之本地提权
- 【莫烦Pytorch】【P1】人工神经网络VS. 生物神经网络
- 创建Python虚拟环境
- Java简介及开发环境配置
- Android Gradle 依赖方式
- List泛型集合
- BroadcastReceiver的两种注册方式和使用
- AD &; BC
- Java线程状态及 wait、sleep、join、interrupt、yield等的区别