项目需求是机器人在办公室移动了一段轨迹,需要将轨迹以动画的形式展示出来。
首先使用了path画轨迹,animateMotion做机器人移动。
问题:每次轨迹重绘或更新时,animateMotion移动的轨迹不对
解决方案:
- html
<rect x="-7" y="-7.5" width="14" height="15" fill="url(#robot_icon)" v-show="!stopAani" >
<animateMotion :path="pathd" begin="0.5s" :dur="dur+'s'" v-if="pathd" repeatCount="indefinite" id="animate_motion" />
</rect>
- js
document.getElementById("animate_motion").beginElement
path轨迹动画
- html
<path :d="pathd" class="bg_path trail_1"></path>
- js
let path = document.querySelector('.trail_1')
let length = path.getTotalLength();
// 清除之前的动作
path.style.transition = path.style.WebkitTransition = 'none';
// 设置起始点
path.style.strokeDasharray = length + ' ' + length;
path.style.strokeDashoffset = length;
// 获取一个区域,获取相关的样式,让浏览器寻找一个起始点。
path.getBoundingClientRect();
// 定义动作
path.style.transition = path.style.WebkitTransition = `stroke-dashoffset ${this.dur}s linear`
// Go!
path.style.strokeDashoffset = '0';
补充
停止,启动。机器人动画
<svg id="svg_an">
<defs>
<pattern id="robot_icon" width="100%" height="100%" patternContentUnits="objectBoundingBox">
<image width="1" height="1" xlink:href="static/images/robot/jqr.png"/>
</pattern>
</defs>
<rect x="-7" y="-7.5" width="14" height="15" fill="url(#robot_icon)" v-show="!stopAani" >
<animateMotion :path="pathd" begin="0.5s" :dur="dur+'s'" v-if="pathd" repeatCount="indefinite" id="animate_motion" />
</rect>
<svg>
var pause = document.getElementById('svg_an');
var unPause = document.getElementById('svg_an');
function parar(){
pause.pauseAnimations();
}
function voltar(){
unPause.unpauseAnimations();
}