文章来源于网络收集而来,版权归原创者所有,如有侵权请及时联系!
SVG
运动路径动画
动画一个元素,使之相对于SVG路径的x,y和角度值运动。
var myPath = anime.path('svg path');
path函数返回一个返回指定属性的新函数。
v3版本以后,运动路径动画具有响应性(responsive)
Parameters | Example | Info |
'x' | myPath('x') | 返回SVG路径的当前x值('px' ) |
'y' | myPath('y') | 返回SVG路径的当前y值('px' ) |
'angle' | myPath('angle') | 返回SVG路径的当前角度('degrees' ) |
var path = anime.path('.motion-path-demo path');
anime({
targets: '.motion-path-demo .el',
translateX: path('x'),
translateY: path('y'),
rotate: path('angle'),
easing: 'linear',
duration: 2000,
loop: true
});
变形动画
创建两个svg形状之间的过渡。
形状必须具有相同的点数!
更多变形动画信息
anime({
targets: '.morphing-demo .polymorph',
points: [
{ value: ['70 24 119.574 60.369 100.145 117.631 50.855 101.631 3.426 54.369','70 41 118.574 59.369 111.145 132.631 60.855 84.631 20.426 60.369']
},
{ value: '70 6 119.574 60.369 100.145 117.631 39.855 117.631 55.426 68.369' },
{ value: '70 57 136.574 54.369 89.145 100.631 28.855 132.631 38.426 64.369' },
{ value: '70 24 119.574 60.369 100.145 117.631 50.855 101.631 3.426 54.369' }
],
easing: 'easeOutQuad',
duration: 2000,
loop: true
});
画线动画
anime.js使用anime.setDashoffset()
方法获取到SVG路径的长度并将此长度设置为SVG的'stroke-dasharray'
值,并返回该长度,再使用strokeDashoffset
将SVG的'stroke-dashoffset'
属性值在from to格式中产生动画从而创建路径绘制效果。
//从起点开始画完
strokeDashoffset: [anime.setDashoffset, 0]
//从一半开始画完
strokeDashoffset: function(el) { var svgLength = anime.setDashoffset(el); return [svgLength*0.5, 0]; }
更多画线Demo
SVG画线原理(English).
anime({
targets: '.line-drawing-demo .lines path',
strokeDashoffset: [anime.setDashoffset, 0],
easing: 'easeInOutSine',
duration: 1500,
delay: function(el, i) { return i * 250 },
direction: 'alternate',
loop: true
});
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论