CSS animation没办法解决SVG路径运动的问题,下图路径运动的过程,通过查资料发现所有的IE的版本都不支持SVG animation。在IE中没有水流动的效果。
<style>
svg #water_path {
stroke-dasharray: 53, 200;
stroke-dashoffset: -180;
-webkit-animation: water 30s linear infinite;
-moz-animation: water 30s linear infinite;
-ms-animation: water 30s linear infinite;
-o-animation: water 30s linear infinite;
animation: water 30s linear infinite;
}
@keyframes water {
0% {
stroke-dashoffset: -200;
}
100% {
stroke-dashoffset: 1000;
}
}
@-ms-keyframes water {
0% {
stroke-dashoffset: -200;
}
100% {
stroke-dashoffset: 1000;
}
}
@-moz-keyframes water {
100% {
stroke-dashoffset: 1000;
}
}
@-webkit-keyframes water {
100% {
stroke-dashoffset: 1000;
}
}
@-o-keyframes water {
100% {
stroke-dashoffset: 1000;
}
}
</style>
<script type="text/javascript">
var element = document.getElementById("animpath");
var pathLength = element.getTotalLength();
element.style.strokeDashoffset = pathLength;
function animateRoute(e, len) {
len += 1;//每次偏移的位置
if (len >= 1000) {
//大于1000后重置初始偏移,重复运动
len = -200;
}
//设置元素偏移
element.style.strokeDashoffset = len;
//10毫秒执行一次
setTimeout(function () {
animateRoute(e, len);
}, 10);
}
animateRoute(element, pathLength);
</script>
<div class="svg-warp" style="background-color: #001020;height: 100%">
<svg class="home-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 800">
<path class="animate" id="animpath" fill="none" stroke="#F6B457" stroke-width="6"
stroke-dasharray="53, 200" stroke-linecap="round" d="
M595.87,381.5c3.75,75.25-102.441,73.5-104.667,8.917l0.097-16.092"/>
</svg>
</div>
stroke-miterlimi 不可以添加。stroke-width="6"的值要小于等于6.从网上查资料,有案例是大于6也可以运行,感觉可能是简单路径的原因,具体原因不是很清楚,效果代码如下,测试在IE中显示效果受到很多条件的限制,但是基本上可以运动起来了。案例代码
涉及到TweenMax制作动画,后续把完整代码整理上传,先看下效果图
写东西的时候总是想着要对读者负责,但是知识有限,能完成并写出来希望能跟大家一起学习进步,有错希望能得到指点,喜欢希望能收到点赞。
在开发过程中发现var pathLength = element.getTotalLength();
只能应用于path路径
这里还有另外一种实现方法,应用于path line 等
案例代码
本文转载于:猿2048➦https://www.mk2048.com/blog/blog.php?id=haic2i00b2j
手机扫一扫
移动阅读更方便
你可能感兴趣的文章