如何使用SVG生成超酷的页面预加载素描动画效果
在线演示
本地下载
1 SVG简介
可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式。它由万维网联盟制定,是一个开放标准。
2 SVG的特点
与其他图像格式相比(比如 JPEG 和 GIF),使用 SVG 的优势在于:
SVG 图像可通过文本编辑器来创建和修改
SVG 图像可被搜索、索引、脚本化或压缩
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大
3 浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持内联 SVG。Internet Explorer 8或更早版本,可通过安装Adobe SVG Viewer以支持SVG。
4 SVG 标签
SVG 代码以 <svg> 元素开始,包括开启标签 <svg> 和关闭标签 </svg> 。这是根元素。width 和 height 属性可设置此 SVG 文档的宽度和高度。version 属性可定义所使用的 SVG 版本,xmlns 属性可定义 SVG 命名空间。
5 SVG 制作素描线动画举例
1)首先画一条素描线 如图:
<svg version="1.1"xmlns="http://www.w3.org/2000/svg"viewBox = "0 0 200 100"><!--fill属性是否填充stroke为绘制,颜色#AAAAAAstroke-width为绘制线的粗细d是具体数据,这里看到的数据代表了坐标,以及折线等等,可以使用工具生成--><path fill="none"stroke = "#AAA"stroke-width = "2"d = "M62.9 14.9c-25-7.74-56.6 4.8-60.4 24.3-3.73 19.6 21.6 35 39.6 37.6 42.8 6.2 72.9-53.4 116-58.9 65-18.2 191 101 215"/></svg>
素描线的参数可以使用工具生成,
相关课程 基础SVG标签介绍
2)SVG实现素描的动画及原理
stroke-dasharray = "100 10" stroke-dashoffset = "0"
stroke-dasharray定义了生成线段长度,及其线段和线段之间的缝隙 ,这里包含两个参数
stroke-dashoffset定义了从那个位置开始渲染生成线段
相关课程 SVG实现的素描动画模拟效果及其原理
3)使用CSS3来实现素描动画效果
/*定义keyframe动画*//* 添加动画到path元素 */.path{stroke-dasharray: 265.07;stroke-dashoffset: 265.07;animation: dash 3s linear infinite;/* 支持chrome */-webkit-animation: dash 3s linear infinite;}@keyframes dash{from{stroke-dashoffset: 265.07; /* 这里是svg图形中素描线长度,可以使用js获取 */}to{stroke-dashoffset: 0;}}/* 支持chrome浏览器 */@-webkit-keyframes dash{from{stroke-dashoffset: 265.07; /* 这里是svg图形中素描线长度,可以使用js获取 */}to{stroke-dashoffset: 0;}}
相关课程 使用CSS3实现素描动画效果
4)使用Javascript来调节动画效果的参数
/*定义相关Javascript*/var current_frame, //定义当前帧total_frames, //定义全部帧数path, //定义svg中的唯一path元素length, //定义path所生成的素描长度handle; //定义javascript动画句柄path = document.getElementById('path'),length = path.getTotalLength();//定义初始化方法var init = function(){current_frame = 0;total_frames = 160;path.style.strokeDasharray = length + ' ' + length; //定义dasharraypath.style.strokeDashoffset = length; //定义dashoffsethandle = 0;}//定义实际的动画绘制方法var draw = function(){var progress = current_frame/total_frames;if(progress>1){ //这里定义完成动画 window.cancelAnimationFrame(handle);}else{//否则使用reqeuestAnimationFrame来生成动画current_frame++;path.style.strokeDashoffset = Math.floor(length*(1 - progress));handle = window.requestAnimationFrame(draw);}}//定义一个重新运行方法var rerun = function(){init();draw();}//页面加载即运行rerun();
这里主要定义初始化方法和动画绘制的方法,window.requestAnimationFrame(draw);
来生成动画。
相关课程 使用Javascript来实现素描动画效果
5)我们选用极客标签的logo,作为原始图片,坐标参数用 Inkscape 工具生成。
当运行动画绘制程序的时候,各条线安装设定的方式进行绘制,我们就看到非常酷的预加载动画了。
观看完整效果,请访问轻视频课程: 使用javascript生成极客标签Logo的素描动画效果
转载于:https://www.cnblogs.com/gbin1/p/4043355.html
如何使用SVG生成超酷的页面预加载素描动画效果相关推荐
- jsp预加载转圈_30种CSS3炫酷页面预加载loading动画特效(推荐)
这是一组效果非常炫酷的CSS3页面预加载loading动画特效.该特效共有30种不同的loading效果.所有的加载动画都是使用CSS3来完成,jQuery代码只是用于隐藏加载动画.当你点击页面的任何 ...
- 页面预加载loading动画,再载入内容
默认情况下如果网站请求速度慢,所以会有一段时间的空白页面等等,用户体验效果不好,见到很多的页面都有预加载的效果,加载之前先加载一个动画,后台进程继续加载页面内容,当页面内容加载完之后再退出动画显示内容 ...
- 使用CSS3实现超炫的Loading(加载)动画效果
SpinKit 是一套网页动画效果,包含8种基于 CSS3 实现的很炫的加载动画.借助 CSS3 Animation 的强大功能来创建平滑,易于定制的动画.SpinKit 的目标不是提供一个每个浏览器 ...
- 好看的html登录遮罩提示加载中,jQuery炫酷页面预加载Loading特效插件
fakeLoader.js是一款轻量级的 jQuery 炫酷页面预加载Loading特效插件.它能帮助我们创建一个全屏遮罩效果的旋转loading效果来模拟页面预加载过程. Bower安装 bower ...
- vue网页预加载页面_页面预加载效果
vue网页预加载页面 View demo 查看演示Download Source 下载源 Today we want to show you how to create a very simple p ...
- jquery实现页面等待加载“转圈圈”效果
jquery实现页面等待加载"转圈圈"效果 A little of BB:看了不少前端框架,寻思着自己diy封一个加载转圈圈的效果,以后在项目上节省时间("懒" ...
- 小程序性能优化之页面预加载方案——让你的小程序运行如飞 进阶篇
小程序性能优化之页面预加载方案 进阶篇 转载请注明出处:https://blog.csdn.net/sinat_27612147/article/details/80798452 写在前面 预加载方案 ...
- 纯web项目不能使用mui.preload进行页面预加载的解决办法
首先: 纯web项目不能使用mui.preload进行页面预加载的, 比如[基于微信的web项目](http://ask.dcloud.net.cn/question/20644) 怎么办呢? 自己写 ...
- 【vue】用WOW.js+animate.css实现页面滚动加载元素动画
一.场景 在很多的网站中,我们发现在滚动条滑动的时候一些元素显示出来的时候是有一些动画效果的,这样看起来页面更具有活力,增加用户体验.当然这些动画我们可以通过判断滚动条的位置或者判断元素距离可视窗口的 ...
- ios 微信浏览器 预加载_小程序页面预加载技术
lightning-load-project 集成方式 看不效果览图的话,请看博客 https://blog.csdn.net/sinat_27612147/article/details/80802 ...
最新文章
- 透过散射薄膜成像方案整理
- 2017.4.5下午
- java序列化异常_Java|序列化异常StreamCorruptedException的解决方法
- 修改apk连接服务器地址,如何修改apk连接服务器地址
- redis 清空db下_PHP操作redis实现的分页列表
- 程序员都在用的IDEA插件(不断更新)
- SpringBoot应用监控——Actuator安全隐患及解决方案
- python 通过索引迭代列表_python – NumPy – 迭代2D列表和打印(行,列)索引
- 程序猿的奋斗史(三十八)——大学断代史(二)——我与数据库的故事
- 操作config文件
- 【路径规划】基于matlab模糊控制机器人路径规划【含Matlab源码 1643期】
- 报表工具对比评论汇总,选型看这一篇就够了---------报表工具对比软文最全的收集汇总帖子
- 记一次使用Openssl生成p12证书搭建https证书
- BeX5使用疑难总结
- 对数函数图像增减性质
- 五险一金及个税计算器
- 如何查看2020最新版谷歌地球高精度卫星地图(附下载方法)
- 关于为什么频宽越大传输越快 、 频率越高传输距离越短
- 主题颜色提取 ——— Palette
- C#datagridview中双缓存Dgv
热门文章
- 2.5.PHP7.1 狐教程-【数据类型】
- ActiveMQ 简介、安装、与 Maven 项目基本使用
- 985大学计算机专业保研率排名,2016中国大学保研率排行榜出炉
- 2019最新 Java商城秒杀系统的设计与实战视频教程(SpringBoot版)_1-1课程整体介绍...
- 阶段3 1.Mybatis_12.Mybatis注解开发_8 mybatis注解开发使用二级缓存
- 阶段1 语言基础+高级_1-3-Java语言高级_09-基础加强_第3节 注解_15_注解_自定义注解_属性定义...
- 对GUID的一点探讨
- mybatis使用collection查询集合属性规则
- sql server系统数据库,temp库的用途
- FFT(快速傅里叶变换):UVAoj 12298 - Super Poker II