# canvas动画包教不包会：速度与加速度

1. 速度向量
2. 加速度
3. 附录：重要公式

1、速度向量

1.1 单轴上的速度向量 ``var vx = 1;  //定义x轴速度var vy = 1;  //定义y轴速度沿x轴正方向：ball.x += vx;沿x轴反方向：ball.x -= vx;沿y轴正方向：ball.y += vy;沿y轴反方向：ball.y -= vy;``

``ball.x += ball.speed.x;// 或   ball.y += ball.speed.y;``

``if(ball.x >= (canvas.width-ball.radius*2) || ball.x <= 0){     ball.speed.x = -ball.speed.x;   };``

1.2 双轴上的速度向量 ``ball.x += 5;   ball.y += 4;``
x轴的速度定为5，y轴的速度定为4。 ``vx = Math.cos(45 * Math.PI / 180) *1;vy = Math.sin(45 * Math.PI / 180)*1;``

2、加速度

2.1 单轴加速度 ``ball.speed.x += ax;   ball.x += ball.speed.x;function keyLeft(){     ax += (-0.01);   };   function keyRight(){     ax += 0.02;   };window.tool.captureKeyDown({"37":keyLeft,"39":keyRight});  // 这事件在用户交互一章中已封装的``

2.2 双轴加速度 2.3 重力加速度（g）

``var g = 0.3;   //重力加速度var bounce = -0.7;  //反弹系数//边界检测if(ball.y >= (canvas.height - ball.radius * 2)) {     ball.y = canvas.height - ball.radius * 2;     ball.speed.y *= bounce;  //反复相乘，最后趋近于0   };   ball.speed.y += g;   ball.y += ball.speed.y;``

• 速度和加速度是动画的基础元素，其中两者都是向量，包括了一个重要因素：方向。
• 要学会应用 分解 合成 ，将速度或加速度分解到x、y轴上，然后将每条轴上的加速度或速度相加，然后再分别与物体的位置坐标相加。

（1）将角速度分解为x、y轴上的速度向量

``vx = speed * Math.cos(angle)vy = spedd * Math.sin(angle)``

（2）将角加速度分解为x、y轴上的加速度

``ax = force * Math.cos(angle)ay = force * Math.sin(angle)``

（3）将加速度加入速度向量

``vx += ax;vy += ay;``

（4）将速度向量加入位置坐标

``object.x += vx;object.y += vy;``
{"ft_lang_label":"__label__zh","ft_lang_prob":0.7678013,"math_prob":0.99862385,"size":1423,"snap":"2019-51-2020-05","text_gpt3_token_len":849,"char_repetition_ratio":0.1627907,"word_repetition_ratio":0.0,"special_character_ratio":0.36401966,"punctuation_ratio":0.28391168,"nsfw_num_words":0,"has_unicode_error":false,"math_prob_llama3":0.9998284,"pos_list":[0,1,2,3,4,5,6,7,8,9,10,11,12],"im_url_duplicate_count":[null,null,null,2,null,2,null,2,null,2,null,1,null],"WARC_HEADER":"{\"WARC-Type\":\"response\",\"WARC-Date\":\"2020-01-25T18:12:15Z\",\"WARC-Record-ID\":\"<urn:uuid:e7597955-fea3-45d2-bd40-f29611f39682>\",\"Content-Length\":\"19944\",\"Content-Type\":\"application/http; msgtype=response\",\"WARC-Warcinfo-ID\":\"<urn:uuid:f58bcb0c-0f51-4a5c-ac1c-f4839df38645>\",\"WARC-Concurrent-To\":\"<urn:uuid:30ba4692-b2e7-4019-8aeb-e99040dc864a>\",\"WARC-IP-Address\":\"121.199.250.229\",\"WARC-Target-URI\":\"http://ghmagical.com/article/page/id/eb2Jynv5BLM9\",\"WARC-Payload-Digest\":\"sha1:PT4O4EH7U5I4NW3ACYKTQBUMDJYW2CIK\",\"WARC-Block-Digest\":\"sha1:FS4NKAYFFY6YHKEL7QICBWUMEUSUKUXR\",\"WARC-Identified-Payload-Type\":\"text/html\",\"warc_filename\":\"/cc_download/warc_2020/CC-MAIN-2020-05/CC-MAIN-2020-05_segments_1579251678287.60_warc_CC-MAIN-20200125161753-20200125190753-00386.warc.gz\"}"}