我一直在使用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>