返回介绍

SVG

发布于 2020-01-07 22:20:35 字数 2570 浏览 1524 评论 0 收藏 0

运动路径动画

动画一个元素,使之相对于SVG路径的x,y和角度值运动。

var myPath = anime.path('svg path');

path函数返回一个返回指定属性的新函数。

v3版本以后,运动路径动画具有响应性(responsive)

ParametersExampleInfo
'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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文