Walkway.js 是一个使用线条和路径元素组成 SVG 动画图像的简单方法。只需根据提供的配置对象创建一个新的 Walkway 实例就可以了。这种效果特别适合那些崇尚简约设计风格的网页。目前, Walkway.js 仅适用于路径和线条元素。

效果演示     插件下载

如何使用:

根据提供的配置选项创建一个 Walkway 示例,如果想要开始动画效果,调用 draw 方法即可。

// Create a new instance
var svg = new Walkway(options);
// Draw when ready, providing an optional callback
svg.draw(callback); // Options passed in as an object, see options below.
var svg = new Walkway({ selector: '#test'}); // Overwriting defaults
var svg = new Walkway({
selector: '#test',
duration: '2000',
// can pass in a function or a string like 'easeOutQuint'
easing: function (t) {
return t * t;
}
}); svg.draw(); // If you don't want to change the default options you can
// also supply the constructor with a selector string.
var svg = new Walkway('#test'); svg.draw(function () {
console.log('Animation finished');
});

 

您可能感兴趣的相关文章

本文链接:Walkway.js – 用线条和路径构成简约的 SVG 动画

编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

Walkway.js – 用线条制作简约的 SVG 动画的更多相关文章

  1. Walkway.js – 创建简约的 SVG 线条动画

    Walkway.js 是一个使用线条和路径元素组成 SVG 动画图像的简单方法.只需根据提供的配置对象创建一个新的 Walkway 实例就可以了.这种效果特别适合那些崇尚简约设计风格的网页.目前, W ...

  2. 推荐15款制作 SVG 动画的 JavaScript 库

    在当今时代,SVG是最流行的和正在被众多的设计人员和开发人员使用,创建支持视网膜和响应式的网页设计.绘制SVG不是一个艰巨的任务,因为大量的 JavaScript 库可与 SVG 图像搭配使用.这些J ...

  3. SVG动画实践篇-无中生有的线条动画

    git: https://github.com/rainnaZR/svg-animations/tree/master/src/pages/step2/path 说明 这个动画实现的是线条动画,主要用 ...

  4. D3.js学习笔记(六)——SVG基础图形和D3.js

    目标 在这一章,我们将会重温SVG图形,学习如何使用D3.js来创建这些图形. 这里会包括前面例子中的SVG基础图形以及如何使用D3.js设置图形的属性. 使用D3.js画一个SVG 的 圆 circ ...

  5. 制作svg动画

    要实现一步一步画出来一个图片,css3做不到吧.除非一张张的图片定时显示.想不到别的招了.如今用的是一个插件,做了一个svg动画. 插件地址:http://lazylinepainter.info/ ...

  6. 深入理解Three.js中线条Line,LinLoop,LineSegments

    前言 在可视化开发中,无论是2d(canvas)开发还是3d开发,线条的绘制应用都是比较普遍的.比如绘制城市之间的迁徙图,运行轨迹图等.本文主要讲解的是Three.js中三种线条Line,LineLo ...

  7. js傻瓜式制作电子时钟

    js傻瓜式制作电子时间 使用到的知识点 setInterval函数 构建函数new Date if判断 demo: //css样式请自行设置 <span id="timer" ...

  8. SVG动画制作工具 , 从此抛弃臃肿的gif

    VG简介 只要是程序员的你,你不得不知道svg图片,它可以无限任意放大拉伸都不会损失画质,就像系统字体一样可以无限矢量放大,svg更高级是可以用来制作矢量动画,现在各大浏览器和系统基本对svg已经支持 ...

  9. three.js 郭先生制作太阳系

    今天郭先生收到评论,想要之前制作太阳系的案例,因为找不到了,于是在vue版本又制作一版太阳系,在线案例请点击博客原文(加载时间比较长,请稍等一下).话不多说先看效果图. 图片有点多,先放三张,相比于上 ...

随机推荐

  1. Enterprise Solution 界面设计规范

    Enteprise Solution有一套自己的界面设计规范,也是很多年(10年以上)管理软件界面精华的积累.没有一个软件从一开始就很善于界面设计,许多个小小的改善,比如控件位置的移动,控件摆放顺序的 ...

  2. 【WP开发】正确理解页面缓存

    注:本文内容面向Runtime App. 在新建项目后,细心观察,你会发现在App类中有以下代码: // TODO: 将此值更改为适合您的应用程序的缓存大小 rootFrame.CacheSize = ...

  3. uva 10801 - Lift Hopping(最短路Dijkstra)

    /* 题目大意: 就是一幢大厦中有0-99的楼层, 然后有1-5个电梯!每个电梯有一定的上升或下降速度和楼层的停止的位置! 问从第0层楼到第k层最少经过多长时间到达! 思路:明显的Dijkstra , ...

  4. 微信内置浏览器WebApp开发,踩坑 · Issue #31 · maxzhang/maxzhang.github.com · GitHub

    最近花6天时间完成了一个七夕的小活动,是一个简单的WebApp.由于我前期对面向微信的Web开发评估不足,导致开发过程十分艰难.写这篇文章总结下,惊醒自己未来不要再犯这样的错误. 问题: 1. 有些比 ...

  5. HTML5移动Web开发(四)——移动设计

    桌面网站的设计趋势是固定布局(fixed layout)或流体布局(fluid layout),而在移动网站中我们应该始终使用流体布局,它可以使你的网站适应不同的设备尺寸. 固定宽度布局(Fixed ...

  6. Windows Azure Cloud Service (11) PaaS之Web Role, Worker Role(上)

    <Windows Azure Platform 系列文章目录> 本文是对Windows Azure Platform (六) Windows Azure应用程序运行环境内容的补充. 我们知 ...

  7. C#语法糖(Csharp Syntactic sugar)大汇总

    首先需要声明的是"语法糖"这个词绝非贬义词,它可以给我带来方便,是一种便捷的写法,编译器会帮我们做转换:而且可以提高开发编码的效率,在性能上也不会带来损失.这让java开发人员羡慕 ...

  8. .NET Nancy 详解(三) Respone 和 ViewEngine

    我们在ASP.NET MVC中可以返回各种类型的ActionResult(以下图片来自于园友--待补..) 在Nancy 中本着简单粗暴的原则,使用方式略有不同.这期我们使用的版本是Nancy的第一个 ...

  9. 2013最新版Subversion 1.7.10 for Windows x86 + Apache 2.4.4 x64 安装配置教程+错误解决方案

    一 .工作环境 操作系统:Windows Server 2008 R2 SP1 x64 Apache版本:2.4.4 Subversion版本: Setup-Subversion-1.7.10.msi ...

  10. Dapper学习 - Dapper的基本用法(三) - CUD

    之前介绍了Dapper的查询, 存储过程, 函数的调用, 接下来要说一下Dapper的增删改, 其实Dapper的增删改, 都是同一种模式的. 我就不分开介绍了, 直接在一个例子上展现好了. var ...