Flask接口签名sign原理与实例代码浅析
309
2023-06-09
svg动画之动态描边效果
1、首先先做一个简单的线一点一点画出来的效果,主要使用svg中的“strokeDasharray”、“strokeDashoffset”属性,通过css3中的transtion改变strokeDashoffset来实现动画。
注:path中的数据通过在ai中划线后存储为svg格式就可以拿到;
效果图:
代码如下:
//svg 动画一般用transtion和animation
var path1 = document.querySelector(".move_line1 path");
var length1 = path1.getTotalLength();
//清除动作
path1.style.transtion = path1.style.WebkitTransition = "none";
//设置起点
path1.style.strokeDasharray = length1 + ' ' + length1;
path1.style.strokeDashoffset = length1;
//获取一个区域,获取相关的样式,让浏览器寻找一个起始点
path1.getBoundingClientRect();
//定义动作
path1.style.transition = path1.style.WebkitTransition = 'stroke-dashoffset 2s ease-in-out';
//GO
path1.style.strokeDashoffset = '0';
2、与画线的效果,接下来用同样的原理来画一个“蓝胖子”,蓝胖子同样是需要用ai画出来,将所有的元素存在数组里面遍历时改变transtion中的during和delay从而实现划线的先后顺序。
效果图:
代码如下:
(function() {
function toArray(arr) {
return Array.prototype.slice.call(arr);
}
var svg2 = document.querySelector('.move_line2 svg');
svg2.parentNode.style.display = 'block';
svg2.style.visibility = 'hidden';
function fullSketch() {
svg2.style.visibility = '';
var paths = toArray(svg2.children);
var begin = 0;
var durations = paths.map(function(path2) {
var length;
console.log(path2.tagName);
if(path2.tagName == "path"){
length = path2.getTotalLength();
}else if(path2.tagName == "ellipse"){
length = Math.PI*path2.getAttribute("rx")*path2.getAttribute("ry");
}else if(path2.tagName == "circle"){
length = 2*Math.PI*path2.getAttribute("r");
}else if(path2.tagName == "line"){
var x_1=path2.getAttribute("x1"),y_1=path2.getAttribute("y1"),x_2=path2.getAttribute("x2"),y_2=path2.getAttribute("y2");
length = Math.sqrt(Math.pow((x_1-x_2),2) + Math.pow((y_1-y_2),2));
}
path2.style.strokeDasharray = length + ' ' + length;
path2.style.strokeDashoffset = length;
return Math.pow(length, 0.5) * 0.02;
});
paths[0].getBoundingClientRect();
paths.forEach(function(path, i) {
path.style.transition = path.style.WebkitTransition = 'stroke-dashoffset ' + durations[i] + 's ' + begin + 's ease-in-out';
path.style.strokeDashoffset = '0';
path.setAttribute("class", "shade");
begin += durations[i] + 0.1;
});
}
window.addEventListener('load', fullSketch);
}());
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~