canvas链式弹性运动

上一课我学习了相对于鼠标为目标点的弹性运动,这次就学习了如何以上一个球为目标点的弹性运动,这次的函数比较复杂,首先分成了如下几个函数,首先定义了一个球的model,之后添加了4个球,在加载中调用了动画事件,之后在动画事件里面加载了画线的事件,画完线之后才开始画球,而且专门用了一个函数来计算,也就是完全分开了层次,以免自己的逻辑思维混乱,这是一种编程的良好思维,分区处理内容,这样有效避免了代码重用,也增加了代码可读性。

还是像以前一样,代码如下:

var canvas = document.getElementById("canvas");
var cxt=canvas.getContext("2d");
var moves={x:0,y:0}
var balles=[];
var spring=0.03;
var g=6;
var force=0.85
var friction=0.1;
function Ball(x,y,radius,speed){
this.x=x;
this.y=y;
this.radius=radius;
this.vx=0;
this.vy=0;
this.speed=speed;
}
function move(event){
moves.x=event.point.x;
moves.y=event.point.y;
}
function down(event){}
function up(event){}
function animation(){
cxt.clearRect(0,0,canvas.width,canvas.height);
balles.forEach(draw);
requestAnimationFrame(animation);
}
function draw(ball,i){
// console.log(ball);
cxt.beginPath();
cxt.moveTo(ball.x,ball.y);
if(i!=0)
{
var b=balles[i-1];
}
else
{
var b={x:moves.x,y:moves.y}

}
cxt.lineTo(b.x,b.y);
cxt.strokeStyle="red";
cxt.stroke();
cxt.closePath();
if(i==0)
ballDraw(ball,moves.x,moves.y);
else
ballDraw(ball,balles[i-1].x,balles[i-1].y);
}
function ballDraw(ball,targetX,targetY){
cxt.beginPath();
var dx=targetX-ball.x;
var dy=targetY-ball.y;
var vx=dx*spring;
var vy=dy*spring;
ball.speed.x+=vx;
ball.speed.y+=vy;
ball.speed.x*=force;
ball.speed.y*=force;
ball.x+=ball.speed.x;
ball.y+=ball.speed.y+g;
cxt.arc(ball.x,ball.y,ball.radius,0,Math.PI*2,true);
cxt.fillStyle="red";
cxt.fill();
cxt.closePath();
}
window.onload=function(){
for(var i=0;i<4;i++)
{
balles.push(new Ball(20,i*50,10,{x:0,y:0}));
}
animation();
tool.MT(canvas,move,down,up);
}

时间: 2024-10-29 19:06:28

canvas链式弹性运动的相关文章

HTML+JavaScript实现链式运动特效

在学习js的过程中,发现这家伙做特效真是不错,虽然说目前水平还不够,不过也能写点简单的效果.今天分享一个简单的运动框架,然后利用这个框架实现简单的链式运动特效. 1.move.js 在运动框架中,主要进行长宽变化和透明度的变化.长宽的变化可以实现DIV的体积运动变化效果,透明度的话主要是在鼠标移入移出事件中添加淡入淡出的效果.我将这个简单的运动框架封装到一个单独的js文件中,方便调用. 先看看代码: <span style="font-family:KaiTi_GB2312;"&

链式运动的一些思路

前面的一些运动都是只完成一种运动,完成后一般就不会在增加其他运动,在实际中可能会有多种情况,如果想要一个对象完成一个运动后,再接着完成另外一个运动,这时可以考虑用链式运动框架实现一些功能,最主要的还是在定时器封装的函数里再增加一个参数作为传值,一般这个参数是函数,下面这个小例子: function setMove(obj,arr,iTarget,fun){ //设置多个参数,第二个参数为要改变的样式,链式运动框架 var timer = null; clearInterval(obj.timer

运动回调-链式运动

1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 #div1 {width:100px; height: 100px; background: red;

JS模拟土豆弹窗——链式运动

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS模拟土豆弹窗——链式运动</title> <style> *{padding: 0; margin: 0;} body{ font-size: 12px; font-family: "微软雅黑"; overflow: hidden;} #foot{ width:

Javascript 链式运动框架——逐行分析代码,让你轻松了运动的原理

所谓链式运动,就是一环扣一环.我们的很多运动实际上来说指的就是分阶段的,第一个阶段动完,下个阶段开始动.这个链式运动框架就是用来处理这些问题的. 我们先来看下之前的运动框架,以下是Javascript 代码 function getStyle(obj, name) { if (obj.currentStyle) { return obj.currentStyle[name]; } else { return getComputedStyle(obj, null)[name]; } } funct

(一一八)利用block实现链式编程

有些时候需要不断地调用方法,如果使用传统方案,需要拿到对象多次调用,例如有一个Ball对象,实现了up.down.left.right四个方法,分别控制球的运动方向,如果要实现球向右再向下,需要这么写: [ball right]; [ball down]; 如果能够按照下面这样写,会更加方便. [[ball right] down]; 要实现这样的功能十分简单,只要每个方法都返回self即可,但是如果调用次数多,会有很多个中括号.如果能改造成后面这样,会更好. ball.right().down

jQery的链式操作和商城简易导航栏

今天要记录的是jq的一些简单操作.项目的需求是做一个导航栏,单机不同的商品名称链接,显示相应的内容.用js来写的话相对代码量要多一些,选择jqrey一行则可以搞定,下面呢是我的代码和效果图 这个是初始化点击后 首先是我们的布局部分,这里呢我直接把我的代码写进来,样式可能有点抽象 <style> .level1{ list-style: none; line-height: 30px; width: 100px; cursor: pointer; border-top: none; } .lev

js--链式缓冲运动框架

这些框架都是鄙人自学的网上视频,至于是哪家,想必大家都知道的,当然不纠结这个,最主要的是学习的过程和结果,甚至于你理解,掌握了没有 网上有很多的开源框架,很佩服他们的思路和写法,或许这就是代码之美吧 我一个小小的前台,做界面的,现在也要去学习设计思路了,毕竟你拿工资的多少和你掌握技能的多少.深度是成正比的 当然更要相信 努力必有回报,坚持一定成功 以下是更新的学习运动框架的进度和代码 更新时间:2014-12-11 js框架---缓冲链式运动--已经掌握 1 //运动框架 2 //author:

多元素多属性的链式缓冲

链式运动: 所谓链式运动,也即元素的可运动属性一个接着一个的发生变化,有其一定的需求性.前面所学的缓动函数无法满足链式运动的需求,缓动函数的叠加与定时器分配(一个元素只有一个定时器)之间构成了矛盾,造成只有最后一个缓动函数有效的局面. 为了能够实现链式运动,需要重新封装缓动函数.整体的思路是,在缓动函数中加一个可选的函数参数,当传入该函数时,则在一个属性变化完成后调用. 这样之后,每个缓动函数后面都可以再跟一个缓动函数,类似于递归,直至不再传递缓动函数. 页面布局和样式部分: <!DOCTYPE