画布到svg与动画翻译
canvas to svg translate with animation
我一直在使用JavaScript库制作动画天气符号。我现在正在做云符号的SVG版本，不知道哪种方法可能是最好的。
所以我做了一个云的轨迹/路径，静态（jsFiddle）和基本旋转不是正确的效果，因为原始云（在js画布动画中）基本上有5条曲线，它们在旋转时会膨胀和收缩。
我认为可能的方法：
-
制作5个圆圈，使用破折号来显示所需的弧线，然后设置动画&扩大/缩小圆
-
制作5个子路径，并以某种方式动画扩展和收缩它们
-
使用5个动画运动动画
有更好的逻辑吗？任何关于如何思考这一逻辑的建议都会很棒。
与上面的jsFiddle相同的例子，使用SE应用程序：
var skycons = new Skycons({
"color": "black"
});
var canvas = document.querySelectorAll('canvas');
[].forEach.call(canvas, function (el) {
skycons.add(el, el.dataset.icon);
});
skycons.play();<script src="https://rawgit.com/darkskyapp/skycons/master/skycons.js"></script>
<div class="fe_forecast">
<div class="fe_currently">
<canvas id="fe_current_icon" data-icon="cloudy" width="160" height="160" style="width:120px; height:120px"></canvas>
</div>
</div>我被你提供的svg代码误导了：
我最初认为您的画布代码是用moveTo、arcTo或quadraticCurveTo方法绘制Path2d，这些方法很容易调整，以便与svg的路径d属性交互，因为画布的路径命令与svg的路径命令几乎相同。
但是，我想你通过像InkScape或Illustrator这样的软件将位图转换为矢量，得到了当前的svg代码。
事实上，Skycons代码所做的是绘制5个圆，同时预先形成一个compositeOperation，以便只有不重叠的笔划可见。
在这里，我修改了代码，使其变得显而易见：
(function(global) {
"use strict";
var requestInterval = function(fn, delay) {
var handle = {value: null};
function loop() {
handle.value = requestAnimationFrame(loop);
fn();
}
loop();
return handle;
},
cancelInterval = function(handle) {
cancelAnimationFrame(handle.value);
};
var KEYFRAME = 500,
STROKE = 0.08,
TAU = 2.0 * Math.PI,
TWO_OVER_SQRT_2 = 2.0 / Math.sqrt(2);
function circle(ctx, x, y, r) {
ctx.beginPath();
ctx.arc(x, y, r, 0, TAU, false);
ctx.stroke();
}
function puff(ctx, t, cx, cy, rx, ry, rmin, rmax) {
var c = Math.cos(t * TAU),
s = Math.sin(t * TAU);
rmax -= rmin;
circle(
ctx,
cx - s * rx,
cy + c * ry + rmax * 0.5,
rmin + (1 - c * 0.5) * rmax
);
}
function puffs(ctx, t, cx, cy, rx, ry, rmin, rmax) {
var i;
for(i = 5; i--; )
puff(ctx, t + i / 5, cx, cy, rx, ry, rmin, rmax);
}
function cloud(ctx, t, cx, cy, cw, s, color) {
t /= 30000;
var a = cw * 0.21,
b = cw * 0.12,
c = cw * 0.24,
d = cw * 0.28;
puffs(ctx, t, cx, cy, a, b, c, d);
puffs(ctx, t, cx, cy, a, b, c - s, d - s);
}
var Skycons = function(opts) {
this.list = [];
this.interval = null;
this.color = opts && opts.color ? opts.color : "black";
this.resizeClear = !!(opts && opts.resizeClear);
};
Skycons.CLOUDY = function(ctx, t, color) {
var w = ctx.canvas.width,
h = ctx.canvas.height,
s = Math.min(w, h);
cloud(ctx, t, w * 0.5, h * 0.5, s, s * STROKE, color);
};
Skycons.prototype = {
_determineDrawingFunction: function(draw) {
if(typeof draw === "string")
draw = Skycons[draw.toUpperCase().replace(/-/g, "_")] || null;
return draw;
},
add: function(el, draw) {
var obj;
if(typeof el === "string")
el = document.getElementById(el);
// Does nothing if canvas name doesn't exists
if(el === null)
return;
draw = this._determineDrawingFunction(draw);
// Does nothing if the draw function isn't actually a function
if(typeof draw !== "function")
return;
obj = {
element: el,
context: el.getContext("2d"),
drawing: draw
};
this.list.push(obj);
this.draw(obj, KEYFRAME);
},
set: function(el, draw) {
var i;
if(typeof el === "string")
el = document.getElementById(el);
for(i = this.list.length; i--; )
if(this.list[i].element === el) {
this.list[i].drawing = this._determineDrawingFunction(draw);
this.draw(this.list[i], KEYFRAME);
return;
}
this.add(el, draw);
},
remove: function(el) {
var i;
if(typeof el === "string")
el = document.getElementById(el);
for(i = this.list.length; i--; )
if(this.list[i].element === el) {
this.list.splice(i, 1);
return;
}
},
draw: function(obj, time) {
var canvas = obj.context.canvas;
if(this.resizeClear)
canvas.width = canvas.width;
else
obj.context.clearRect(0, 0, canvas.width, canvas.height);
obj.drawing(obj.context, time, this.color);
},
play: function() {
var self = this;
this.pause();
this.interval = requestInterval(function() {
var now = Date.now(),
i;
for(i = self.list.length; i--; )
self.draw(self.list[i], now);
}, 1000 / 60);
},
pause: function() {
var i;
if(this.interval) {
cancelInterval(this.interval);
this.interval = null;
}
}
};
global.Skycons = Skycons;
}(this));
var skycons = new Skycons({
"color": "black"
});
var canvas = document.querySelectorAll('canvas');
[].forEach.call(canvas, function (el) {
skycons.add(el, el.dataset.icon);
});
skycons.play();<canvas id="fe_current_icon" data-icon="cloudy" width="160" height="160" style="width:120px; height:120px"></canvas>要复制相同的动画，您确实需要为圆创建一个<animationPath>，然后分别设置它们的keyPoints和keyTimes
浏览器仍然不支持svg的合成操作，因此您必须使用<clipPath>并声明两次圆形动画。
这里有一个例子：
<svg version="1.1" id="svg" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="-30 -30 160 160" width=200 height=200>
<defs>
<style>
circle {stroke: #000; stroke-width: 7px; fill: white;}
</style>
<path id="mainmotion" d="M15.5-3.9c13.2,0,23.9,7.4,23.9,16.5S28.7,29.2,15.5,29.2S-8.4,21.8-8.4,12.7S2.3-3.9,15.5-3.9"/>
<g id="g">
<circle id="c1" cx="37.7" cy="32.3" r="27.5">
<animateMotion dur="6s" repeatCount="indefinite" calcMode="linear" keyPoints="0; 0.2; 0.4; 0.6; 0.8; 1" keyTimes="0; 0.2; 0.4; 0.6; 0.8; 1">
<mpath xlink:href="#mainmotion" />
</animateMotion>
</circle>
<circle id="c2" cx="37.7" cy="32.3" r="27.5">
<animateMotion dur="6s" repeatCount="indefinite" calcMode="linear" keyPoints="0.2; 0.4; 0.6; 0.8; 1; 0; 0.2" keyTimes="0; 0.2; 0.4; 0.6; 0.8; 0.8; 1">
<mpath xlink:href="#mainmotion" />
</animateMotion>
</circle>
<circle id="c3" cx="37.7" cy="32.3" r="27.5">
<animateMotion dur="6s" repeatCount="indefinite" calcMode="linear" keyPoints="0.4; 0.6; 0.8; 1; 0; 0.2; 0.4" keyTimes="0; 0.2; 0.4; 0.6; 0.6; 0.8; 1">
<mpath xlink:href="#mainmotion" />
</animateMotion>
</circle>
<circle id="c4" cx="37.7" cy="32.3" r="27.5">
<animateMotion dur="6s" repeatCount="indefinite" calcMode="linear" keyPoints="0.6; 0.8; 1; 0; 0.2; 0.4; 0.6" keyTimes="0; 0.2; 0.4; 0.4; 0.6; 0.8; 1">
<mpath xlink:href="#mainmotion" />
</animateMotion>
</circle>
<circle id="c5" cx="37.7" cy="32.3" r="27.5">
<animateMotion dur="6s" repeatCount="indefinite" calcMode="linear" keyPoints="0.8; 1; 0; 0.2; 0.4; 0.6; 0.8" keyTimes="0; 0.2; 0.2; 0.4; 0.6; 0.8; 1">
<mpath xlink:href="#mainmotion" />
</animateMotion>
</circle>
</g>
<clipPath id="clip">
<use xlink:href="#c1"/>
<use xlink:href="#c2"/>
<use xlink:href="#c3"/>
<use xlink:href="#c4"/>
<use xlink:href="#c5"/>
</clipPath>
</defs>
<use xlink:href="#g"/>
<rect x=0 y=0 width=160 height=160 clip-path="url(#clip)" fill="white" />
</svg>相关文章：
- 如何设置html元素填充的动画
- 如何使用动画实现纸张推车
- 如何在生成下载文件时显示加载动画
- 剑道网格jQuery动画(）问题
- EaseJS拖放;放下(动画CC）电影剪辑的鼠标坐标
- jQuery Lazy加载动画滚动
- jquery动画可以通过编程链接吗
- Javascript将数学动画化
- 动画.CSS重播
- 如何在javascript上使用flak-babel进行翻译
- 制作一个不带HTML a标记但在动画播放完毕后指向其他页面的超链接
- 原生脚本无限翻译动画
- 在动画中获取当前的CSS3翻译
- 画布到svg与动画翻译
- 在Android Native Browser (4.x)上动画化翻译百分比
- Raphael.js 2.0动画翻译变量不一致?(新手)
- 动画粘头使用翻译
- 使用javascript激活css动画/翻译
- 动画翻译是一个大的区域还是很多小的区域
- 基于滚动百分比的动画翻译
