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) 框架支持以下缓动策略 -指数衰减的正弦曲线缓动 -圆形曲线的 ...
随机推荐
- STM32之USART-RS485
转载自:http://www.cnblogs.com/itloverhpu/p/3278014.html 1.今天调试HDMI8X8背板和板卡的通信,一直有问题:背板可以和PC正常通信,背板可以发命令 ...
- Recovering deleted Records
[原文] recovering-deleted-records Solution That requires an actual timestamp (or date), you're passing ...
- Color国际青年公寓
Color国际青年公寓介绍.md-/Users/zjh/Documents html{font-family: sans-serif;-ms-text-size-adjust: 100%;-webki ...
- HTML标签----图文详解
国庆节快乐,还在加班的童鞋,良辰必有重谢! 本文主要内容 头标签 排版标签:<p> <br> <hr> <center> ...
- AC日记——独木桥 洛谷 p1007
题目背景 战争已经进入到紧要时间.你是运输小队长,正在率领运输部队向前线运送物资.运输任务像做题一样的无聊.你希望找些刺激,于是命令你的士兵们到前方的一座独木桥上欣赏风景,而你留在桥下欣赏士兵们.士兵 ...
- AC日记——字符串最大跨距 openjudge 1.7 26
26:字符串最大跨距 总时间限制: 1000ms 内存限制: 65536kB 描述 有三个字符串S,S1,S2,其中,S长度不超过300,S1和S2的长度不超过10.想检测S1和S2是否同时在S中 ...
- webform:分页组合查询
一个简单的分页组合查询页面 /// <summary> /// 查询方法 /// </summary> /// <param name="tsql"& ...
- [No000058]一口气读完一本英语书
个人:"如何学好英语?"99个人会回答:"去,读英文原著." 然而这事儿吧,恐怕比坚持背单词还难.无论少侠们背过多少单词,最后都会败在生词太多.句子太难的坎儿上 ...
- VS清除打开项目时的TFS版本控制提示
原文:http://blog.useasp.net/archive/2015/12/15/how-to-permanently-remove-vs-project-TFS-source-version ...
- [转]ReactPHP── PHP版的Node.js
FROM : http://www.csdn.net/article/2015-10-12/2825887 摘要:ReactPHP作为Node.js的PHP版本.在实现思路,使用方法,应用场景上的确有 ...