我有一个星座,我想用线连接。这些线需要从起点到终点进行动画处理。我提供了一张图片来说明我需要的最终结果:
使用easelJS,所有这些星形和线条都使用HTML5画布绘制。提供下面是我的代码到目前为止," this.paths"变量包含x和y位置。
var graphics = this.shape.graphics;
graphics.beginStroke('#ffffff');
graphics.setStrokeStyle(1);
for(var i = 0; i < this.path.length; i++)
{
var path = this.path[i];
graphics.moveTo(path[0].x / 2, path[0].y / 2);
graphics.lineTo(path[0].x / 2, path[0].y / 2);
graphics.lineTo(path[1].x / 2, path[1].y / 2);
}
this.shape.alpha = 0.6;
提前致谢。
答案 0 :(得分:2)
您需要的只是本演示中的所有内容
http://www.createjs.com/demos/tweenjs/tween_sparktable
你有一组坐标,如(x1,y1)和(x2,y2)。现在你需要使用直线方程并逐点绘制线条以获得平滑动画,只需播放延迟以获得满意的结果。说真的,这个演示涵盖了所有这些以及更多,你甚至可以在那里编辑它!我已经使用了一些代码,这是你的对角线,只需将此代码粘贴到那里然后运行即可
var stage;
var prevPoint, dataProvider, rect = new createjs.Rectangle(20,20,700,360);
var bar, container, currentClip;
var selectedFunction, selectedItem, selectedIndex = 0;
var resetRuninng = false, startTimeout;
var clips = [];
var activeTween;
function init() {
stage = new createjs.Stage("testCanvas");
var Ease = createjs.Ease; // shortcut.
dataProvider = [
{type: "divider", label: "Ease Equations"},
];
var eases = document.getElementById("eases");
var cloneElement = document.createElement("a");
cloneElement.href = "#";
for (var i = 0, l = dataProvider.length; i < l; i++) {
var item = dataProvider[i];
if (item.type == "divider") {
element = document.createElement("span");
element.innerHTML = item.label;
eases.appendChild(element);
continue;
}
var element = cloneElement.cloneNode(true);
element.id = i;
element.onclick = selectItem;
element.innerHTML = item.label;
eases.appendChild(element);
if (item.label == "linear") {
selectedItem = element;
element.className = "selected";
}
}
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", tick);
prevPoint = new createjs.Point(rect.x, rect.y);
container = stage.addChild(new createjs.Container());
bar = container.addChild(new createjs.Shape()
.set({alpha:0.7, x:rect.x, y:rect.y}));
bar.graphics.f("#000").setStrokeStyle(1)
stage.update();
startTimeout = setTimeout(run, 1000);
}
function stop() {
Ticker.off("tick", tick);
}
function selectItem() {
clearTimeout(startTimeout);
if (clips.length > 0) { fade(); }
if (selectedItem != null && selectedItem != this) {
selectedItem.className = "";
}
selectedItem = this;
selectedIndex = this.id;
selectedItem.className = "selected";
selectedFunction = dataProvider[selectedIndex].type;
resetRuninng = true;
//createjs.Tween.get(bar, {override: true}).to({x: rect.x}, 500).call(resetComplete);
return false;
}
function run(easeType) {
currentClip = stage.addChild(new createjs.Shape());
clips.push(currentClip);
prevPoint.setValues(rect.x, rect.y);
activeTween = createjs.Tween.get(bar, {override: true}).to({x: rect.x+rect.width}, 1500, easeType);
}
function resetComplete() {
bar.x = rect.x;
resetRuninng = false;
currentClip = null;
prevPoint.setValues(rect.x, rect.y);
run(selectedFunction);
}
function tick(event) {
if (!resetRuninng && currentClip != null) {
var hue = (selectedIndex / dataProvider.length) * 360;
var g = currentClip.graphics
.setStrokeStyle(1, "round", "round")
.beginStroke(createjs.Graphics.getHSL(hue, 50, 50))
.moveTo(prevPoint.x, prevPoint.y);
prevPoint.x = bar.x;
prevPoint.y = rect.x+ activeTween.position/1500 * rect.height;
g.lineTo(prevPoint.x, prevPoint.y);
stage.update(event);
} else if (resetRuninng) {
stage.update(event);
}
}
function fade() {
for (var i = 0; i < clips.length; i++) {
var clip = clips[i];
createjs.Tween.get(clip, {override: true})
.to({alpha: clip.alpha - 0.4}, 1000)
.call(fadeTweenComplete);
}
}
function fadeTweenComplete(tween) {
var clip = tween._target;
if (clip.alpha <= 0) {
stage.removeChild(clip);
var index = clips.indexOf(clip);
clips.splice(index, 1);
}
}
<强>更新强>:
这是另一种基于简单滴答方法的方法