canvas缓动2
同之前的缓动原理。这里将终点换成鼠标,做出跟随效果
var canvas = document.getElementById("canvas");
var cxt=canvas.getContext("2d");
var ballX=0,ballY=0,esaing=0.1;
function Ball(x,y,radius,speed){
this.x=x;
this.y=y;
this.radius=radius;
this.speed=speed;
}
var balles=[];
balles.push(new Ball(20,20,20,{x:0,y:0}));
var b=balles[0];
function draw(){
cxt.beginPath();
cxt.clearRect(0,0,canvas.width,canvas.height);
cxt.fillStyle="red";
b.x+=(point.x-b.x)*0.0001;
b.y+=(point.y-b.y)*0.0001;
cxt.arc(b.x,b.y,b.radius,0,Math.PI*2,true);
cxt.fill();
cxt.closePath();
requestAnimationFrame(draw);
}
var point
function move(event){
var x=event.point.x;
var y=event.point.y;
point=event.point
draw();
}
function down(event){}
function up(event){}
tool.MT(canvas,move,down,up);
canvas缓动2的更多相关文章
- canvas缓动3
这次缓动的是旋转旋转,写完之后才知道原来rotate是绕原点旋转,而且还带着rect本身的X与Y一起,所以我采用了translate达到位移效果,以免旋转到画布外面去,画完之后效果惨不忍睹,原来是忘记 ...
- canvas缓动
通过不断地将与目标的距离和系数相乘来让物体实现远快近缓的运动. 如图所示可以做出缓动效果,具体代码如下 var canvas = document.getElementById("canva ...
- Canvas学习笔记——缓动
当你驾车在高速公路上行驶时,速度是很快的,而快到收费站时,则开始减速直到停下.将这个例子转换成物理模型就是当物体向终点运动时,开始速度会很快,而在快要到达终点时,速度会逐渐放缓直至0,整个运动过程就是 ...
- 背水一战 Windows 10 (15) - 动画: 缓动动画
[源码下载] 背水一战 Windows 10 (15) - 动画: 缓动动画 作者:webabcd 介绍背水一战 Windows 10 之 动画 缓动动画 - easing 示例演示缓动(easing ...
- 重新想象 Windows 8 Store Apps (19) - 动画: 线性动画, 关键帧动画, 缓动动画
原文:重新想象 Windows 8 Store Apps (19) - 动画: 线性动画, 关键帧动画, 缓动动画 [源码下载] 重新想象 Windows 8 Store Apps (19) - 动画 ...
- 软件项目技术点(1)——Tween算法及缓动效果
AxeSlide软件项目梳理 canvas绘图系列知识点整理 Tween算法及缓动效果 软件里在切换步序时需要有过渡动画效果,从当前位置的画面缓动到目标位置的画面.动画效果可重新查看文章系列第一篇 ...
- 【WPF学习】第五十一章 动画缓动
线性动画的一个缺点是,它通常让人觉得很机械且不能够自然.相比而言,高级的用户界面具有模拟真实世界系统的动画效果.例如,可能使用具有触觉的下压按钮,当单击时按钮快速弹回,但是当没有进行操作时它们会慢慢地 ...
- jQuery-1.9.1源码分析系列(十五) 动画处理——缓动动画核心Tween
在jQuery内部函数Animation中调用到了createTweens()来创建缓动动画组,创建完成后的结果为: 可以看到上面的缓动动画组有四个原子动画组成.每一个原子动画的信息都包含在里面了. ...
- thwen 缓动框架
描述 目前提供一个方法 ele 元素对象 obj 操作 duration 时间 effect 缓动选择 thwenMove(option) 框架支持以下缓动策略 -指数衰减的正弦曲线缓动 -圆形曲线的 ...
随机推荐
- 警惕多iframe下的同名id引起的诡异问题
遇到个诡异bug,虽然bug中套bug,忽略次要bug,其中最诡异最典型的现象是多行window.top.$("#id")取值操作,其中有一行却取不到值.这个着实让我费解.因为用到 ...
- [转]asp.net c# 网上搜集面试题目(附答案)
本文转自:http://www.cnblogs.com/hndy/articles/2234188.html 1.String str=new String("a")和String ...
- 在一周内学会使用 AUTO CAD
学习目的: 1.使用AUTO CAD绘制电路板外框.元器件封装: 2.借助软件使用,对产品结构有更深入的体会. 学习过程: 1.由于本人急需在短时间内具备简单的二维绘图能力,故没有借鉴.对比网络上其他 ...
- Mecanim 动作复用示例
Mecanim动作复用 资源包 四个动画文件 一个Controller 不同的模型 让模型都生成Avter,然后让多个模型重用一套动作 复用动作预览 动画状态机 资源地址 Assets Store地址 ...
- guava 学习笔记 使用瓜娃(guava)的选择和预判断使代码变得简洁
guava 学习笔记 使用瓜娃(guava)的选择和预判断使代码变得简洁 1,本文翻译自 http://eclipsesource.com/blogs/2012/06/06/cleaner-code- ...
- div根据内容改变大小并且左右居中
div{ display:inline-block; width:auto; } 这个div的父元素text-align:center;
- 使用uboot的tftp下载bootloader、内核、文件系统
开发板 jz2440 下载uboot.bin tftp 0x30000000 u-boot.bin nand erase bootloader nand write bootloader 下载内核 t ...
- poj 3264
Balanced Lineup Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 44594 Accepted: 20931 ...
- 启动Eclipse后卡在 android sdk content loader 的解决办法
Make sure that eclipse is not active. If it is active kill eclipse from the processes tab of the tas ...
- PHP高效率写法及原因
1.尽量静态化: 如果一个方法能被静态,那就声明它为静态的,速度可提高1/4,甚至我测试的时候,这个提高了近三倍. 当然了,这个测试方法需要在十万级以上次执行,效果才明显. 其实静态方法和非静态方法的 ...