js和vue实现曲线运动

效果图

1、HTML+JavaScript实现曲线运动。index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head><body>
<div style="position:absolute;left:0;top:0;width:500px;height:300px;overflow:hidden;">
<svg id="root" width="500" height="300" viewBox="0 0 500 300" xmlns="http://www.w3.org/2000/svg">
<title>svg</title>
<path d="M20,100 c80 -200 280 200 380 0 h-400" fill="none" stroke-width="1" stroke="gray" stroke-dasharray="3,3" />
</svg>
</div>
<div id="dotMove" style="position:absolute;width:6px;height:6px;overflow:hidden;background-color:#FF0000;"></div>
</body>
<script type="text/javascript">
/*
参考维基百科
http://zh.wikipedia.org/wiki/%E8%B2%9D%E8%8C%B2%E6%9B%B2%E7%B7%9A
*/
function Point2D(x,y){this.x=x||0.0;this.y=y||0.0;
}
/*cp在此是四個元素的陣列:cp[0]為起始點，或上圖中的P0cp[1]為第一個控制點，或上圖中的P1cp[2]為第二個控制點，或上圖中的P2cp[3]為結束點，或上圖中的P3t為參數值，0 <= t <= 1
*/
function PointOnCubicBezier( cp, t )
{var  ax, bx, cx;var  ay, by, cy;var  tSquared, tCubed;var  result = new Point2D ;/*計算多項式係數*/cx = 3.0 * (cp[1].x - cp[0].x);bx = 3.0 * (cp[2].x - cp[1].x) - cx;ax = cp[3].x - cp[0].x - cx - bx;cy = 3.0 * (cp[1].y - cp[0].y);by = 3.0 * (cp[2].y - cp[1].y) - cy;ay = cp[3].y - cp[0].y - cy - by;/*計算位於參數值t的曲線點*/tSquared = t * t;tCubed = tSquared * t;result.x = (ax * tCubed) + (bx * tSquared) + (cx * t) + cp[0].x;result.y = (ay * tCubed) + (by * tSquared) + (cy * t) + cp[0].y;return result;
}
/*ComputeBezier以控制點cp所產生的曲線點，填入Point2D結構的陣列。呼叫者必須分配足夠的記憶體以供輸出結果，其為<sizeof(Point2D) numberOfPoints>
*/
function ComputeBezier( cp, numberOfPoints, curve )
{var  dt;var  i;dt = 1.0 / ( numberOfPoints - 1 );for( i = 0; i < numberOfPoints; i++)curve[i] = PointOnCubicBezier( cp, i*dt );
}
var cp=[new Point2D(20, 0), new Point2D(100, 200), new Point2D(300, -200), new Point2D(400, 0)
];
var numberOfPoints=100;
var curve=[];
ComputeBezier( cp, numberOfPoints, curve );var i=0, dot=document.getElementById("dotMove");
setInterval(function (){var j = (i<100)?i:(199-i);dot.style.left=curve[j].x+'px';dot.style.top=100-curve[j].y+'px';if(++i==200)i=0;
}, 50);</script>
</html>

2、VUE是实现点的曲线运。index.vue

<template><body><div style="position:absolute;left:0;top:0;width:500px;height:300px;overflow:hidden;"><svg id="root" width="500" height="300" viewBox="0 0 500 300" xmlns="http://www.w3.org/2000/svg"><title>svg</title><path d="M20,100 c80 -200 280 200 380 0 h-400" fill="none" stroke-width="1" stroke="gray" stroke-dasharray="3,3" /></svg></div><div id="dotMove" style="position:absolute;width:6px;height:6px;overflow:hidden;background-color:#FF0000;"></div></body>
</template>
<script>
import jquery from 'jquery'
import { logger } from 'runjs/lib/common';export default {name: "konvaa",data() { return {cp:[ { x:0, y:0 }, { x:0, y:0 }, { x:0, y:0 },{ x:0, y:0 } ],numberOfPoints:100,curve:[],i:0, dot:null,k:0,}},mounted(){ //CSS界面渲染前执行this.dot=document.getElementById("dotMove");this.cp[0]=this.Point2D(20,0);this.cp[1]=this.Point2D(100,200);this.cp[2]=this.Point2D(300,-300);this.cp[3]=this.Point2D(400,0);this.ComputeBezier(this.cp,this.numberOfPoints,this.curve);if(this.timer){clearIntreval(this.timer);}else{this.timer=setInterval(()=>{this.abcd();},50);}},destroyed(){clearIntreval(this.timer)},created(){ //CSS界面渲染后执行},methods: {abcd(){var left=0,top=0;var j = (this.i<100)?this.i:(199-this.i);left = this.curve[j].x;top = 100-this.curve[j].y;//this.dot.style.left=this.curve[j].x+'px';//this.dot.style.top=100-curve[j].y+'px';console.info("left:"+left+"top:"+top);jquery('#dotMove').css("left", left + "px");jquery('#dotMove').css("top", top + "px");if(++this.i==200)this.i=0;},update(){this.$message({message: "加载",type: "success"});},Point2D(x,y){return { "x":x||0.0, "y":y||0.0 };},PointOnCubicBezier( cp, t ){var  ax, bx, cx;var  ay, by, cy;var  tSquared, tCubed;var  result = {"X":0, "y":0};/*計算多項式係數*/cx = 3.0 * (cp[1].x - cp[0].x);bx = 3.0 * (cp[2].x - cp[1].x) - cx;ax = cp[3].x - cp[0].x - cx - bx;cy = 3.0 * (cp[1].y - cp[0].y);by = 3.0 * (cp[2].y - cp[1].y) - cy;ay = cp[3].y - cp[0].y - cy - by;/*計算位於參數值t的曲線點*/tSquared = t * t;tCubed = tSquared * t;result.x = (ax * tCubed) + (bx * tSquared) + (cx * t) + cp[0].x;result.y = (ay * tCubed) + (by * tSquared) + (cy * t) + cp[0].y;return result;},ComputeBezier( cp, numberOfPoints, curve ){var  dt;var  i;dt = 1.0 / ( numberOfPoints - 1 );for( i = 0; i < numberOfPoints; i++) {var item=this.PointOnCubicBezier( cp, i*dt );this.curve.push(item); //向集合中添加item}}}}
</script>

3、html实现点的运动

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script src="D:/jquery-1.7.1/jquery-1.7.1.min.js"></script><script type="text/javascript">var guijipoints = [];var index = 0;$(document).ready(function () {var ps = [{ x: 0, y: 0 }, { x: 100, y: 200 }, { x: 200, y: 10 }, { x: 300, y: 400 }, { x: 400, y: 20 }, { x: 200, y: 500 }, { x: 500, y: 30 }, { x: 700, y: 300 }, { x: 800, y: 800 }, { x: 800, y: 800 }];guijipoints = CreateBezierPoints(ps, 1000);var moveobj = $("#move_div");setInterval(function () {var p = guijipoints[index];console.log(p.x);moveobj.css({ left: p.x, top: p.y });index++;if (index >= guijipoints.length) {index = 0;}}, 1000 / 100);guijipoints.forEach(function (obj, i) {createDiv(obj.x, obj.y);});});function createDiv(x, y) {$("body").append('<div style="position: absolute; width: 2px; height: 2px; left:' + x + 'px;top:' + y + 'px; overflow: hidden; background-color: #FF0000"></div>');}//anchorpoints：贝塞尔基点//pointsAmount：生成的点数function CreateBezierPoints(anchorpoints, pointsAmount) {var points = [];for (var i = 0; i < pointsAmount; i++) {var point = MultiPointBezier(anchorpoints, i / pointsAmount);points.push(point);}return points;}function MultiPointBezier(points, t) {var len = points.length;var x = 0, y = 0;var erxiangshi = function (start, end) {var cs = 1, bcs = 1;while (end > 0) {cs *= start;bcs *= end;start--;end--;}return (cs / bcs);};for (var i = 0; i < len; i++) {var point = points[i];x += point.x * Math.pow((1 - t), (len - 1 - i)) * Math.pow(t, i) * (erxiangshi(len - 1, i));y += point.y * Math.pow((1 - t), (len - 1 - i)) * Math.pow(t, i) * (erxiangshi(len - 1, i));}return { x: x, y: y };}</script></head><body><div id="move_div" style=" position: absolute; left: 0px; top: 0px; height: 10px; width: 10px; background-color: red; "></div>
</body>
</html>

js和vue实现曲线运动相关推荐

Vue.js(一) Vue.js + element-ui 扫盲
Vue.js(一) Vue.js + element-ui 扫盲 2018年12月09日 20:32:59 vbirdbest 阅读数 7043更多分类专栏: Vue.js + ElementUI ...
关于node.js 和vue.js的安装、卸载、浏览器测试问题？
关于node.js 和vue.js的安装.卸载.浏览器测试问题? 最近忙于深入研究vue.js框架的适用问题,所以顺带也有必要系统的研究一下node.js是怎么一回事?! 闲话不多说,直接上文章链接: ...
前端实操案例丨如何实现JS向Vue传值
摘要:项目开发过程中,组件通过render()函数渲染生成,并在组件内部定义了自定义拖拽指令.自定义拖拽指令规定了根据用户可以进行元素拖拽.缩放等一系列逻辑处理的动作. 本文分享自华为云社区<[ ...
nuxt解决首屏加载慢问题_Nuxt.js超过Vue.js：你什么时候应该使用它，为什么
Nuxt.js是一个建立在Vue.js上的前端框架,它提供了很好的开发特性,比如服务器端渲染.自动生成路由.改进的元标签管理和SEO改进. Nuxt.js 我们的前端团队并没有真正考虑在客户端使用 N ...
Moment.js在Vue中使用
Moment.js在Vue中使用 1. 安装依赖包 npm install moment --save 2. main.js中引入 import moment from 'moment' Vue.pr ...
webpack-internal:///./node_modules/vue/dist/vue.esm.js:629 [Vue warn]: Invalid prop: type check fail
二级标题webpack-internal:///./node_modules/vue/dist/vue.esm.js:629 [Vue warn]: Invalid prop: type check ...
vue.js:590 [Vue tip]: Event “removeitem“ is emitted in component ＜TodoItems＞ but the handler is regi
报错信息 vue.js:590 [Vue tip]: Event "removeitem" is emitted in component <TodoItems> bu ...
springboot 和 js （vue）实现SM3加密防篡改
springboot 和 js (vue) 实现SM3加密防篡改一.以下是对引入SM3进行说明 1.首先导入jar <dependency><groupId>org.bou ...
js 或者vue中for循环去掉最后一个逗号
js 或者vue中for循环去掉最后一个逗号一个感觉很简单的问题,刚开始我没有思路,现在也没有更好的思路问题描述: 后端返回的一个数组,前端这边需要循环把名字展示,要求在展示时,每个名字后用** ...

js和vue实现曲线运动

js和vue实现曲线运动相关推荐

最新文章

热门文章